More control over colours used in graphs

It would be helpful to have more control over colours used in graphs.

One option would be to be able to create custom palettes (so that we can use our corporate colours).

Another option would be able to control exactly which colour to use in pie charts for which slice. This is particularly for occasions when you are summing totals grouped by a Choice field, and those Choices are colour-coded elsewhere in the application (e.g. customer feedback scores from dreadful to excellent).

I appreciate that these options are available to people with a black belt in CSS. But it would be good to have more control over colours in the low-code area.

Hi Angela,

Thanks for the suggestions.

We will consider custom palettes.

Another user has asked to be able to specify a colour for each specific pie segment. We appreciate that some data items will have a colour to associate with them by convention. We will look to add this in 2020.2, coming in the Autumn.

Paul

Thanks for that Paul, I look forward to seeing the new release.

In the meantime, are there any workarounds available? It is going to be hard to present a pie chart to the customer if it has the ‘wrong’ colours.

Hi Angela,

The charts are rendered with SVG elements. A developer with the right skills might be able to manipulate the colours in the browser but I suspect this will be hard.

I will ask one of our developers to have a quick look at the Fusion Charts JS but, if you don’t hear back from me, we were unable to find a method.

If this is really important to you, you could build your own chart! For example, it might be surprisingly easy to adapt a Google Charts pie into a Code Studio widget:
https://developers.google.com/chart/interactive/docs/gallery/piechart
If you pursue this option and get stuck, I can try and help.

Paul

We are using the odbc functionality to connect our data to Power BI for dashboarding

Hi Angela,

Kestus, a developer here had a quick look at this. And came up with a temporary solution.

If you create a widget (from the static blueprint), change frontend.js to something like the below, and put that widget in your page alongside your chart, you can control the colours:

return {
init: function(widget){
var chart_widget = $(‘div[data-cell_id=PCL0000723EBDDF1] .page_widget[data-widget_id=“37”]’);
chart_widget.on(‘chart_loaded’, () => {
var chart = chart_widget.data(‘instance’).chart;
var data = chart.getJSONData();
data.data[2].color = ‘#CCCC00’;
chart.setJSONData(data);
});
}
}

Note that you will need to find the correct value of “PCL0000723EBDDF1” by inspecting the DOM in the browser. It is the “page cell” id that holds your pie chart.

The above example changes the 3rd segment to a mustard colour.
Looking at the data array, you could loop over them identifying the segment from its label to ensure the right colour will be assigned to the correct segment.

According to Kestus, the chart_loaded event is not ideal since there is a chance the default colours will be seen before they are changed. If you (or anyone) wants to use this option (before a proper solution is provided in 2020.2) and this needs resolved, then we will provide an extra event hook in 2020.1.

Paul