CODEWITHSUNDEEP
highcharts
RA19
RA19

Reputation: 809

Highchart tooltip does not match series colour - Solid Gauge Chart

Highcharts tooltip is not matching the series colour and defaulting to the blue. JS Fiddle shows the issue: https://jsfiddle.net/ap5jxb20/

The colours of the series are defined in the events render function as I require a logic check to determine the colours. How do I apply the same colours to the tooltip?

 events: {
                render: function () {
                    var point = this.series[0].points[0];
                    if (point.y < imorequired) {
                        point.graphic.attr({
                            fill: 'green',
                            marker: 'green'
                        })
                    } else if (point.y > imorequired * 1.5) {
                        point.graphic.attr({
                            fill: 'red'
                        })
                    } else {
                        point.graphic.attr({
                            fill: '#ffbf00'
                        })
                    }
                
                    var point2 = this.series[1].points[0];
                    if (point2.y > 0) {
                        point2.graphic.attr({
                            fill: 'green',
                            marker: 'green'
                        })
                    }

                    var point3 = this.series[2].points[0];
                    if (point3.y < imorequired) {
                        point3.graphic.attr({
                            fill: 'green'
                        })
                    } else if (point3.y > imorequired * 1.5) {
                        point3.graphic.attr({
                            fill: 'red'
                        })
                    } else {
                        point3.graphic.attr({
                            fill: '#ffbf00'
                        })

                    }
                }
            }

Upvotes: 0

Views: 223

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

In this case, Highcharts uses point.color to define the color in a tooltip, so as a solution, update also a point.color property.

  chart: {
    type: 'solidgauge',
    events: {
      render: function() {
        var point = this.series[0].points[0];
        if (point.y < 4.27) {
          point.color = 'green';
          point.graphic.attr({
            fill: 'green',
            marker: 'green'
          })
        } else if (point.y > 4.27 * 1.5) {
          point.color = 'red';
          point.graphic.attr({
            fill: 'red'
          })
        } else {
          point.color = '#ffbf00';
          point.graphic.attr({
            fill: '#ffbf00'
          })
        }
        ...
      }
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/5Lbt6wqn/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#color

Upvotes: 1

Related Questions