Reactive Pie Chart formatting
Application Type
Reactive
Service Studio Version
11.10.22 (Build 42083)

I am having some issued formatting a pie / donut chart In Reactive Web applications.


Ive noticed that formatting placed in the

"plotOptions: {
        pie: {

bracket doesnt render on screen. 


For instance I have a pie chart in Traditional that I added the borderwidth formatting to, to create some space between the sections of the pie, as well as making it look like a donut chart.

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"plotOptions: {
        pie: {
            borderWidth: 3,                
        }
    },
    
    series: [{
        
        innerSize: '60%',
    }], 
")

This works fine in Traditional, but when using the same advanced format for a Pie or donut chart in Reactive, the series formatting works but the borderWidth is not. 

Do you have any ideas on a workaround for this?

Chris


mvp_badge
MVP

Hi Chris,

That's odd indeed. Did you check the page's source (in the browser) to see whether the JSON is there? 

I have viewed the page's Source (Right click > View Page Source Ctrl + U) but I do not see much describing the page. 


Apologies for my ignorance, is there somewhere else I should check?


Ive replicated the issue on a very basic app which ive attached.

TestJob.oml

mvp_badge
MVP

Mmm, you're right, with Reactive it's not as straightforward, not entirely sure where you need to look. Anyway, I've asked OutSystems whether this is something known. Be sure to also report it as a Support Case, as the Chart Module is officially supported.

Thank you Kilian,

I have raised a support case and will update this on any findings.

I got a reply from OutSystems Support:


We were able to find a workaround to mitigate this issue, while it is still not permanently fixed.

Please allow me to share it with you:

  • We found that the CSS was not being properly generated and applied to the page.
  • Therefore, the workaround consists of applying the CSS code directly to the page:
    • .highcharts-series-group{ stroke-width:3px; stroke:white; }

Additionally, we have created the problem record RPM-1124 so that our R&D team fixes this defect in a future version of the OutSystems Charts. Since we still do not have an exact date for the fix, we kindly ask you to follow up on its status in the Support Portal, or on the Release Notes

mvp_badge
MVP

Thanks for the update! I'm glad there's at least a workaround.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.