JSFiddle - React, Tailwind, and code Playground

by Anil Vangari

HTML

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

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

JavaScript

Highcharts.chart('container', {
  "title": {
    "floating": false,
    "text": ""
  },
  "series": [{
    "dataLabels": {
      "color": "#000000",
      "borderWidth": 1,
      "padding": 5,
      "borderColor": "#000000",
      "distance": 100,
      "style": {
        "width": "140px"
      },
      "format": "{point.name}, {percentage:.0f}%"
    },
    "size": "60%",
    "data": [{
      "sliced": false,
      "color": "#FF0000",
      "name": "Credit",
      "y": 41260662.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#006FC0",
      "name": "Macro",
      "y": 41487502.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#385622",
      "name": "Diversified",
      "y": 33527400.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#00AF50",
      "name": "Relative Value",
      "y": 18183492.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#6F2F9F",
      "name": "Equity",
      "y": 41379038.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#843B0C",
      "name": "Multi-Strategy",
      "y": 0.0,
      "selected": false
    }],
    "showInLegend": false
  }, {
    "dataLabels": {
      "borderWidth": 0,
      "padding": 5,
      "distance": 10,
      "style": {
        "width": "100px"
      }
    },
    "size": "60%",
    "innerSize": "1%",
    "data": [{
      "sliced": false,
      "color": "#FF0000",
      "name": "Fir Tree",
      "y": 19910992.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#FF0000",
      "name": "Centerbridge",
      "y": 12264752.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#FF0000",
      "name": "Canyon Value Realization",
      "y": 9084918.0,
      "selected": false
    }, {
      "sliced": false,
      "color": "#006FC0",
      "name": "Bridgewater Pure Alpha",
      "y": 17738849.0,
      "selected": false
    }, {
      "sliced": false,
     ...