Format X label on mouse hover in chart.js

1
votes

I'm using Javascrip Date objects for the X label. I was able to format it properly in the X axis but now I'm struggling to format the label when moving the mouse over each of the bars in the chart.

enter image description here

How can I change that full date to a custom format?

Reproduction online

I guess it will have to go in the ticks option?

1
chart.js

1 Answers

2
votes

Edit the title callback property in your tooltips attribute, stored in the option :

tooltips: {
    callbacks: {
        title: function(tooltipItem, chartData) {
            // You return what you want here
            return "Title";
        }
    }
}

You can see on this jsFiddle your updated example, and here is its result :

enter image description here