[Chartjs]-Add a text as tooltip for each point on a line chart

1👍

The way i added my custom tooltips.
Firstly i created a dataset in which data array i added additional info like “count”

x: 10,
y: 12,
count: 2

This count does not get shown in graph unless I manually get it in options hook under tooltips.

tooltips: {
      callbacks: {
                label: function(tooltipItem, data) {
                    return i18n.t('chart.count') +': ' + getCount(tooltipItem, data.datasets);
                }
      }
 }

Get count for given dataset that was not represented in chart

function getCount(tooltipItem, datasets) {
    return datasets[tooltipItem.datasetIndex].data.find(datum => {
        return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel;
    }).count;
}

And the result:
enter image description here
Edit: adding an example of my dataset

return [{
    label: 'Example dataset',
    backgroundColor: '#98cc99',
    borderColor: '#98cc99',
    pointHoverRadius: 3,
    data: [ {x:1,y:2,count:3}, {x:2,y3,count:4}, ...]
}];

1👍

This looks like it:

label: sensorID,
data: [0,1,2,3],
backgroundColor: [
        'rgba(' + rndColor() + ',' + rndColor() + ',' + rndColor() + ',0.2)'
],
borderColor: [
        'rgba(' + rndColor() + ',' + rndColor() + ',' + rndColor() + ',0.2)'
],
options: {
    tooltips: {
        enabled: true
        custom: function(tooltip) {
            // code here to customize a tooltip
        }
    }
}

http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

http://www.chartjs.org/docs/#advanced-usage-external-tooltips

See sample/line-customTooltips.html for examples on how to get
started.

Leave a comment