JSFiddle - React, Tailwind, and code Playground

by prateekbansal07

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/drilldown.js"></script>

<div id="container"></div>

<button id="plain">Plain</button>
<button id="pie">Pie</button>

JavaScript

var series = [{
    name: 'Nascite',
    id: 'Nascite',
    data: [{
      name: '2018',
      y: 1000,
      drilldown: 'Nascite 2018'
    }, {
      name: '2019',
      y: 200,
      drilldown: 'Nascite 2019'
    }]
  }];

  var drilldown = {
    series: [{
      name: 'Nascite 2018',
      id: 'Nascite 2018',
      data: [{
        name: 'USA',
        y: 800,
        drilldown: 'Nascite 2018 USA'
      }, {
        name: 'ITALY',
        y: 900,
        drilldown: 'Nascite 2018 ITALY'
      }]
    }, {
      name: 'Nascite 2019',
      id: 'Nascite 2019',
      data: [{
        name: 'USA',
        color:'red',
        y: 200,
        drilldown: 'Nascite 2019 USA'
      }]
    }, {
      name: 'Nascite 2018 USA',
      id: 'Nascite 2018 USA',
      data: [{
        name: 'Texas',
        y: 100
      }, {
        name: 'California',
        y: 500
      }]
    }, {
      name: 'Nascite 2018 ITALY',
      id: 'Nascite 2018 ITALY',
      data: [{
        name: 'TrentinoAA',
        y: 400,
        drilldown: 'Nascite 2018 ITALY TrentinoAA'
      }]
    }, {
      name: 'Nascite 2019 USA',
      id: 'Nascite 2019 USA',
      data: [{
        name: 'Texas',
        y: 200
      }]
    }, {
      name: 'Nascite 2018 ITALY TrentinoAA',
      id: 'Nascite 2018 ITALY TrentinoAA',
      data: [{
        name: 'Trento',
        y: 300
      }, {
        name: 'Bolzano',
        y: 100
      }]
    }]
  };

  var chart = Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Chart.update'
    },
    subtitle: {
      text: 'Plain'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {},
    series: series,
    drilldown: drilldown
  });

  document.getElementById('plain').addEventListener('click', () => {
    chart.update({
      chart: {
        type: 'pie'
      }
    });
  });

  document.getElementById('pie').addEventListener('click', () => {
    chart.update({
      chart: {
        type: 'pie'
      }
    });
  });