[OutSystems Charts Web] How to change default colors of  Chart
charts-web
Web icon
Forge component by Platform Maintenace
Application Type
Traditional Web
Service Studio Version
11.13.0 (Build 53353)

Hi Team, 

I need to customize default Outsystems chart color palette with my set of colors. Kindly suggest me a solution for the same.


Regards,

Sowndarya

If you're referring to a single chart upon developing, in OutSystems 11 has its own COLOR properties once you click the specific chart. *Please refer to the image attached, there are three ways to call your color. (hard code naming, from given Static Entity, and through color code)

Hi @sowndarya baradhan,

If you want a specific color for each point you should customize the point color attribute as @Dianna Pingal wrote.

If you don't need to be that specific you customize the AdvancedFormat/HighchartsJSON input parameter like so: 

"plotOptions: {
    column: { colorByPoint:true, colors: ['red','green','yellow']}
}"

  Make sure to change the type of chart according to your needs (in this case I'm customizing a column chart), on colors array you can use your static entity or just strings like my example.

Let me know if this works for you,

Regards,
João Ferreira


Sample_Traditional_ColumnChart.oml

Hi João Ferreira ,

I tried the above code , my chart is a stacked column chart. When I tried this code the stacks are not working and the chart displays the color for entire column. Also the legends are not showing correct color codes. 

Kindly help me to resolve the same.


Regards,

Sowndarya

Hi @sowndarya baradhan,

Sorry for the delay answering you, I think I have a solution for you. What I understand is that you want to customize the series color, for that we can use the input parameter AdvancedFormat/DataSeriesFormats,  where we can add configs to the series by DataSeriesName (in your example Outsystems, Kony and Mendix).

I've prepared a simple sample where you can see this advanced format being build on the preparation of WebScreen screen, just make sure you match the DataSeriesName with the one you use in the chart.

Let me know if this answer your scenario,

Best regards,
João Ferreira


Sample_Traditional_MultiSeriesChart.oml

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