Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto;"></div>

CSS

#container {
  background: #000
}

JavaScript

var data = [{
  name: 'Thane',
  y: 25,
  color: '#e84a34'
}, {
  name: 'Nagpur',
  y: 15,
  color: '#00ce69'
}, {
  name: 'Pune',
  y: 30,
  color: '#f6be42'
}, {
  name: 'Mumbai',
  y: 30,
  color: '#2c92c5',
}];
var start = -90;
var series1 = [];
for (var i = 0; i < data.length; i++) {
  var end = start + 360 * data[i].y / 100;
  data[i].y = 100;

  series1.push({
    type: 'pie',
    size: 300,
    innerSize: 130,
    startAngle: start,
    endAngle: end,
    data: [data[i]]
  });
  start = end;
};
var chart = Highcharts.chart('container', {
  series: series1,
  title: {
    verticalAlign: 'middle',
    floating: true,
    text: '23,564'
  },
  plotOptions: {
    pie: {
      shadow: true,
      shadow: {
        width: 10
      },
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        distance: -25,
        y: 5,
      },
      point: {
        events: {
          click: function(e) {

            var name = (this.name);
            this.series.update({
              size: 350
            });
            for (let i = 0; i < series1.length; i++) {

              //console.log(series1[i].data[0].name)
              if (name != series1[i].data[0].name)
                chart.series[i].update({
                  size: 300
                })
            }
          }
        }
      }
    }
  }
});