Column chart with no padding on xAxis

[diego711]

Hello!

I'm creating a column/spline combined chart as seen on the image

column-spline-chart.png (13.99 KiB) Viewed 718 times

There are some things I'm having trouble to tackle to get the result I want.

I'm not being able to get rid of the xAxis padding at left and right.

And I would also want the spline line to get to the edges of the chart, or at least the full width of the columns. I understand the column point is in the middle of each one of them so that's what happenning, but tried the placement option to "on" and the first and last column gets cut in half and I don't want that neither.

This is what I'm trying to accomplish

column-spline-chart-goal.png (38.08 KiB) Viewed 718 times

And other problem I'm having is that when I have the spline line with the same y value in all the line, it doesn't get shown, but the values are there and the tooltip appears on hover.

I'd appreciate any insights on these!

[jakub.s]

Hi,

Thanks for the question!

Could you please provide me with a demo of this in jsfiddle?

Then it would be much easier for me to help you.

Thanks!
Jakub

[diego711]

Here it is!

Demo: https://jsfiddle.net/diego711/dx4sm8tw/68/

The main thing is to avoid the left and right paddings in the xAxis, so the columns are on the edge of the axis.
Sorry for the messy .scss file, was a little complicated to move everything I needed into jsfiddle.

Thanks!

[jakub.s]

Thanks!

You can set the series.column.groupPadding and then the xAxis.min and xAxis.max so that the extremes fit the series as you want.

Here's the demo: https://jsfiddle.net/BlackLabel/6boaetd9/

API:
- https://api.highcharts.com/highcharts/s ... oupPadding
- https://api.highcharts.com/highcharts/s ... intPadding
- https://api.highcharts.com/highcharts/xAxis.min
- https://api.highcharts.com/highcharts/xAxis.max

Let me know if you have any more questions.

Best regards,
Jakub

[diego711]

Fantastic! Thank you!

[jakub.s]

I'm glad it helped:)

Regards,
Jakub