JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="actv"></div>
CSS
#mtv { text-align: center; }
.wrapper {
width: 480px;
height: 350px;
display: inline-block;
padding: 20px;
display: -moz-inline-stack;
}
* html .commodity { display:inline;zoom:1;}
JavaScript
var all_data = [
{
name:'ПриватБанк (Латвия)',
max:1510,
data:1118
},
{
name:'Кипрский ф-л',
max:1784,
data:396
},
];
$(function () {
$.each( all_data , function(index, value) {
//alert( value.data );
$("<div id=\"actv"+index+"\" class=\"wrapper\"></div>").appendTo("#actv")
$('#actv'+index).highcharts({
chart: {
type: 'gauge',
},
title: {
text: value.name,
useHTML: true,
style: {
fontWeight: 'bold',
fontSize: '22px',
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
pane: {
startAngle: -130,
endAngle: 130,
size: 220,
background: [
{
borderWidth: 0,
outerRadius: '100%'
},
]
},
// the value axis
yAxis: {
min: 0,
max: value.max,
minorTickWidth: 0,
offset: -10,
tickPixelInterval: 50,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
title: {
text: 'счт/шт'
},
labels: {
step: 2,
rotation: 'auto'
},
},
plotOptions: {
series: {
animation: {
...