JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

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

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

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

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

const options = {
  chart: {
    type: 'pie',
    height: 340,
  },
  title: {
    text: ''
  },
  plotOptions: {
 series: {
      dataLabels: {
       distance: 20,
       padding: 0,
       /*  style: {
          textOutline: false,
          fontWeight: 'normal',
          fontSize: '12px'
        }, */
     //   allowOverlap: true
      },
     
    },
      pie: {
     //   alignTo: 'PlotEdges',
   //  cumulative: -0.25, // Start at 3PM
     //   borderWidth: 0,
        startAngle: 0,
        endAngle: 180,
       // cursor: 'pointer',
        center: [0, 125],
         
          /*   dataLabels : {
                rotation : 15
            }, */
        
        /*  dataLabels: {
                distance: '90%'
          }, */ 
          
        events: {
          click: function (event) {
            var partyFilter = partyTypeMap[this.chart.hoverPoint.name] + "&is_open[]=true"
            var url = relative_url + partyFilter
            window.open(url, '_blank');
          }
        }
      }
    },
  series: [{
      innerSize: 155,
      size: 205,
      data: [85,5,1,1,2,1],
      //startAngle: 45
       
    }, {
      innerSize: 105,
      size: 155,
      data: [87,2],
      dataLabels: {
        enabled: false
      }
    }],
    tooltip: {
      useHTML: true,
      shared: true,
      outside: true,
      hideDelay: 700,
      shape: 'square',
      followPointer: false,
      formatter: function () {
        return "<span>" + this.key + ' ' + this.y + "</span><br/>"
      }
    },
    exporting: {
      enabled: true,
      buttons: {
        contextButton: {
          titleKey: '',
          symbol: 'url(/images/chart-dwld-btn.svg)',
          menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF"],
        }
      }
    },
    navigation: {
      buttonOptions: {
        height: 32,
        width: 32,
        symbolX: 23.5,
        symbolY: 23.5,
        theme: {
          r: 50,
          fill: '#f2f5f8',
        }
      }
   ...