score:1
Accepted answer
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
Source: stackoverflow.com
Related Articles
- Highchart tooltip does not match series colour - Solid Gauge Chart
- Solid Gauge chart losing series rendering on page/container resize [ng-highcharts + angular]
- how to customize the tooltip in solid gauge in highchart
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Tooltip does not work with Gauge chart
- Highchart Solid Gauge Chart make one end straight/normal
- How to use the tooltip formatter and still display chart color (like it does by default)?
- How to display highchart series line marker symbol from tooltip formatter?
- How can I extend the lines of this Highchart series to the edges of my chart area?
- Adding a custom tooltip to a bubble chart / highchart
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- hide YAxis values in HighChart Solid Gauge
- How to hide intermediate values of solid gauge chart of highcharts?
- Gauge chart Highchart dial style issue
- trying to dynamically update Highchart column chart but series undefined
- Highchart / Highstock stack column chart show one series's tooltip at a time
- HighCharts Solid Gauge Chart not displaying ticks
- Highchart Polar chart - 4 nested circle with different series
- Highcharts: Dynamically size a solid gauge chart
- How to change tooltip of a column chart programmatically in highchart
- Update Series Array on HighChart after editing chart
- Highchart Solid Gauge Responsive
- Plot Highchart multiple series line chart using JSON data
- Highcharts solid gauge with multiple series
- pie chart legend overlap with older legend when replace series in highchart
- How to create a solid gauge chart with Highcharts in angular 6?
- Config gauge series highchart
- Why does my addSeries (in highcharts) only display names of the series but not the actual pie chart itself
- HighChart marker highlight / tooltip issue, highlight marker does not move
- finding the value in the series object and displaying in the tooltip of the high chart using angular 4
- How to set min start date for Highcharts plot?
- How to return Highcharts ID, once it has been render?
- Discrete bar with highcharts?
- Highstock don't draw
- Integrating Highcharts with REST API
- giving a javascript number fixed width after decimal while remaining a number
- Activity gauge High Chart with Gradient
- Passing Decimal string from php to jquery
- dynamic data to Jquery code in ASP .Net Visual Studio
- HighCharts(iOS) -How to show tooltip by default at only some positions
- Hide Highcharts export buton for mobile devices
- Pie chart 3d json series
- HighCharts: Keeping Tooltip on Chart Click (Chart, Not Series)
- How to get bar id in react highcharts?
- HighCharts basic bar chart provide the xAxis categories with Series
- how to make custom directive or pass variable in directive in angular js
- RevealJS and Highchart Mouse position Tooltip Issue
- Pie Chart keeps loading and never stops
- the datatime value displayed not correct on highchart
- Highcharts PieChart Legend paging faulty