JSFiddle - React, Tailwind, and code Playground

author(s):

by core972

HTML

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

CSS

#container {
	max-width: 660px;
	margin: auto;
	height: 400px;
	margin: 0 auto;
}

JavaScript

var colors = Highcharts.getOptions().colors,
    categories = ['All Vehicles'],
    data = [{
        y: 56.33,
        color: colors[0],
        drilldown: {
            name: 'All Vehicles types',
            categories: ['Successful', 'Failed', 'Not Attempted'],
            data: [16, 5, 8],
            color: colors[0]
        }
    }],
   level1_Data = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

    // add browser data
    level1_Data.push({
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
Highcharts.chart('container', {
    chart: {
      backgroundColor: '#F9F9F9',
      borderColor: '#eee',
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false,
      height: 440,
      type:'pie'
    },
    title: {
      text: 'Installation Results',
      align: 'center',
      verticalAlign: 'top'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
        legend: {
          align: 'left',
          verticalAlign: 'middle',
          layout: 'vertical',
          x: -8,
          y: 30,
          labelFormatter: function () {
            if(this.name === 'All Vehicles') {
              this.percentage = 100;
            }
            return '<span>' + this.name + '</span><br />' +
            '<span>' + this.dataLabels.count + '</span><br />' +
            '<span>' + $filter('number')(this.percentage) + '%</span>';
          },
    ...