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 data1 = [{
        name: 'CDU',
        y: 41.5,
        color:'#222222'
    }, {
        name: 'Grüne',
        y: 8.4,
        color:'#22ee22'
    }, {
        name: 'SPD',
        y: 25.7,
        color:'#ee2222'
    }, {
        name: 'Linke',
        y: 8.6,
        color:'#aa2222'
    }, {
        name: 'FDP',
        y: 4.8,
        color:'#ffee22'
    }, {
        name: 'AfD',
        y: 4.7,
        color:'#7777cc'
    }, {
        name: 'Sonstige',
        y: 6.3,
        color:'#aaaaaa'
    } ];
   var data2 = [{
        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'
            },
            //colors:['#000000','#00cc00','#cc0000','#880000','#ffcc00','#5555aa','#888888'],
            title: {
                text: 'Bundestagswahl 2013'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    borderWidth:0,
                    center: ['50%', '50%'],
                    dataLabels:{
                        enabled:false
                    },
                    shadow: false,
                    states:{
                        hover:{
                            brightness:0.2,
                            enabled:false,
                        }
                    }
                }
            },
            legend:{
       ...