Highchart bar chart is not taking its parent container full width when categories are added. If I comment the categories or remove them, the chart will take the full width.
Please use this link https://jsfiddle.net/nu8dyw13/2/ to check the problem.
Highcharts.chart('container', { legend: { enabled: false, }, boost: { useGPUTranslations: true, }, tooltip: { enabled: false, }, chart: { type: "bar", height: 50, marginTop: 5, animation: true, shadow: false, }, title: {}, credits: { enabled: false, }, xAxis: { categories: [""], title: {}, lineWidth: 0, top: 20, height: 10, }, yAxis: { offset: 0, labels: { y: 15, align: "center", }, gridLineWidth: 0.5, gridLineDashStyle: "Dash", gridZIndex: 10, top: 20, height: 10, categories: ["LOW", "MEDIUM", "HIGH", "GDM"], plotBands: [ { from: 0, to: 1, color: "#E3E3E3", borderColor: "#6B6B6B", borderWidth: 1, }, { from: 1, to: 2, color: "#F9FAFC", borderColor: "#6B6B6B", borderWidth: 1, }, { from: 2, to: 3, color: "#E3E3E3", borderColor: "#6B6B6B", borderWidth: 1, }, ], min: 0, max: 3, title: { text: null, }, }, series: [ { type: "bar", data: [ { y: 2, color: "#B3C618", }, ], }, ], });
I tried overriding CSS and adding width properties but it's not working. Can someone please help?
To solve this issue I suggest removing categories (they're causing the problem) and using labels.formatter function that will return the proper category per tick.
formatter: function() {
const categories = ["LOW", "MEDIUM", "HIGH", "GDM"];
return categories[this.pos]
}
API references: https://api.highcharts.com/highcharts/yAxis.labels.formatter