JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

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

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'pie',
  },

  series: [{
    dataLabels: {
      enabled: true,
      distance: 100,
      connectorShape: 'straight',
      connectorPadding: 0,
      padding: 0,
      y: -10
    },
    name: 'Percentage',
    size: '40%',
    data: [{
      name: 'Chrome',
      y: 70.67,
      sliced: true,
      selected: true
    }, {
      name: 'Edge',
      y: 14.77
    }]
  }, {
    dataLabels: {
      enabled: true,
      distance: 10,
      connectorPadding: 0,
    },
    name: 'OrderType',
    size: '50%',
    innerSize: '80%',
    data: [{
      name: 'Chrome',
      y: 70.67,
      sliced: true,
      selected: true
    }, {
      name: 'Edge',
      y: 14.77
    }, ]
  }],
});