I am trying to re-create this chart using high charts api. Any ideas how to build this? Trying to group the year categories with both number and percent columns, see example pic attached. Thanks!
I have tried this thus far but cannot get both value and percent like the pic attached:
Highcharts.chart('ContainerMonthToDate', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [
'Jan 2017',
'Jan 2016'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '# Patients'
}
},
labels: {
formatter: function(){
return 100*this.value / $(this.axis.tickPositions).last()[0] + '%';
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
}
},
colors: [
'#ff0000',
'#ff0000',
'#ff0000',
'#ff0000'
],
series: [{
name: 'Cumulative',
data: [8657, 7824]
}, {
name: 'Admissions',
data: [2025, 1898]
}, {
name: 'Budgeted',
data: [8018, 7913]
}, {
showInLegend: false,
name: '',
data: [1956, 1889]
}]
});
To combine two types of data, use this definition of yAxis:
yAxis: [{
title: {
text: '# Pts'
}
}, {
opposite: true,
max: 100,
title: {
text: '% Pts'
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.