JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; width: 400px"></div>

JavaScript

window.chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    legend: {
        labelFormat: '{name} ({percentage:.1f}%)',
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Firefox', 45.0],
            ['IE', 26.8],
            ['Chrome', 12.8],
            ['Safari', 8.5],
            ['Opera', 6.2],
            ['Others', 0.7]
        ]
    }]
});