CODEWITHSUNDEEP
highcharts
Franzl
Franzl

Reputation: 719

Highcharts 5 tooltip colour with custom css class

I'm using Highcharts 5 in styled mode.

https://jsfiddle.net/franzl/va8cz88o/

series: [{
    className: "graph-red",
    data: [43934, 52503, 57177, 69658, 97031]
}]

The jsfiddle defines a CSS class for colouring a data series red, but this class name doesn't appear to propagate down to the tooltip when hovering over the points.

Is there anyway to specify the class name for the tooltip? I've scanned through the documentation, but I can't find the correct way to handle this.

Upvotes: 2

Views: 6783

Answers (3)

philipnye
philipnye

Reputation: 653

You're correct in thinking that className isn't applied to the tooltip, as at April 2019 at least.

There is a way of styling points though, using the pointFormat property of tooltips and series.options.className. Try:

tooltip : { pointFormat: '<span class="{series.options.className}">\u25CF</span> {series.name}: {point.y}<br/>' }

That adds the className to the point - meaning in styled mode it will be the same colour as other things given that class.

Example: https://jsfiddle.net/philipnye/qrj4p1hn/4

As far as I can tell, it's not possible to use the same technique to set the tooltip border colour. So you might just want to set the tooltip border to be the same colour as the tooltip's background colour. E.g. (assuming the background colour is the default one):

.highcharts-tooltip { stroke: #f7f7f7; }

h/t @morganfree for linking to the open GitHub ticket about this, where one of the Highcharts team suggests this way of using pointFormat.

Upvotes: 0

morganfree
morganfree

Reputation: 12472

In a styled mode className of the series is not applied to the tooltip. You need to style it separately by using classes like .highcharts-tooltip or highcharts-color-{n}.

example: https://jsfiddle.net/xo05ov2f/

There is an open ticket on Highchats github regarding that behaviour - https://github.com/highcharts/highcharts/issues/6448

Upvotes: 2

Saroj
Saroj

Reputation: 1571

You can format the tooltip content by 'formatter' function.

 Highcharts.chart('container', {
    tooltip: {
      borderColor: '#FFFFFF',
      backgroundColor: '#FFFFFF',
      borderWidth: 0,           
      useHTML: true,
      formatter: function(){
          var content = '';
          content += '<span style="color:red;padding-right:10px;">' + 
                     '<span style="padding-right: 5px;color:' +                                                            
                      this.series.color + '">'+ '\u25CF</span>' +
                      this.series.name + ':  ' +   
                     '<span style="color:red;">' +  this.y  + '</b>' + '</span>';
                   return content;
               }
        }, 
    series: [{
             className: "graph-red",
             data: [43934, 52503, 57177, 69658, 97031]
         }]
   });

Hope it helps !!

Upvotes: 0

Related Questions