0
268
VistasHow to set less xAxis data with more column chart data in highcharts
Here is my ts file code
xAxis:{
categories:['row-1','row-2','row-3','row-4'],
max:3
},
plotOptions:{
column:{
stacking:'normal'
}
}
series:[
{
type:'column',
data:[12,23,34,45,56,67,78,89,90]
},{
type:'column',
data:[12,32,43,54,65,76,87,98,91]
}
]
Below is my working code i want to the xAxis as it is and i need all the data entered in the series. I am new to highcharts so please
I used max so that my xAxis wont extend and i tried every way i can but i can't get the result
STACKBLITZ CODE
Below image is how i want my chart to be
2 Respuestas
Responde la pregunta0
The easiest way to achieve that is by adding empty strings to the categories.
xAxis: {
categories: ['', 'row-1', '', 'row-2', '', 'row-3', '', 'row-4', '']
},
Demo: https://jsfiddle.net/BlackLabel/8uy9vo0t/
You can also use labels.formatter to add categories directly to the relevant positions on the axis.
xAxis: {
tickLength: 0,
labels: {
formatter: function() {
let position = 1;
for (let i = 0; i < categories.length; i++) {
if (this.pos === position) {
return categories[i]
}
position = position + 2
}
}
},
},
Demo: https://jsfiddle.net/BlackLabel/a1jv9nqL/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Another approach would be using Grouped Categories module.
xAxis: {
tickWidth: 0,
labels: {
style: {
visibility: 'hidden',
fontSize: '0px',
},
groupedOptions: [{
style: {
visibility: 'visible',
fontSize: '12px',
},
}],
},
categories: [{
name: "row-1",
categories: ["0", "1"]
}, {
name: "row-2",
categories: ["0", "1"]
},
{
name: "row-3",
categories: ["0", "1"]
},
{
name: "row-4",
categories: ["0", "1", "2"]
}
]
},
Demo: https://jsfiddle.net/BlackLabel/3nkeswL5/
Documentation: https://blacklabel.github.io/grouped_categories/
You can also consider using Stacked and grouped columns if your data structure can be modified.
Official demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped
-1
Diabetes in Chilean men and women