Column chart left right padding

[JamesW]

I have a column chart and I don't want the data to be displayed right at the edges of the chart so want about 20px padding at the left and right of the x-axis.

I want the grid lines to go to the edge as well though.

I was easily able to do this on a line chart using minPadding/maxPadding but this doesn't seem to do anything on a column chart.

I am setting the x-axis categories once data has been loaded and categories worked out using: chart.update(), so not sure if would cause an issue or is there something I'm missing?

My initial x-axis options are (I then add the categories to these options using chart.update()):

Code: Select all

{
   id: 'x-axis',
   title: { text: '' },
   gridLineColor: '#EBEBEB',
   lineColor: '#EBEBEB',
   labels: {
      align: 'center',
      useHTML: true,
      style: { color: '#A3A3A3', fontSize: '12px' },
      y: 30,
   },
}

Thanks.

[jakub.s]

Hi,

Thanks for the question!

You can achieve this by adjusting xAxis.width and xAxis.left.

Take a look at this demo: https://jsfiddle.net/BlackLabel/21san5tp/

API:
- https://api.highcharts.com/highcharts/xAxis.width
- https://api.highcharts.com/highcharts/xAxis.left

Let me know if that helps.

Best regards,
Jakub

[JamesW]

Thats done the trick thank you...not sure how I missed it!

[jakub.s]

I'm glad it helped!

Do not hesitate to let me know if you have any more questions.

Regards,
Jakub