Highcharts Demo

author(s): Torstein Hønsi

by Kondal Durgam

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="kinematics"></div>

CSS

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

JavaScript

Highcharts.chart('kinematics', {

  chart: {
    type: 'pie',
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      },
      borderWidth: 0
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    innerSize: '80%',
    data: [1, {
      y: 2,
      color: 'rgba(0,0,0,0)'
    }, {
      y: 3,
      color: 'rgba(0,0,0,0)'
    }]
  }, {
    innerSize: '70%',
    data: [{
      y: 1,
      color: 'rgba(0,0,0,0)'
    }, 2, {
      y: 3,
      color: 'rgba(0,0,0,0)'
    }]
  }, {
    innerSize: '90%',
    data: [{
      y: 1,
      color: 'rgba(0,0,0,0)'
    }, {
      y: 2,
      color: 'rgba(0,0,0,0)'
    }, 3]
  }]
});