Column chart that have different width on

[pricopz89]

Hi,
My client have a Highcharts license and it is using this library in his application for different charts.
Now he wanted to display a column chart based on some data, and when it clicks on a checkbox wants that this column charts to be redraw and the width of each column to be different based on some specific values. In this moment I managed to change the column width but the problem is that the position of each column it will not change, and this means that some columns could overlap. Please check the attached images. Is there any way to achieve this ?
I also tried to change the x position of each column like this, but without effect.

Code: Select all

const selector = document.querySelector('.highcharts-series-0')
for (let i = 0; i < selector.children.length; i++) {
selector.children[i].setAttribute('x', '0')
}

hc_fix_width.JPG (50.67 KiB) Viewed 154 times

Thank you,
Cosmin

[dawid.d]

Hello,

Thanks for contacting us with your question!

Consider whether it would be better to just use a Varivide Series as the alternative.
See: https://www.highcharts.com/docs/chart-a ... wide-chart

JSFiddle Demo: https://jsfiddle.net/gh/get/library/pur ... o/variwide

If you need further help, let me know!
Best regards

[pricopz89]

Hi,

Wow, this is working as expected now. Thank you so much !

[pricopz89]

Hi again,

One question, is there any way to set a minimum width on a variwide chart, because it may become very crowded on the x axis ?
Thank you,

bla_hc_dynamic_width.JPG (41.24 KiB) Viewed 112 times

[dawid.d]

Hello,

Thanks for the question!

There doesn't seem to be an API option for this, but it can be implemented quite easily by wrapping the processData method, as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/rtmw735q/

Best regards!

[pricopz89]

Hi Dawid,

It looks what I need, but I have to figure it out how to implement it in angular. Do you have similar example with Angular ?

Thank you,
Cosmin

[dawid.d]

Hi, sure! I have attached a demo in Angular below.

Angular Demo: https://stackblitz.com/edit/highcharts- ... ePlugin.ts

Hope it helps.

[pricopz89]

Thank you so much, it seems that it is working as expected !