JSFiddle - React, Tailwind, and code Playground

by Nikhil Mangal

HTML

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

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

JavaScript

+$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie',
      events: {
        load: function() {
          var exButton = $('#container').highcharts().exportSVGElements[0];

          exButton.attr({
            opacity: 0
          });
        }
      }
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      },
      series: {
        point: {
          events: {
            click: function() {
              var exButton = this.series.chart.exportSVGElements[0],
                opacity;

              if (!this.selected) {
                opacity = 1
              } else {
                opacity = 0
              }

              exButton.attr({
                opacity: opacity
              });
            }
          }
        }
      }
    },
    navigation: {
      buttonOptions: {
        x: -20,
        y: 20
      }
    },
    exporting: {
      buttons: {
        contextButton: {
          enabled: false
        },
        toggleButton: {
          text: 'EXPORT',
          changedText: 'CHANGED',
          onclick: function() {
            this.exportChart();
            buttonEx.attr({
              opacity: 1
            });
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
      }, {
        name: 'Chrome',
        y: 24.03
      }, {
        name: 'Firefox',
  ...