JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/drilldown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/js/modules/data.js"></script>
<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">


    </style>
  </head>

  <body>

    <!-- <script src="../../code/highcharts.js"></script> -->

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

    <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
    <script type="text/javascript">
      // Create the chart
      Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Browser market shares. January, 2015 to May, 2015'
        },
        subtitle: {
          text: 'Click the slices to view versions. Source: netmarketshare.com.'
        },
        xAxis: {
          categories: ['Win', 'Draw', 'Loss']
        },
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
              format: '{point.name}: {point.y:.1f}%'
            }
          }
        },

        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        drilldown: {
          series: [{
            name: 'Test Drilldown',
            id: 'test',
            data: [
              ['data A', 24.13],
              ['data B', 17.2],
              ['data C', 8.11],
              ['data D', 5.33]
            ]
          }]
        },
  ...