JSFiddle - React, Tailwind, and code Playground

by valinton

HTML

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

<div id="container" style="min-width: 200px; max-width: 300px; height: 300px; margin: 0 auto"></div>

JavaScript

var data = [
    {
        name:'Среднее время исполнения валютных платежей',
        step:[60,75,90],
        val:54
    },
    {
        name:'Среднее время проведения внешних исходящих платежей',
        step:[60,90,120],
        val:58
    },
    {
        name:'Среднее время проведения исходящих платежей на банки-партнеры,минуты',
        step:[30,45,60],
        val:28
    },
    {
        name:'Доля платежей корпоративных клиентов,зачисленных в автоматическом режиме',
        step:[50,80,100],
        val:59
    },
    {
        name:'Доля платежей, обработанных в ГО',
        step:[60,80,100],
        val:61
    },
    {
        name:'Среднее время зачисления входящих платежей',
        step:[20,40,60],
        val:8.2
    }
];

function clr( wer ){
    var clrs = [ '#DF5353', '#DDDF0D', '#55BF3B' ];
    var ret = [];
    var con = 0;
    $.each( wer.step, function( idx, val ){
        ret.push( { from:con, to:val, color:clrs[idx] } )
        con = val;
    });
    return( ret );
};

$(function () {
    $.each( data , function(index, value) {
        $("<div id=\"mtv"+index+"\" class=\"wrapper\"></div>").appendTo("#container")
        $('#mtv'+index).highcharts({
				chart: {
				    type: 'gauge',
				    plotBackgroundColor: null,
				    plotBackgroundImage: null,
				    plotBorderWidth: 0,
				    plotShadow: false
				},
				title: { text: value.name },
				pane: {
                    size: 180,
				    startAngle: -130,
				    endAngle: 130,
				    background: [{
							backgroundColor: {
							    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
							    stops: [
								[0, '#FFF'],
								[1, '#333']
							    ]
							},
							borderWidth: 0,
							outerRadius: '109%'
						}, 
						{
						    backgroundColor: {
							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
							stops: [
							    [0, '#333'],
							    [1, '#FFF']
							]
						    },
						    borderWidth: 1,
						    outerRadius: '107%'
						}, 
						{ // default...