Reviews

25/45 Reviews

by Sarah Godoshian

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>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

JavaScript

$(function() {


  Highcharts.chart('container', {

      chart: {
        type: 'solidgauge',
        marginTop: 50
      },

      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}/45</span>',
        positioner: function(labelWidth, labelHeight) {
          return {
            x: 200 - labelWidth / 2,
            y: 180
          };
        }
      },

      pane: {
        startAngle: -180,
        endAngle: 180,
        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: '58%',
            innerRadius: '43%',
            backgroundColor: Highcharts.Color('#F5A623').setOpacity(0.3).get(),
            borderWidth: 0
          }
        ]
      },

      yAxis: {
        min: 0,
        max: 45,
        lineWidth: 0,
        tickPositions: []
      },

      plotOptions: {
        solidgauge: {
          borderWidth: '20px',
          dataLabels: {
            enabled: false
          },
          linecap: 'round',
          stickyTracking: false
        }
      },

      series: [
        /*{
                    name: 'Move',
   ...