I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas?
Here is an example of what I'm hoping to achieve:
Here's what I have attempted so far:
$(function () {
$('#ao-mix-allocation').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
events: {
load: function () {
this.xAxis[0].setExtremes(0, 5);
}
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
min:0,
categories: [
'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9', 'S10', 'S11', 'S12'
],
crosshair: false,
gridLineWidth: 0,
tickWidth: 0
},
yAxis: {
min: 0,
max: 150,
title: { text: ''},
labels: { enabled: false },
gridLineWidth: 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} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
width: 11,
//stacking: 'normal',
//grouping: true
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [ [0, '#0058a5'], [1, '#3f85c8'] ]
}
}
},
series: AoMixAllocationData()
});
You can view the JSFIDDLE here: link
Thank you in advance!