Gauge Chart Customization

Edit in →
CodePen
Plunker
CodeSandbox

A gauge chart, also known as a dial chart, is used to display a single value within a predefined range of values. It's ideal for showing how a particular metric (sales, production levels, progress towards a goal) measures up against a set target or benchmark. This example shows how to customize gauge charts in the SurveyJS Dashboard library.

SurveyJS Dashboard is built upon the Plotly.js library. It is a multi-platform graphing library that includes all the most commonly used interactive charts and provides rich customization capabilities.

A Plotly.js chart is configured using JSON objects and consists of two parts: data and layout. Data is an array of JSON objects that configure graphs on the canvas. Layout is a JSON object that configures surrounding elements and additional custom shapes. To customize any SurveyJS Dashboard chart, handle the onPlotCreating event raised by the PlotlySetup object. Assign the chart data array to the options.data property and the layout JSON object—to the options.layout property.

In this demo, the onPlotCreating event and Plotly.js API are used to create a new appearance for gauges based on pie and scatter charts. Refer to the code listing for more information.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Accept All
Cookie Settings

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later