I am working on a project where I need to create a custom gauge chart using Highcharts. I want to customize the gauge’s appearance by altering the shape of the chart and dynamically adjusting the values displayed.
Here are the specific requirements:
Custom shape for the gauge, different from the standard circular gauge (e.g., rectangular, circular with unique segments, etc.). Custom value range and display, where the gauge shows values according to a predefined range. The chart should have custom labels and ticks, with the ability to modify their position and style. I will also be attaching an image as a reference to help illustrate the desired appearance and behavior of the chart.
Can anyone guide me on how to achieve this? A code example or a detailed explanation would be greatly appreciated!
I am working on a project where I need to create a custom gauge chart using Highcharts. I want to customize the gauge’s appearance by altering the shape of the chart and dynamically adjusting the values displayed.
Here are the specific requirements:
Custom shape for the gauge, different from the standard circular gauge (e.g., rectangular, circular with unique segments, etc.). Custom value range and display, where the gauge shows values according to a predefined range. The chart should have custom labels and ticks, with the ability to modify their position and style. I will also be attaching an image as a reference to help illustrate the desired appearance and behavior of the chart.
Can anyone guide me on how to achieve this? A code example or a detailed explanation would be greatly appreciated!
Share Improve this question asked 2 days ago Hithesh VeerHithesh Veer 271 silver badge9 bronze badges1 Answer
Reset to default 0I can share some tips and references that should help you on the way. To change the default shape, you need to play with pane, yAxis.plotBands and pane.background settings (you can create a custom shape for the background). As for the range, you can easily set it with yAxis min and max options. As for the labels, you have yAxis.labels settings, and there are several ways to set your ticks, just check yAxis.tick options.
Please see the demo attached to this API option to take a look at the way to extend graphic options with SVGrenderer: https://api.highcharts/highcharts/series.scatter.marker.symbol
I hope that these would be helpful, happy charting!