JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

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

<div id="CC1-graph" style="width: 300px; height: 200px; margin: 0 auto"></div>
<!-- <div id="CC1-graph"  style="height: 400px"></div>-->

JavaScript

$(function () {
    $('#CC1-graph').highcharts({
        plotOptions: {
            pie: {
                center: ['50%', '50%'],
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            symbolWidth: 12,
            symbolRadius: 6
        },
        series: [{
            type: 'pie',
            name: 'TITLE',
            innerSize: '70%',
            data: [
                { name: 'Apples', y: 68.0},
                { name: 'Watermelons', y: 32.0}
            ]
        }]
    });
});