how to maintain constant pixel distance between the columns of two different series at a tick position.

[praveenteaz]

Hi,

As in the fiddle linked below, is it possible to maintain a constant distance between the columns of "series 1" and "series 2" ?

https://jsfiddle.net/praveenx9/3quzm89t/2/

In the chart I'm using pointPlacement to maintain some distance between the two columns at the tick (ex Jan), but the pointPlacement value is axis value, that means it varies with the chart size, if chart is resized to a bigger window the axis length increases and distance between the columns increases, but i want to position the columns with a constant pixel distance. please provide if there is a way to do it through options.

Thanks,
Praveen

[dominik.c]

Hello praveenteaz!

We appreciate you reaching out to us!

I'm not sure if I understand you correctly. Even when the chart gets resized you want to keep the same pixel difference between the set of columns (e.g same distance between Jan and Feb categories)? These distances have to be changed when the chart gets resized. Could you explain the issue?

Best regards!

[praveenteaz]

hi,

not between Jan and Feb categories, but between the columns from "series 1" and "series 2" at Jan.

if u resize the chart in the fiddle u can observe the columns at Jan render with varying distance between them but i want to keep it a constant pixel distance.

I understand that between Jan and Feb the distance will vary as the axis length increases.

Thanks,
Praveen

[dominik.c]

Hi again!

Thanks for your explanation!

If you want to keep the distance the same you need to resign from using pointWidth property. When you use it the width of the column will be always the same no matter the size of the chart, so the space between columns will be changed. I suggest using such properties as pointPadding, groupPadding, or borderWidth.

API references:
https://api.highcharts.com/highcharts/s ... intPadding
https://api.highcharts.com/highcharts/s ... oupPadding
https://api.highcharts.com/highcharts/s ... orderWidth

Best regards!

[praveenteaz]

Hi, I have taken a screen shot from the example provided and marked two variables in the image G (Gap) and W (Width).

https://imgur.com/a/RqsUvcF

I have a requirement to maintain a constant Gap between the bars from two series objects even if the chart resized.

similarly i want the width of the bar to be fixed irrespective of chart width.

i have looked at the api and it seems its not possible to do it with the current version, could you specify any alternative approach to achieve the same.

Thanks,
Praveen

[dominik.c]

Hi again!

In your screenshot, the points overlap themselves, so the "Gap" is not anymore a gap between these two points. Do you know what is the length of this "variable" and how would you like to measure it?

Do you also need to use pointWidth property? As I've mentioned in the post above, when you use this property, the width of the column will be always the same, so the space between columns will be changed (you don't want it, right?).

Best regards!

[praveenteaz]

Hi,

yes the points are overlapped and the "Gap" is between the left edge of a point in "series 1" to left edge of a point in "series 2".
the Gap is measured in pixels, for example i want to maintain that Gap at 5px all the time even the width of the chart container is increased.

and yes i also need the pointWidth to be constant, for example 50px all the time even the width of the chart container is increased.

Thanks,
Praveen

[dominik.c]

Hi again!

I'm afraid that there's no easy solution for you. The gap distance can be controlled by using such properties as pointPadding, groupPadding, or borderWidth. But when you use them you can't specify pointWidth property. I suggest resigning from using pointWidth property and control the Gap length by correctly setting pointPadding and groupPadding properties.

Best regards!

[KacperMadej]

Hi,

Some options are working only with axis units (pointPadding, groupPadding, pointPlacement), so without having a fixed category width those options won't work in pixel values. If you will have a fixed gap and point width then each category will also have a fixed width, but chart width won't be responsive, so you could use scrollablePlotArea - demo: https://jsfiddle.net/BlackLabel/0tfjkm94/

It would be possible to use groupPading and chart updates after resize to have the points in a category with fixed gap and fixed width for the points. Here is a PoC demo: https://jsfiddle.net/BlackLabel/0tfjkm94/1/