JSFiddle - React, Tailwind, and code Playground

by dude_jsfiddle

HTML

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

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

CSS

div#container {
    margin: 10px;
    width: 198px;
    height: 152px;
    border: 4px solid black;
}

JavaScript

$(function () {
    $('#container').highcharts({
        credits: {
          enabled: false
      },
        exporting: {
         enabled: false
},
        chart: {
            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: null
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            size:'100%',
            dataLabels: {
                enabled: false
            },
            borderWidth: 5
           }
        },
        series: [{
            type: 'pie',
            name: 'Answered/Unanswered questions',
            data: [
                        {
                            name: "AnsweredQuestions",
                            color: '#B3DDB3',
                            y: 5
                        },
                        {
                            name: "UnAnsweredQuestions",
                            color: '#ED7D77',
                            y: 10
                        }
                    ]
        }]
    });
});