Bar width changes unexpectedly

[Daniel]

Hi,

I am experiencing a strange behaviour which I have re-created on stackblitz:

https://stackblitz.com/edit/js-mcjpbe?file=index.js 

If you de-select the red / critical bars, it works as expected (only the blue bars are shown).

But if you de-select the blue / low bars, the remaining red bars are suddenly shown very wide.

Is this a bug or am I doing something wrong?

Regards,

Daniel

[Swetha Babu]

Hi Daniel,

Greetings from Syncfusion.

We have considered the reported scenario as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on 14^th March 2023. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/41789/bar-chart-width-changes-when-clicking-on-the-legend

If you have any more specifications/precise replication procedure to be followed, please add it as a comment in the portal.

Regards,

Swetha

[Daniel]

Thank you Swetha,

nothing to add from my side at this point. 

Cheers,

Daniel

[Swetha Babu]

Daniel,

Most Welcome! Please get back to us if you have any concerns.

[Durga Gopalakrishnan]

Hi Daniel,

  By default, based on series available in the chart, the data points shares the space. So once the low bars legend clicked one series in the chart got hidden and the critical series data space increases this is the default behavior. We suggested to remove the min and max in the axis to ensure this behavior for the both series. We have changed the sample once any legend got clicked, the data space calculated based on the series available in the chart.

https://stackblitz.com/edit/js-ds17ua?file=index.js

Please let me know, if you have any concern.

Regards,

Gowri

[Daniel]

Hi Gowri,

thank you for your response.

This solution does not work for us as I have to show the last 5, 10, 15, etc minutes in the chart, not only parts of it. It is important to see that there are no other bars than e.g. the 2 blue ones. This is exactly the behaviour we need:

Above you can see when the events occurred and you can see until when (10:02:09) there were no others.

When switching on the critical ones and removing the low ones, it would be expected that the exact same behaviour would happen again. But it doesn't. Your mentioned default behaviour makes it impossible to see when the events occurred, rendering this chart unusable:

I understood this was an acknowledged bug, is this no longer the case?

How can we get the 'blue behaviour' also for the red (and additional ones we have) ?

 Thank you,

Daniel

[Swetha Babu]

Hi Daniel,

We are validating the reported scenario and update you with further details within two business days

Regards,

Swetha

[Daniel]

Hi Swetha,

thank you, much appreciated.

Regards,

Daniel

[Swetha Babu]

Daniel,

Thank you for your patience.

As we mentioned earlier, the column gets rendered based on the series and the width of the chart and this is the behavior of the chart. However, we can fix the reported scenario by changing the columnWidth and columnSpacing in the legendClick event of the chart. We have created a javascript application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/js-javzhp?file=index.js

Code Snippet:

legendClick: function(args) {

              if (args.legendText === "Low" && args.chart.series[1].visible ) {

                args.chart.series[0].columnWidth = 0.2;

                args.chart.series[0].columnSpacing = 0.7;

              } else {

                args.chart.series[0].columnWidth = 0.8;

                args.chart.series[0].columnSpacing = 0;

              }             

        },

Screenshot:

Kindly, revert us if you have any concerns.

[Daniel]

Hi Swetha,

thank you for your input and I see that you got this working for exactly the provided example chart.

But my provided chart was just a simple example and those above provided columnWidth and columnSpacing only work for exactly those 2 red and 2 blue bars for the 8 and a bit minutes timeframe. If you change the number of bars, the number of categories or the timeframe, those columnWidth / columnSpacing don't work anymore.

Or when you simply change one low bar to now be a critical one you even get 3 different barwidts:

 

   

Or when you add one more red bar:

Of course, you can manually try to figure out what columWidth, etc. works for this example with 5 bars in total, but that will change again when there are 6,7 or 200 bars or a 'medium' category is added. So I don't think this is a working solution - unless those columnWidth / columnSpacing can be calculated automatically. Which I've tried for hours before raising this ticket and I was unable to figure it out, as it is unclear to me when / why the chart changes the columnWidth.

Do you have a formula for calculating those columnWidth / columnSpacing depending on the number of categories, bars and shown timeframe?

I know you mentioned that this is 'expected behaviour'. Would you mind explaining to me why when a series of 2 low and a series of 2 critical points are presented, the columnwidth changes depending on which one of the 2 series is displayed?

Thank you. I am looking forward to your help,

Daniel

p.s.I really like this chart, but if the display changes depending on how many bars or categories or which timeframe is displayed, this makes it unusable unfortunately. E.g. this doesn't provide much value:

[Swetha Babu]

Daniel,

We can change the column width and column spacing based on the data count in the series of the chart. We have created a Javascript application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/js-pslbhf?file=index.js

Code Snippet:

legendClick: function(args) {

            if (args.chart.series[0].dataSource.length > 2) {

                if (args.legendText === "Low" && args.chart.series[1].visible ) {

                    args.chart.series[0].columnWidth = 1;     

                    args.chart.series[0].columnSpacing = 0.4;     

                  } else {     

                    args.chart.series[0].columnWidth = 1;     

                    args.chart.series[0].columnSpacing = 0.2;     

                  }     

            } else {

                if (args.legendText === "Low" && args.chart.series[1].visible ) {

                    args.chart.series[0].columnWidth = 0.2;   

                    args.chart.series[0].columnSpacing = 0.7;   

                  } else {   

                    args.chart.series[0].columnWidth = 0.8;   

                    args.chart.series[0].columnSpacing = 0;   

                  }            

            }

      },   

Screenshot:

In the above sample, we have rendered the chart series with 4 data points. So based on your data count, you can limit the columnWidth and columnSpacing in the series of the chart. Let me know if you can change the column width size based on the data count, else we have to consider this as improvement.

Kindly, revert us if you have any concerns.

[Daniel]

Hi Swetha,

Thank you for your option - very much appreciated.

I've tested it and unfortunately I cannot get it to work as there are too many variables that play into this (from what I can tell).

I've taken your example and added more categories (the ones we have) and some more bars (we may have hundreds depending on the time frame the user selects, but the ones I've added should make it a more realistic example):

https://stackblitz.com/edit/js-bevnjz?file=index.js

As you can see there are still a lot of different bar sizes - even with the suggested changes to set the width & spacing:

I am unable to figure out under which circumstances the width and spacing has to be changed, for which series, and what the values need to be.

Interestingly, I've printed out the columnWidth and the columnSpacing of the 'low' category (as you can see in stackblitz) and the settings stay the same (low columnWidth: 1, low columnSpacing: 0.1) during all the above examples. Though the low / blue bars are definitely wider in the 2nd screenshot than in the first. So a columnWidth of 1 with columnSpacing of 0.1 results in (the example) 2 different sizes of the bars:

 

Would you be able to suggest a way forward how to find out when / what series / what values to use?

(or to log this as bug / improvement ?)

Regards,

Daniel 

[Swetha Babu]

Daniel,

We have considered the reported scenario as an improvement and created a feature request for the same. This improvement will be included in any of our upcoming releases. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/42635/improve-the-column-chart-width-when-removing-the-series-using-the-legend

Please get back to us if you need any further assistance.

[Daniel]

Thank you Swetha.

- Daniel

[Swetha Babu]

Daniel,

Most Welcome! Please get back to us if you need any further assistance.