JSFiddle - React, Tailwind, and code Playground
by Fusher
HTML
<script src="http://code.highcharts.com/master/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart,
data = [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
];
function seriesToPie(data){
return [{
type: 'pie',
data: data
}];
}
function seriesToColumn(data){
//split data into series
var series = [];
$(data).each(function(ind, ele){
if(ele.y){
series.push({
grouping: false,
type: 'column',
name: ele.name,
data: [[ind,ele.y]]
});
} else {
series.push({
grouping: false,
type: 'column',
name: ele[0],
data: [[ind,ele[1]]]
});
}
});
console.log(series);
return series;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: seriesToColumn(data)
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2'
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
...