JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<div id="DonuTchartIBV-MMS-1" class="donut"></div>
<div id="DonuTchartIBV-MMS-2" class="donut"></div>
<div id="DonuTchartIBV-MMS-3" class="donut"></div>
<div id="DonuTchartIBV-MMS-4" class="donut"></div>

CSS

.TotalTotalsMMSIBV {
    display: block;
    margin-top: -20px;
    margin-left: -300%;
}

.LegendPieChart-MMS {
    font-family: Lato,sans-serif;
    font-size: 16px;
    font-weight: normal;
    width: 200px;


    .LastValuePieCategory-MMS {
        margin-bottom: 20px;
        margin-left: 20px;
    }
}

//LG
@media(min-width:1200px) {

.donut{
    width: 100%;
}
.TotalTotalsMMSIBV {
}

}

//MD
@media(min-width:992px) and (max-width:1200px) {
    .donut {
        max-width: 800px;
    }

     .TotalTotalsMMSIBV {
        margin-left: -300%;
    }
}

//SM
@media (min-width:768px) and (max-width:992px) {
.donut{
        max-width: 640px !important;
    }

    .TotalTotalsMMSIBV {
        margin-left: -230%;
        float: left;
}
        .TotalTotalsMMSIBV > span:nth-child(2) {
            font-size: 19px !important;
        }
    
}

//XS
@media (max-width: 767px) {
    .TotalTotalsMMSIBV {
        margin-left: -130px;
    }

    .donut {
        max-width: 400px;
        white-space: pre-line;
        height: 450px !important;
        float: left;
         
    }


}

JavaScript

$(document).ready(function(){

Highcharts.setOptions({
                color: ['#449ecf', '#1abc9c', '#27ae60', '#3498db', '#8e44ad', '#34495e', '#d35400', '#e74c3c']
            });            
               var colors = Highcharts.getOptions().color;

          
            var highChartsPie = {
                chart: {
                    type: 'pie',
                },
                title: {
                    useHTML: true,
                    text: "",
                    align: "center",
                    verticalAlign: 'middle',
                    layout: 'vertical',
                    style: {
                        display: 'block',
                    }
                },
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    align: 'right',
                    width: 400,
                    floating: false,
                    verticalAlign: 'middle',
                    useHTML: true,
                    symbolRadius: 0,
                    symbolHeight: 0,
                    symbolWidth: 0,
                    labelFormatter: function () {
                        if (this.name == 'Product') {
                            return '<div class="LegendPieChart-MMS"><span style="float:left;"><span style="color:' + this.color + ';" class="ListItem-MMS">\u25CF</span>' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div>';
                        } else if (this.name == 'Competition') {
                            return '<div class="LegendPieChart-MMS LegendPieChartCategory-MMS"><span style="float:left" class="LastValuePieCategory-MMS"><span style="color:' + this.color + ';">\u25CF</span>' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div><div class="vertical-divider"></div>';
                        }
                    }
                },
                tooltip: {
         ...