hi everyone, how can i set per each column a width base on data plzz
this is my chart:
Highcharts.chart('graphOnDemand', {
chart: {
type: 'column',
zoomType: 'x',
backgroundColor: {
linearGradient: [0, 400, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(114, 174, 73)']
]
},
margin: [0, 10, 80, 10],
resetZoomButton: {
theme: {
fill: '#ED7D31',
stroke: 'silver',
style: {
color: 'white'
},
r: 0,
states: {
hover: {
fill: 'white',
style: {
color: '#ED7D31'
}
}
}
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b %H:%M',
},
min: Date.UTC(year, month - 2, day, 0, 0),
max: Date.UTC(year, month, day, 0, 0),
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: {
visible: false,
title: {
text: 'DownTime (H)'
},
gridLineWidth: 0,
minorGridLineWidth: 0,
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false
},
colors: [
"#BFBFBF",
"#2E75B6",
"#FFC000",
"#ED7D31",
"#C00000"
],
series: [{
name: 'during service external',
data: dsx,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#2E75B6'],
[1, '#B5CEE5']
]
}
},
{
name: 'during service internal',
data: dsi,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#BFBFBF'],
[1, '#E5E5E5']
]
}
}, {
name: 'out of service internal or external',
data: osix,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#FFC000'],
[1, '#FFE8A2']
]
}
}, {
name: 'during service',
data: ds,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#ED7D31'],
[1, '#F9D0B4']
]
}
}, {
name: 'out of service',
data: os,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#C00000'],
[1, '#E49595']
]
}
}]
});