JSFiddle - React, Tailwind, and code Playground

by patelsan

HTML

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

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

JavaScript

$(function() {
  // Create the chart
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie'
    },
    title: {
      text: '16',
      align: 'center',
      verticalAlign: 'middle',
      y: 10,
      x: -110,
      style: {
        fontSize: '48px'
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
      }
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      layout: 'vertical',
      x: -70,
      y: 140,
      itemMarginBottom: 12
    },
    series: [{
      name: 'Browsers',
      data: [
        ["Active", 8],
        ["Likely Borrower", 5],
        ["Under Contract", 3]
      ],
      size: '70%',
      innerSize: '70%',
      showInLegend: true,
      dataLabels: {
        enabled: false
      }
    }]
  });
});