JSFiddle - React, Tailwind, and code Playground

by gorillawit

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 () {

    ///////////////////////////////////////////////////////////////////////////////////////
    var totalProduced = 10;
    var energyUsage = 10;


    ///////////////////////////////////////////////////////////////////////////////////////
    var fromSolar = 0;
    var fromGrid = 0;
    var toGrid = 0;
    var remainingPortion = 0;
    var toGridPercentage = 0;
    //Calculate fromSolar
    if (totalProduced >= energyUsage) {
        fromSolar = energyUsage;
    } else {
        fromSolar = totalProduced;
    }

    //Calculate fromGrid || toGrid
    if (totalProduced >= energyUsage) {
        toGrid = totalProduced - energyUsage;
    } else {
        fromGrid = energyUsage - totalProduced;
    }

    //outer circle calculation
    if (toGrid != 0) {
        toGridPercentage = toGrid * 100 / fromSolar;
        remainingPortion = 100 - toGridPercentage;
    }

    SolarData = [{
        name: 'FROM SOLAR',
        y: fromSolar,
        color: '#7BB734'
    }, {
        name: 'FROM GRID',
        y: fromGrid,
        color: '#E68A00'
    }];

    GridData = [{
        name: 'TO GRID',
        y: toGridPercentage,
        color: '#719346'
    }, {
        name: '',
        y: remainingPortion,
        color: '#ffffff'
    }];



    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: '<label style="color:#999; ">TOTAL PRODUCED TODAY</label><br><label style="color:#7BB734; font-size:125%;">' + totalProduced + 'kwh</label>'
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            formatter: function () {
                var value = this.point.name == 'TO GRID' ? toGrid + 'kwh' : this.y + 'kwh';
                return '<b>' + this.point.name...