Bar Chart Colors

[ekseptional]

Hi. I am using bar charts but all of the bars appear in the same color. Is it possible to change this?

I’ve noticed that this is even true for the bar chart using dummy data that appears when you first add the chart. Every bar is #FF6384 (Color 1).

[raydeck]

For a single-series dataset its normal/best practice to not have color variation. Like apples eaten yesterday vs today: they are both counts of apples.

If you had a second series - say, oranges - you might have a separate color for those and stack them on top of your apples to give a total count of fruit eaten, with the breakdown apparent in how much of the stack is each color.

[ekseptional]

I’d say it’s a style choice rather than normal/best practice. Even the example bar chart in the documentation for Chart.js has bars with different colors.

Either way, I would like to be able to do this. Does anyone know if it’s possible?

[ilan]

It is in advanced (rather than guided) mode. See below for a formula used to create example datasets:

The above approach may not be the most efficient, but using the documentation from your link above, replace the ‘backgroundColor’ value with an array of values. So for the first series using the example data, you would replace ‘rgb(0,85,147)’ (in the 2nd line of the screenshot) with [‘rgb(255,0,0)’,‘rgb(0,255,0)’,‘rgb(0,0,255)’,etc.].

Not sure if you can do what you want to achieve in guided mode. There is a small learning curve to use advanced mode, but it gives you much greater flexibility.

[caffeinatedwes]

As @ilan mentioned, you can do this by binding data to Datasets in advanced mode.

With this approach, you’ll have to include, at minimum, a data property (array) for your data and a backgroundColor property (array) for the colors.

While you can use no-code formulas to do this like Ilan showed, I find it easier to JavaScript. I generate my JavaScript with WeWeb’s Copilot or ChatGPT.

Here’s the JS I have bound to Datasets. Don’t let the first part (“const myData = …”) scare you if you’re not familiar with JS. If you copy/paste the code below into ChatGPT, explain what it does, and ask for help changing it, you should be able to get there.

const myData = wwFormulas.rollup(variables['XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX'],"count");
//return myData;
return [{ data: myData,backgroundColor: [
      'rgba(255, 99, 132)',
      'rgba(255, 159, 64)',
      'rgba(255, 205, 86)',
      'rgba(75, 192, 192)',
      'rgba(54, 162, 235)',
      'rgba(153, 102, 255)',
      'rgba(201, 203, 207)'
    ] }]

Note: The colors will apply in sequential order. For example, if the first value in my data array (variable myData below) is 7, the color for that value would be rgba(255, 99, 132).

You can read more about how this works by going to ChartJS’s documentation. If it helps, you can click setup can help you play around with the data and see how this works with a live example.

[ekseptional]

Thank you @ilan and @caffeinatedwes ! Clearly I’m going to have to learn how to use Charts in Advanced mode. If you know of any tutorials, please share.

[ilan]

Other than the documentation that @caffeinatedwes linked to, or usign ChatGPT for help, not that I know of. But basically if you can find it in the documentation you can add it to the chart, either through Datasets or Options - refer to the namespaces in the documentation for the right place to add it.