score:0
Accepted answer
i have the idea of how to create this chart by using two pie series and gauge. gauge y axis has set min set to 0 and max to 10 for a function which calculates the values for the indicator.
here is a function to calculate the values for gauge for each period:
function parsedata(value) {
if (value <= 10) {
return value * 0.8 - 1
} else if (10 < value && value <= 20) {
return ((value - 10) / 2.5) + 7
} else {
return ((value - 20) / 10) + 11.5
}
}
rest of the code you can find here - demo
api: https://api.highcharts.com/highcharts/series.pie.datalabels.formatter
let me know if something is unclear.
kind regards!
Source: stackoverflow.com
Related Query
- unequal intervals on gauge Highcharts (or other libraries)
- Why code of Horizonal line(y-axis) on a single in Highcharts get applied to all other charts integrated with Webdatarocks
- Is there a solution to plot 3D multiple time line series in web application using highcharts or any other libraries
- Highcharts - show every other x-axis category
- Highcharts Solid Gauge Width
- Highcharts - animations other than the default
- highcharts link series such that turn one off turns off the other
- getting error#17 from highcharts while using solid gauge from backbone rails
- HIghcharts 4 solid gauge max value
- Highcharts Gauge
- Dynamically update gauge on highcharts
- Not rendering VU-meter Gauge chart using HighCharts in Durandal
- Highcharts - Color coded legend for solid gauge
- Highcharts Gauge misplaced labels
- Highcharts gauge not rendering text
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts Gauge Spacing
- How do I use an Highcharts Solid Gauge in angular 6 with typescript?
- rendering Highcharts datatimes on the x axis at regular intervals
- Highcharts - Global configuration with common code and unique data & Headings
- Show more data on Gauge chart with Highcharts
- Show some specefic number on gauge highcharts axis labels
- Rails generates chart for .each do |x| using highcharts or any other chart API
- Highcharts Solid Gauge with min number NOT zero
- Highcharts - Highstock: fixed width intervals with scrollbar
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- Highcharts - Gauge chart data label not positioning correctly
- Highcharts Gauge chart is rounding down max number
- Highcharts gauge fill to 100% of container
- Highcharts - temperature gauge
More Query from same tag
- Y-axis on large negative and small positive values in High Charts
- Hover on areas not on point in Highchart-polygon
- Parse CSV for multiple categories in Highcharts
- Group Highchart time data into weeks and months
- Remove step line points
- Always position Highcharts tooltip on top with respect to the marker point
- Implements live highcharts in ionic 2
- Highcharts export duplicating category labels
- How to handle Highcharts events from an AngularJS directive?
- Change first tick position on xAxis
- How to stop Highmaps on mouse hover to change SVG path orders
- MSSQL Server to PHP Array to JSON Encode to Highcharts
- Highcharts not rendering : React+Typescript+Highcharts
- Highcharts - Bubble losing focus without exiting the chart
- Need to create this graph in Highcharts
- How to set y-axis in HighChart?
- Adding flags to Highstock chart (highcharts) with JavaScript
- Change legend symbol in Column Chart in highcharts
- Highcharts adjust y-axis to set "100%" as the sum of custom values
- HighCharts in R Shiny App
- Highcharts drilldown set x-axis setExtremes
- How to create scrollbar in Highcharts
- Set specific spacing between rows and columns in Highcharts heatmaps
- Highcharts how to make legends as data labels on scatter plot
- Highcharts piechart is not drawing slices from JSON object
- In Highcharts, how to set width of plot bands on y-axis in column chart?
- Highcharts wrap processData on line charts doesn't draw right data points
- High Charts export-server not rending legend LabelFormatter
- Use series data but display custom text on top of columns Highchart
- Get Highchart (/ Highstock) from public data (json)