Charts Color Usage


In this post I'm going to cover the different ways of changing the colors of a chart.
Additionally, you can find attached an eSpace exemplifying their use.

DataPoint Color Attribute
The Color attribute of a DataPoint changes the color of the marker and tooltip for that point.
This option should be used when you solely want to change the color of a particular set of data points, to distinguish them from the rest.

AdvancedDataSeriesFormat DataSeriesJSON Attribute
The DataSeriesJSON attribute of an AdvancedDataSeriesFormat allows you to change the settings of a single series (which are defined by the Highcharts API).
This can then be used to set the color of that series, which affects every visual element associated to it (tooltips, markers, lines, areas, bars, columns, etc...).
You should follow this route when making small changes to your chart, in order to fit the data or layout being displayed.

Changing the Style Sheet
Because the most natural way of tweaking the look and feel of your application is through the style sheet, it can be used to change chart colors as well.
In order to achieve this, the attribute color of classes Chart_Color1 through Chart_Color10 must be set. Note that due to a Highcharts requirement, exactly ten classes are needed.
When defining a custom theme for your application, this is the suggested approach as all charts will use these colors.

Specifying an AdvancedFormat
Finally, in those more specific situations where none of the above options are applicable, any Highcharts setting can be manipulated using AdvancedFormat (including colors).
An example of advanced color usage can be found on the attached eSpace. For more information and examples of AdvancedFormat, my post about chart widgets is a good reference.

From our experience, these options cover most use cases.
If you have any additional questions or suggestions for another common usage of colors, feel free to drop a message in this discussion and we'll do our best to address it.

Hello Diogo,
I was trying to apply a specific color to a series, but it does not seem to work with bar charts.
To reproduce this, use your ChartColors eSpace, and set the advanced format to:

        threshold: 10,
        color: '#000000'

This works fine in the line chart (both series are displayed in black), but if you change the chart to Bar, the series colors are the original ones, the atribute color in the advanced format seems to be ignored. Do you 
know why this happens? This also works fine for bar charts when using Highcharts outside the Outsystems platform.

I am using Platform Server and Service Studio versions

My final goal is to have a bar chart with gradient colors, which I successfully achieved in a pie chart, but not in a bar chart.

Thank you very much!
Best regards,
Pedro Vieira
Hi Pedro,

I haven't seen that happen, nor can I promply recall a reason for it (so as to give you a workaround right away).
I'll look into it asap, but might take a while since I'm out of the office until the end of this week.

- Diogo
Hello again, any news on this issue?

Also, is there any chance Outsystems will be delivering Highstock charts in addition to Highcharts, in future releases?

Thank you very much!
Best regards,
Pedro Vieira
Hi Pedro,

There are no plans to deliver Highstock charts in future releases.

Remember that if you are using Highstock in your production apps, you will have to license it: