CODEWITHSUNDEEP
javascriptchartshighcharts
mjs
mjs

Reputation: 22347

highcharts, possible bug setting tooltip formatter and html?

I have set these options: 

                tooltip: {
                    shared: true,
                    useHTML: true,
                    formatter: function() {
                        return '<table style="text-align: center"><tr><td>{point.x:%Y-%b-%e}</td></tr><tr><td>Price: {point.y}</td></tr></table>';
                  }

but I still get this output.

enter image description here

If I use: 

               tooltip: {
                    shared: true,
                    useHTML: true,

                    headerFormat: '<table style="text-align: center"><tr><td>{point.x:%Y-%b-%e}</td></tr><tr><td>Price: {point.y}</td></tr></table>',
                    pointFormat: '',
                    footerFormat: '',
                    valueDecimals: 2
                },

then I get:

enter image description here

However, when I zoom out to All or a 10 year period, I get the same output as first.

enter image description here

There seems to be a bug when around 3 years are used.

Here is a jsfiddle that demonstrates the error:

https://jsfiddle.net/3Ld2zmum/2/

Zoom out to All

Upvotes: 2

Views: 228

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

In formatter you should use reference to point object and Highcharts.dateFormat

formatter: function () {
            return '<table style="text-align: center"><tr><td>' + (Highcharts.dateFormat('%Y-%b-%e', this.x)) + '</td></tr><tr><td>Price: ' + this.y + ' </td></tr></table>';
        },

https://jsfiddle.net/3Ld2zmum/3/

Upvotes: 1

Related Questions