highcharts show additional custom data in tooltip

highcharts, javascript

Solution

I managed to do something similar to what you want using the custom tooltip formatter function.

chartOptions.xAxis = {
        categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
        nbItems: {"23.01.2014":5,'24.01.2014':3,'25.01.2014':4}
    };

...

chartOptions.tooltip = {      
         formatter: function() {
            var s = '<b>'+ this.x + ' (' + chartOptions.xAxis.nbItems[this.x] + ')</b>';

            $.each(this.points, function(i, point) {
                s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
            });

            return s;
        },
        shared: true,
        useHTML: false
    };

http://jsfiddle.net/c8CaB/

Not ideal, as you no longer have full html support, but you can still style the output using a subset of HTML (http://api.highcharts.com/highcharts#tooltip.formatter).

Problem

I want to add informations in the tooltip of my highcharts (I already tried the other similar questions about this, but none solved my problem...). I want to have the day `(jj.mm.aaaa)` as the label of each data in my xAxis. But in my tooltip, I want to have as the tooltip title, the date AND another information that is not rendered in the chart : `(jj.mm.aaaa) = n items` For example, I have this xAxis data : ``` chartOptions.xAxis = { categories: ['23.01.2014', '24.01.2014', '25.01.2014'] }; ``` that's the label I want for my xAxis, but in my tooltips I want to have : ``` ------------------------ ------------------------ ------------------------ - 23.01.2014 = 5 items - - 24.01.2014 = 3 items - - 25.01.2014 = 4 items - ------------------------ ------------------------ ------------------------ ``` I tried to add an option to the xAxis object like this : ``` chartOptions.xAxis = { categories: ['23.01.2014', '24.01.2014', '25.01.2014'], nbItems: [5,3,4] }; ``` but this will output all cell of the array for each element : ``` ---------------------------- ---------------------------- ---------------------------- - 23.01.2014 = 5,3,4 items - - 24.01.2014 = 5,3,4 items - - 25.01.2014 = 5,3,4 items - ---------------------------- ---------------------------- ---------------------------- ``` Is there a way to have only the corresponding nb of item ? Here is a fiddle to help you understand my problem : http://jsfiddle.net/upE3T/1/

Original source