Activity gauge

author(s): Torstein Hønsi

by Rambabu Pudi

HTML

<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 src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A chart showing multiple gauge series arcing around the center point,
        similar to the activity chart found on the Apple Watch. Each gauge has a
        custom icon, and the tooltip is positioned statically in the center.
    </p>
</figure>

CSS

#container {
	max-width: 400px;
	margin: 0 auto;
}

.highcharts-figure, .highcharts-data-table table {
	min-width: 380px;    
	max-width: 600px;
    margin: 0 auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

function renderNames() {

  this.series.forEach(series => {
    if (!series.icon) {
      series.icon = this.renderer.text(series.name, 0, 0)
        .attr({
          zIndex: 10
        })
        .add(series.group);
    }
    series.icon.translate(
      this.chartWidth / 2 - 10,
      this.plotHeight / 2 - series.points[0].shapeArgs.innerR -
      (series.points[0].shapeArgs.r - series.points[0].shapeArgs.innerR) / 2
    );

  });

}

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '110%',
    events: {
      render: renderNames
    }
  },

  title: {
    text: 'Activity',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '16px'
    },
    valueSuffix: '%',
    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
     ...