<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
#container {
min-width: 300px;
max-width: 800px;
margin: 0 auto;
}
?>
var names = ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'];
function getRandomData() {
var data = [];
for (var i = 0; i < 10; i++) {
data.push([names[i], Math.random() * 10]);
}
return data;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 100
},
title: {
text: 'Bar series - data sorting'
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
type: 'category',
min: 0,
labels: {
animate: true
}
},
legend: {
enabled: false
},
series: [{
zoneAxis: 'x',
zones: [{
value: 1,
color: '#ff4d40'
}],
dataLabels: {
enabled: true,
format: '{y:,.2f}'
},
dataSorting: {
enabled: true,
sortKey: 'y'
},
data: getRandomData()
}]
});
setInterval(function () {
chart.series[0].setData(
getRandomData(),
true,
{ duration: 2000 }
);
}, 3000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.