Solución:
Puede definir sus propias plantillas de información sobre herramientas y representar cualquier HTML que desee en ellas:
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="multi" ...>
<ng-template #tooltipTemplate let-model="model">
This is the single point tooltip template
<pre>{{model|json}}</pre>
</ng-template>
<ng-template #seriesTooltipTemplate let-model="model">
This is vertical line tooltip template
<pre>{{model|json}}</pre>
</ng-template>
</ngx-charts-line-chart>
Ejemplo: https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates
El código está aquí: https://github.com/swimlane/ngx-charts/blob/8ebb3dbcbbea443fefdcafd1f5c9069df0e0c4ae/src/app/app.component.html#L992-L998
La solución anterior no funciona para gráficos multidimensionales (> 3) como la barra horizontal / vertical apilada.
Otra forma sencilla que funciona para todos los casos es agregar el tooltipText como un atributo como parte del modelo como se muestra a continuación:
export let multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300000,
tooltipText: 't1'
},
{
name: '2011',
value: 8940000,
tooltipText: 't2'
}
]
}
];
Luego use el siguiente código en el marcado,
<ngx-charts-bar-horizontal-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[legendPosition]="legendPosition"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
<ng-template #tooltipTemplate let-model="model">
<div class="tooltip">
{{model.tooltipText}}
</div>
</ng-template>
</ngx-charts-bar-horizontal-stacked>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)