Log in to post a reply

Column chart rendering incorrectly

Posted by: amy.pryor on 3 December 2020, 9:54 pm EST

  • amy.pryor

    Posted 3 December 2020, 9:54 pm EST

    Hi!

    I have a column chart with two series that share the same x values, and different y values. On the initial page render, the columns render overlapped, but once I interact with the chart in any way (zoom, click), the columns appear side by side as expected. It seems that the initial width on the <rect> element in svg does not get calculated correctly. Is this a bug, and could you suggest any workarounds?

    Thank you

  • amy.pryor

    Replied 3 December 2020, 9:57 pm EST

    ^ I am using the wj-flex-chart component on version 5.20202.699

  • ashwin.saxena

    Replied 6 December 2020, 7:09 pm EST

    Hello Amy,

    We are sorry but we were unable to replicate this issue. Please refer to the sample link below that we used to replicate the issue:

    https://stackblitz.com/edit/angular-fu44cc

    Can you let us know whether we are missing something in order to replicate the issue?

    Regards,
    Ashwin

  • amy.pryor

    Replied 7 December 2020, 1:22 am EST

    Thank you for providing this! I found that the bug occurs when I try to set the chartType explicitly to column on both the series and chart level, but this didn't happen on the example link.

    I am now trying to allow stacking of series, and have found that when I explicitly specify the type as 'column' on each series, the stacking doesn't work. This is reproducible on the example link. In my system I need to specify the series type, but also need stacking to be applied. Are there any workarounds for this?

  • ashwin.saxena

    Replied 7 December 2020, 4:33 pm EST

    Hello Amy,

    It seems that stacking is only performed if the Series.chartType is set to null. This may be a design behavior but I have asked the developers for confirmation. The internal tracking id of the case is 469709. I will update you once I will hear from them.

    In the meantime, can you let me know whether there are specific reasons to specify the series.chartType explicitly? If chart.ChartType and series.chartType are different, then the stacking will not be performed because different chart types cannot be displayed as stacked. Due to this, explicitly setting the series.chartType to the same value as chart.chartType does not make sense.

    ~regards

  • amy.pryor

    Replied 7 December 2020, 8:41 pm EST

    Hello,

    Thank you for your help!

    I have now removed the chart.chartType, so am only specifying series.chartType. I'd like to allow for different types of series to be shown on the same chart, so I believe I only need to specify series.chartType to do this?

    The use case I am trying to achieve is:
    - A chart with 3 series, 2 of which are columns, 1 of which is a line.
    - The 2 column series are stacked, and the line is normal.

    If this can't be achieved, I would at least like to be able to stack a chart with 2 column series/a chart where all series are the same type. I could add some logic to my application to set the chart.chartType to a value only when all series are the same type, and the stacking could then be applied?

  • Marked as Answer

    ashwin.saxena

    Replied 8 December 2020, 6:48 pm EST

    Please refer to the sample link below:

    https://stackblitz.com/edit/angular-a8nvdy

    In this sample, I have set the chartType of the chart to Column (default) and the chartType of 1st two series is null (which defaults to the chartType of the chart) and the chartType of 3rd series is set to Line. The first two series are stacked over each other. The line series will not be stacked because it is different from the chart.chartType.

    Let me know if this fulfills your requirements.

    ~regards

  • amy.pryor

    Replied 10 December 2020, 2:55 am EST

    That's great, thank you for your help!

  • amy.pryor

    Replied 21 December 2020, 1:10 am EST

    Hi,

    Apologies for the delay, I have one more comment about the stacking functionality: I've found that the stacking also only works if [axisY] is null for the series I wish to stack. I.e. this works:

    But this does not:


    I've implemented a workaround for now, but it means that I can only offer stacking for series that use the left axis, whereas it would be better if any series that use the same y axis are stacked.

    I have a suitable workaround, but just wanted to make you guys aware of this behavior if you weren't already :)

  • sharad.tomer

    Replied 23 December 2020, 8:19 am EST

    Hi,

    Your observation is correct. Currently, stacking is offered only for the left yAxis. Please let us know if you would like us to create an enhancement request on your behalf to support stacking for the right yAxis too.

    Regards

  • amy.pryor

    Replied 5 January 2021, 2:54 am EST

    Hi,

    Thank you, stacking for the right yAxis would be really good to see in the future! Another great enhancement would be to support range area charts for SplineArea.

    Thanks

  • ashwin.saxena

    Replied 6 January 2021, 2:20 am EST

    Hi Amy,

    I have asked the developers whether stacking can be implemented for the secondary y-axis in FlexChart. The internal tracking id of the case is 470363. I will inform you if any updates will be provided by the developers.

    Regarding SplineArea and Range area charts, please refer to the sample below which demonstrates how you can display ranges using SplineArea charts:

    https://stackblitz.com/edit/js-h4r1mr

    Regards,
    Ashwin
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © GrapeCity, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.