JSFiddle - React, Tailwind, and code Playground

by fiddlerintheoffice

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<h1>Highcharts: PieChart as two rings</h1>
<hr />
<div id="chart-main" style="height:300px"></div>
<hr />

CSS

h1 {
    font-size:16px
}

JavaScript

$(document).ready(function () {
    var data = [{
        name: 'CDU',
        y: 41.5,
        color:'#000000'
    }, {
        name: 'Grüne',
        y: 8.4,
        color:'#00cc00'
    }, {
        name: 'SPD',
        y: 25.7,
        color:'#cc0000'
    }, {
        name: 'Linke',
        y: 8.6,
        color:'#880000'
    }, {
        name: 'FDP',
        y: 4.8,
        color:'#ffcc00'
    }, {
        name: 'AfD',
        y: 4.7,
        color:'#5555aa'
    }, {
        name: 'Sonstige',
        y: 6.3,
        color:'#888888'
    } ];
        $('#chart-main').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Bundestagswahl 2013'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            legend:{
                enabled:false
            },
            tooltip: {
        	    valueSuffix: '%'
            },
            series: [{
                name: 'Browsers',
                data: data,
                innerSize: '21%',
                size: '54%',
                dataLabels: {
                    formatter: function() {
                        return this.y > 5 ? this.point.name : null;
                    },
                    color: 'white',
                    distance: -30
                }
            }, {
                name: 'Versions',
                data: data,
                size: '81%',
                innerSize: '54%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                    }
                }
            }]
       ...