CODEWITHSUNDEEP
javascripthighcharts
ylerjen
ylerjen

Reputation: 4259

highcharts show additional custom data in tooltip

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/

Upvotes: 3

Views: 4175

Answers (1)

SteveP
SteveP

Reputation: 19103

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).

Upvotes: 3

Related Questions