Back

Single level gauge chart

Simple JavaScript gauge chart. By default, PieChart visual will render the chart as a full circle, but with 'startAngle' and 'endAngle' properties we created a half-circle to produce a gauge chart. Provide a radian value to determine start and end point placement (in this case, '-3,14159' = nine o'clock; '0' = three o'clock)

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
chart= new PieChart({
    "pie": {
        "startAngle": -3.141592653589793,
        "endAngle": 0,
        "innerRadius": 0.6
    },
    "interaction": {
        "mode": "select",
        "resizing": {
            "enabled": false
        }
    },
    "slice": {
        "expandableMarkStyle": {
            "lineWidth": 0
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/gauge.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    }
})

Data

Data 
{
    "subvalues": [
        {
            "name": "Alpha",
            "value": "200",
            "subvalues": [
                {
                    "name": "Alpha - 1",
                    "value": "10"
                },
                {
                    "name": "Alpha - 2",
                    "value": "65"
                },
                {
                    "name": "Alpha - 3",
                    "value": "35"
                },
                {
                    "name": "Alpha - 4",
                    "value": "5"
                },
                {
                    "name": "Alpha - 5",
                    "value": "85"
                }
            ]
        },
        {
            "name": "Beta",
            "value": "300",
            "subvalues": [
                {
                    "name": "Beta - 1",
                    "value": "100"
                },
                {
                    "name": "Beta - 2",
                    "value": "30"
                },
                {
                    "name": "Beta - 3",
                    "value": "100"
                },
                {
                    "name": "Beta - 4",
                    "value": "70"
                }
            ]
        }
    ]
}
Download Data