How to specify 3 colors for all donut/pie charts and graphs on a page?
Question

Hello everybody,

I'm working on a page that has several graphs and charts, and I would like the bars and columns to be displayed in the following 3 colors, alternatingly:

  • "#40ae49"
  • "#573b7e"
  • "#2f95d2"

Is there a way to just specify these 3 colors for each graph and chart? For instance, if I had 1 bar chart with 5 columns, to just indicate that I want to use the colors "#40ae49", "#573b7e" and "#2f95d2". So that I end up with the following:

  • column 1: "#40ae49"
  • column 2: "#573b7e"
  • column 3: "#2f95d2"
  • column 4: "#40ae49"
  • column 5: "#573b7e"

I'm mapping the data automatically, see the image below:

So unfortunately, I cannot specify it like below:

Any advice is much appreciated!

Hi Lotte,

Do you have a condition that identifies the type of data to be displayed in each column? If so, you could use it to set the color with the help of an if condition, like this suggestion:
https://www.outsystems.com/forums/discussion/62612/how-change-color-pie-chart-in-tradicional-web/

Hope this helps!


If you want to apply the same colors to many charts all over your application, it might be interesting to build a separate client or server action to apply the colors.  

See attached oml, an example with 

* Donut chart: a DataAction using a reusable server action to apply the colors.

* Bar chart : an Aggregate with an onAfterFetch using a reusable client action to apply the colors.

Result is same, i prefer the data action, but that's a matter of taste.

Dorine


QDRFavouriteChartColors.oml

Hi,

Please try this Attached oml .

https://samiksha-manekar.outsystemscloud.com/DonutChart/Screen1?_ts=637550669825840956

Hope this Helps.

Thanks

DonutChart.oml

Hi Lotte,

Do you have a condition that identifies the type of data to be displayed in each column? If so, you could use it to set the color with the help of an if condition, like this suggestion:
https://www.outsystems.com/forums/discussion/62612/how-change-color-pie-chart-in-tradicional-web/

Hope this helps!


Hi,

Please try this Attached oml .

https://samiksha-manekar.outsystemscloud.com/DonutChart/Screen1?_ts=637550669825840956

Hope this Helps.

Thanks

DonutChart.oml

Hi Lotte,

One way is to not map your entity list to the chart directly, but create a datapoint list, for example move your aggregate into a DataAction and have a DataPoint List as output of the DataAction. 

Then you can loop through your Aggregate Output and iterate your 3 colors in the ListAppend to your DataPoint List.

Dorine

If you want to apply the same colors to many charts all over your application, it might be interesting to build a separate client or server action to apply the colors.  

See attached oml, an example with 

* Donut chart: a DataAction using a reusable server action to apply the colors.

* Bar chart : an Aggregate with an onAfterFetch using a reusable client action to apply the colors.

Result is same, i prefer the data action, but that's a matter of taste.

Dorine


QDRFavouriteChartColors.oml

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