Highcharts Activity Gauge Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create activity gauge chart using highcharts library with examples.

Highcharts Activity Gauge Chart Example

Following is the example of creating an activity gauge chart by setting the required chart properties using highcharts library.

 

Live Preview

<html>

<head>

    <title>Highcharts Activity Gauge Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script src="https://code.highcharts.com/highcharts-more.js"></script>

    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

    <script type="text/javascript">

        $(function() {

            /**

             * In the chart render event, add icons on top of the circular shapes

             */

            function renderIcons() {

                // Move icon

                if (!this.series[0].icon) {

                    this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])

                        .attr({

                            stroke: '#303030',

                            'stroke-linecap': 'round',

                            'stroke-linejoin': 'round',

                            'stroke-width': 2,

                            zIndex: 10

                        })

                        .add(this.series[2].group);

                }

                this.series[0].icon.translate(

                    this.chartWidth / 2 - 10,

                    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -

                    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2

                );

                // Exercise icon

                if (!this.series[1].icon) {

                    this.series[1].icon = this.renderer.path(

                            ['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,

                                'M', 8, -8, 'L', 16, 0, 8, 8

                            ]

                        )

                        .attr({

                            stroke: '#ffffff',

                            'stroke-linecap': 'round',

                            'stroke-linejoin': 'round',

                            'stroke-width': 2,

                            zIndex: 10

                        })

                        .add(this.series[2].group);

                }

                this.series[1].icon.translate(

                    this.chartWidth / 2 - 10,

                    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -

                    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2

                );

                // Stand icon

                if (!this.series[2].icon) {

                    this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])

                        .attr({

                            stroke: '#303030',

                            'stroke-linecap': 'round',

                            'stroke-linejoin': 'round',

                            'stroke-width': 2,

                            zIndex: 10

                        })

                        .add(this.series[2].group);

                }

                this.series[2].icon.translate(

                    this.chartWidth / 2 - 10,

                    this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -

                    (this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2

                );

            }

            Highcharts.chart('container', {

                chart: {

                    type: 'solidgauge',

                    height: '110%',

                    events: {

                        render: renderIcons

                    }

                },

                title: {

                    text: 'Activity',

                    style: {

                        fontSize: '24px'

                    }

                },

                tooltip: {

                    borderWidth: 0,

                    backgroundColor: 'none',

                    shadow: false,

                    style: {

                        fontSize: '16px'

                    },

                    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',

                    positioner: function(labelWidth) {

                        return {

                            x: (this.chart.chartWidth - labelWidth) / 2,

                            y: (this.chart.plotHeight / 2) + 15

                        };

                    }

                },

                pane: {

                    startAngle: 0,

                    endAngle: 360,

                    background: [{ // Track for Move

                        outerRadius: '112%',

                        innerRadius: '88%',

                        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])

                            .setOpacity(0.3)

                            .get(),

                        borderWidth: 0

                    }, { // Track for Exercise

                        outerRadius: '87%',

                        innerRadius: '63%',

                        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])

                            .setOpacity(0.3)

                            .get(),

                        borderWidth: 0

                    }, { // Track for Stand

                        outerRadius: '62%',

                        innerRadius: '38%',

                        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])

                            .setOpacity(0.3)

                            .get(),

                        borderWidth: 0

                    }]

                },

                yAxis: {

                    min: 0,

                    max: 100,

                    lineWidth: 0,

                    tickPositions: []

                },

                plotOptions: {

                    solidgauge: {

                        dataLabels: {

                            enabled: false

                        },

                        linecap: 'round',

                        stickyTracking: false,

                        rounded: true

                    }

                },

                series: [{

                    name: 'Move',

                    data: [{

                        color: Highcharts.getOptions().colors[0],

                        radius: '112%',

                        innerRadius: '88%',

                        y: 80

                    }]

                }, {

                    name: 'Exercise',

                    data: [{

                        color: Highcharts.getOptions().colors[1],

                        radius: '87%',

                        innerRadius: '63%',

                        y: 65

                    }]

                }, {

                    name: 'Stand',

                    data: [{

                        color: Highcharts.getOptions().colors[2],

                        radius: '62%',

                        innerRadius: '38%',

                        y: 50

                    }]

                }]

            });

        });

    </script>

</head>

<body>

    <div id="container"> </div>

</body>

</html>

If you observe the above example, we created an activity gauge chart by using highcharts library with required properties.

 

When we execute the above highcharts example, we will get the result like as shown below.

 

Highcharts Activity Gauge Chart Example Result

 

This is how we can create activity gauge chart using highcharts library with required properties.