JSFiddle - React, Tailwind, and code Playground

by Shang WenLong

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="display:inline-block;"></div>
		<div id="container2" style="display:inline-block;"></div>
		<div id="container3" style="display:inline-block;"></div>

JavaScript

var noBorder = { 
        states:{
            hover:{
                halo: {
                    size: 1
                }     
            }
        }
    };
	$(function() {
	    Highcharts.setOptions({
	        colors: ['#8edce7', '#e8ebeb']
	    });

        // Create the chart for completion
        var chart_completion = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                type: 'pie',
                margin: [0,0,0,0],
                height: 100,
                width: 100

            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                pie: {
	            	slicedOffset: 0,
                	size: '100%',
                	dataLabels: {
                    	enabled: false
                	}
	            },
                series: noBorder
	        }, 
            title: {
	            text: 'In Prog.',
	            align: 'center',
	            verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }
	            
        	},      
            credits: {
			   enabled: false
			},
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                },
                point : {
                    events: {
                        mouseOver: function(){
                           this.oldTitle = chart_completion.options.title.text;

                           chart_completion.setTitle({
                                text: 'New title '
                            });
                           
                        },
                        mouseOut: function(){
                        ...