Chartist.js - point value and X label in tooltip? - chartist.js

Question

I have a Chartist.js line chart with points and I'm using tooltip so when you hover over a point you get the value for that point. I'd also like to add the label for the X axis in there so this...
$chart.on('mouseenter', '.ct-point', function () {
const $point = $(this);
const label = Number($point.attr('ct:label')); // doesn't work
const value = Number($point.attr('ct:value')); // does work
$toolTip.html(value + ' at ' + label).show();
});
...would show the value of the point plus the index (X axis label).

Answer 1

I'm 3 years late but maybe someone else still has the same problem.
I had a similar issue with a bar chart that showed amounts of euro by date. The tooltip only showed the amount for each bar (y-value), but I also wanted it to show the date for that bar (x-value).
Chartist.js and the tooltip plugin come with an inbuilt solution for this - though this is neither intuitive nor well documented. So there is no special CSS or JS hacking involved. You only have to modify your series data array.
Before doing so, my data array looked like this (simplified):
var regularData= [];
// [...]
regularData.push(427615440);
regularData.push(428134236);
regularData.push(428543629);
// [...]
var graphData = {
series: regularData
};
new Chartist.Bar('#chart-container', graphData, options);
So in this case i had a bar chart where the bars each had a value, which was also shown in the tooltip. Now I wanted to add the date.
Solution
Instead of pushing the values directly to the array, you need to push container objects to it, that contain key-value pairs for "meta" and "value", where meta specifies the x-value and value specifies the y-value. Note: the "meta" value can be any value, it does not need to be consistent with the x-value in your data/axis.
var labeledData = [];
// [...]
labeledData.push({meta: "15.12.", value: 427615440});
labeledData.push({meta: "16.12.", value: 428134236});
labeledData.push({meta: "17.12.", value: 428543629});
// [...]
var graphData = {
series: [labeledData]
};
new Chartist.Bar('#chart-container', graphData, options);
And here we go! The mouesover-tooltip now also displays the date instead of the y-value only! Hope this helps. :)
Sidenote: I left out my tooltip formatting (euro values) and the customized CSS (bold y-value) for simplicity.