Highcharts Demo

author(s): Torstein Hønsi

by KevinABoucher

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; max-width: 800px; height: 400px; margin: 0 auto"></div>
<select class="toggle" style="display:initial; width:50%">
  <option value="0">-select chart type-</option>
  <option value="bar">bar</option>
  <option value="pie">pie</option>
</select>

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    },
    pie: {
      dataLabels: {
        formatter: function() {
          var sliceIndex = this.point.index;
          var sliceName = this.series.chart.axes[0].categories[sliceIndex];
          return sliceName
        }
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',
    data: [107, 31, 635, 203, 2]
  }]
})

$(function() {
  $(".toggle").change(function() {
    var type = this.value;
    if (type !== '0') {
      $(chart.series).each(function() {
        this.update({
          type: type
        }, false);
      });
      chart.redraw();
    }
  });
});