I tried to customize the tooltip of ngx-charts-heat-map with this code
<ng-template #tooltipTemplate let-item="item">
<h1>
{{getFlag(item.name)}}
</h1>
<h2>{{item.name}}: {{item.value}}</h2>
</ng-template>
I realize this work just fine if the data is single object array, but not the multi object ones
export var single = [
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
},
{
"name": "France",
"value": 7200000
}
];
export var multi = [
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
},
{
"name": "France",
"series": [
{
"name": "2010",
"value": 5000002
},
{
"name": "2011",
"value": 5800000
}
]
}
];
the ngx-charts-heat-map only allow for multi object, is there any way for customize the tooltip? and probably the legend as well
Use a template of the following form within an
<ngx-charts-bar-vertical-2d>
(or similar) chart element:StackBlitz example based on example forked from current docs: https://stackblitz.com/edit/vertical-bar-chart-kfjrxe