JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

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

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

CSS

#container {
  border: 1px solid red;
  height: 250px;
  font-size: 8px;
  width: 400px;
}

JavaScript

Highcharts.chart('container', {
  title: {
    text: ''
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      center: ['50%', '100%'],
      dataLabels: {
        enabled: false
      },
      startAngle: -90,
      endAngle: 90,
      showInLegend: true
    }
  },
  legend: {
    itemStyle: {
      fontFamily: "Lato",
      fontWeight: 300,
      fontSize: '8px'
    },
    itemMarginTop: 0,
    itemMarginBottom: 0,
    align: 'center',
    verticalAlign: 'bottom',
    y: 0,
    padding: 0
  },
  credits: {
    enabled: false
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    innerSize: '35%',
    size: '150%',
    data: [
      ['Firefox', 10.38],
      ['IE', 56.33]
    ]
  }]
});