abdelhafid
Posts: 3
Joined: Wed Jul 28, 2021 9:51 am

set width for each column chart with data

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']
]
}
}]
});
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: set width for each column chart with data

Hello abdelhafid!

Welcome to our forum and thanks for contacting us with your question!

You can use pointWidth property on a series or directly on a point.

API references:
https://api.highcharts.com/highcharts/s ... pointWidth
https://api.highcharts.com/highcharts/s ... pointWidth

Demo:
https://jsfiddle.net/BlackLabel/janq5mc2/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”