Conditional Chart Color Based on Value

Hello,

Does anyone know if it’s possible to use a formula for the chart color.

Basically if the value is negative, I want the color to be red. Green if positive.

did you try using β€˜Format Rules’?

1 Like

It doesn’t seem like this applies to charts though.

I’d like to get the color of the bar to change based on the value.

Oh, right. :frowning: I’m not aware of a way to do what you want. Maybe @Aleksi does?

Unfortunately that’s true… it’s not possible at this moment. If you want to do that, you need to use other services where you can generate the chart through the URL and add that as an image to your app.

1 Like

Is that using a webhook? I didn’t know that was possible.

For example this formula generates the URL and because it’s an image column, it will show it in the app.

CONCATENATE(β€œhttps://quickchart.io/chart?c=
{
type:β€˜bar’,
options: {
plugins: {
legend: false}},
data:{
labels: [β€˜0801’,β€˜0802’,β€˜0803’,β€˜0804’,β€˜0805’,β€˜0806’,β€˜0807’,β€˜0808’,β€˜0809’,β€˜0810’,β€˜0811’,β€˜0812’,β€˜0813’,β€˜0814’,β€˜0815’,β€˜0816’],
datasets:[{
data:[34,28,11,29,41,8,29,14,11,23,31,25,11,7,28,31],
backgroundColor:β€˜red’
}]
},
options:{
scales:{
xAxes:[{
barThickness:20,
}]
}
}
}”)

2 Likes

Thanks! I’ll try this.

You’re welcome

Hey Aleksi,

I’m running into trouble setting this up using multiple columns. It’s displaying β€œChart Error: unexpected identifier - 1:154”

Can you tell what i’m doing wrong?
CONCATENATE(β€œhttps://quickchart.io/chart?c=
{
type:β€˜bar’,
options: {
plugins: {
legend: false}},
data:{
labels: [β€˜0’,β€˜1’,β€˜2’,'3’,β€˜4’,β€˜5’,β€˜6’,β€˜7’,β€˜8’,β€˜9’,β€˜10’,β€˜11’,β€˜12’,β€˜13’,β€˜14’,β€˜15’],
datasets:[{
data:{[Year 1],[Year 2],[Year 3],[Year 4],[Year 5],[Year 6],[Year 7],[Year 8],[Year 9],[Year 10],[Year 11],[Year 12],[Year 13],[Year 14],[Year 15]},
backgroundColor:β€˜red’
}]
},
options:{
scales:{
xAxes:[{
barThickness:20,
}]
}
}
}”)

You need to make data an array so replace data:{…} by data:[…]

I tried it like this and it didn’t work. also tried removing the {} for datasets as well and it did nothing. I haven’t messed with these much so i’m not sure what I could be doing wrong.

CONCATENATE(β€œhttps://quickchart.io/chart?c=
{
type:β€˜bar’,
options: {
plugins: {
legend: false}},
data:{
labels: [β€˜0’,β€˜1’,β€˜2’,'3’,β€˜4’,β€˜5’,β€˜6’,β€˜7’,β€˜8’,β€˜9’,β€˜10’,β€˜11’,β€˜12’,β€˜13’,β€˜14’,β€˜15’],
datasets:[{
data:[[Year 1],[Year 2],[Year 3],[Year 4],[Year 5],[Year 6],[Year 7],[Year 8],[Year 9],[Year 10],[Year 11],[Year 12],[Year 13],[Year 14],[Year 15]],
backgroundColor:β€˜red’
}]
},
options:{
scales:{
xAxes:[{
barThickness:20,
}]
}
}
}”)

Try with…
data:["&[Year 1]&","&[Year 2]&"],

1 Like

That worked great, thanks a lot!

You’re welcome