Hi everyone,
I'm currently building a stacked bar chart for a Mobile app in OutSystems, and I’ve encountered a visual rendering issue when trying to apply border radius to each segment in a column. This is UI in Figma
After researching libraries like Chart.js, Highcharts, and ApexCharts, it appears that only Chart.js supports the level of customization I need for rounded corners on individual segments in a stacked bar chart. However, I'm not sure how to properly import and use Chart.js inside OutSystems Mobile.
In Highchart or ApexCharts this causes a visual overlap where the rounded corners from both segments meet. The result is a strange visual bump or double rounding effect in the middle of the column, which makes the chart look inconsistent.
I’d really appreciate guidance on:
How to import Chart.js into an OutSystems Mobile app
Or any alternative techniques to achieve smooth stacking with border radius
Thanks a lot in advance! 🙏
Do someone can help me solve the problem?
This may not be an exact solution for your use case but a possible workaround for what you want
Highcharts Sample
I just changed these values to get the result
Hello @Tuan Duong
To make this more collaborative and to make sure the community is looking into the same use case that you're reporting, please share a sample oml where that can be reproduced and please indicate the steps to reproduce the scenario you mentioned (include a GIF/video if it's easier).
Cheers,GM
Any update about this reported issue?