I am setting up a simple column chart using Highcharts. After applying categories to my Y-Axis it causes my columns to raise off the x-axis.
I initially was using a chart someone else started with, however couldn't fix it and even after altering a few different fields on my chart. Notably, min and max, however I also tried a few others I found in the docs regarding spacing etc.
So I took a chart from the Highcharts documentation and explictly edited it to my needs. Here is the starting chart I began with. I edited each field to slowly turn it into the graph I need.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Bar Title'
},
xAxis: {
categories: [
'Category 1',
'Category 2',
'Category 3',
'Category 4',
]
},
yAxis: {
title: '',
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
min: 0,
max: 5,
tickmarkPlacement: 'on'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Score',
data: [1, 2, 3, 4]
}, {
name: 'Average Score',
data: [5, 4, 4, 4]
}]
});
This is as close as I can get. However, as noted by this image, there is a gap between my column and my x-axis.

If I remove the below line:
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
It gets a lot closer!

I'm just looking for a way to keep my Y-axis labels and have no gap. Any insight is appreciated.
Aucun commentaire:
Enregistrer un commentaire