Conditional Chart Color Based on Value

[Taylor_Felt2]

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.

[Douglas_English]

did you try using ‘Format Rules’?

[Steve]

help.appsheet.com

Format Rules: The Essentials

Learn how to change the way information is displayed throughout your app.

[Taylor_Felt2]

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.

[Steve]

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

[Aleksi]

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.

[Taylor_Felt2]

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

[Aleksi]

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,
}]
}
}
}”)

[Taylor_Felt2]

Thanks! I’ll try this.

[Taylor_Felt2]

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,
}]
}
}
}”)

[Aleksi]

You’re welcome

[Bellave_Jayaram]

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

[Taylor_Felt2]

Taylor_Felt2:

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,
}]
}
}
}”)

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,
}]
}
}
}”)

[Aleksi]

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

[Taylor_Felt2]

Aleksi:

data:["&[Year 1]&","&[Year 2]&"],

That worked great, thanks a lot!

[Aleksi]

You’re welcome