syncfusion/ej2-angular-ui-components

Couldn't make rounded corner on stacking column chart when value is zero

hasan-enosis opened this issue · 4 comments

hasan-enosis commented

I am trying to make the last corner rounded in a stacking column chart. I am passing the corner radius configuration in the HTML template. The configuration is working fine but it couldn't round the last column when the value is zero as shown in the image. How do I fix the last column when the value is zero? I have added a demo link for your convenience. Actually, I need to make the previous column rounded when the last column value is zero.

Demo: : Stacking Column Chart

image

G-Durga commented

Hi Hasan,

Your requirement can be achieved using pointRender event. Please check with below snippet and sample.

  pointRender:(args: IPointRenderEventArgs)=>{
       if(args.series.index == 2 && args.point.index == 0)
            args.series.cornerRadius = {topLeft: 10, topRight:10};
       else if(args.series.index == 2)
           args.series.cornerRadius = {topLeft: 0, topRight:0};
    }

image

Sample : https://stackblitz.com/edit/fzvtyz-vcklnj?file=index.ts

Please let us know if you have any concerns.

Regards,
Durga Gopalakrishnan.

hasan-enosis commented

Hi Durga,

Thank you for your response. You have handled the problem statically. I need a dynamic solution where I can round the top series/column corner. Please click on a legend (France or France + Italy) and you will see the corner doesn't round as expected.
There are a lot of cases here. You can try some other combinations also.

Maybe we need a way where we can find the last/top series of a single vertical column (e.g 2014). If the last/top series value is zero we need to round the previous series.

image

G-Durga commented

Hi Hasan,

Currently, we don’t have support to apply corner radius for any particular point in a series. Corner radius will be applied for all the points in the series. You can apply corner radius for required point using pointRender event as mentioned earlier by checking the pointIndex and seriesIndex.

Then, while clicking the particular legend item, you can obtain the required series in legendClick event and change the condition based on that. Please check with below API reference links.

API :
https://ej2.syncfusion.com/documentation/api/chart/#legendclick
https://ej2.syncfusion.com/documentation/api/chart/#pointrender

Please revert us if you have any concerns.

Regards,
Durga Gopalakrishnan.

syncsiva commented

This issue has been resolved and has not had any activity for one week. Closing for housekeeping purposes. Please feel free to reopen if you have any further queries.