JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

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

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            "chart":{
                "renderTo":"chartContainer",
                "zoomType":"xy",
                "type":"pie",
                "polar":false
            },
            "credits":{"enabled":false},
            "title":{"text":null},
            "tooltip":{"valueDecimals":2},
            "xAxis":{"categories":[]},
            "plotOptions":{"pie":{"slicedOffset":0,"point":{"events":{}},"shadow":false}}, // disable shadow
            "series":[{
                //"type":"pie", // not need
                "name":"Store Sales",
                "data":[
                     ["Canada",98045.46000000069],
                     ["Mexico",430293.5899999943],
                     ["USA",550808.4199999964]
                ],
                "center":["50%","55.369928400954656%"], // positioning both of pies to center
                "size":"90%", // half of the whole pie
                "showInLegend":true, // all pies show in legend
                "dataLabels":{"enabled":false},
                "title":{"text":"Store Sales","verticalAlign":"top","y":-25}
            },{
                //"type":"pie", // not need
                "name":"Store Cost",
                "data":[
                    ["BC, Canada",98045.46000000069],
                    ["DF, Mexico",75130.99999999958],
                    ["Guerrero, Mexico",30838.580000000034],
                    ["Jalisco, Mexico",4328.870000000009],
                    ["Mexico, Mexico",20395.40000000004],
                    ["Sinaloa, Mexico",18251.44999999996],
                    ["Veracruz, Mexico",52142.070000000036],
                    ["Yucatan, Mexico",79063.13000000038],
                    ["Zacatecas, Mexico",150143.09000000078],
                    ["CA, USA",154513.48999999993],
                    ["OR, USA",128598.50000000102],
                    ["WA, USA",267696.43000000395]],
         
               ...