Vega Chart using multi color gradiant for an area like top with one gradiant and bottom with another gradiant

I have a chart drawn using area type. In this chart I am able to customize the color of the area and background using signal option within fill. But when I try using value to achieve gradiant same is not possible. Removing signal within fill display both the area using the same gradiant. Is there a way to set color with in value of fill option based on condition.

Hi @Vignesh_T and welcome to the Losant forums.

Can you provide …

  • Your Custom Vega Chart’s configuration.
  • The version of Vega / Vega Lite you are using.
  • The attribute data type (i.e. number, string, etc.) of the underlying value(s) you are using in the block.

We typically cannot provide support on those more advanced configuration properties but we can at least take a look if you can send those.

Hi @Dylan_Schuster here is a part of the spec which I am tring to break through.
“fill”: {
“signal”: [“datum.colour == ‘#387c39’ ? ‘green’ : ‘blue’”],
“value”: {
“x1”: 1,
“y1”: 1,
“x2”: 1,
“y2”: 0,
“gradient”: “linear”,
“stops”: [ {
“offset”: 0,
“color”: “#ffffff
},
{
“offset”: 1,
“color”: “green”
// “signal”: [“datum.stokeColor == ‘#387c39’ ? ‘green’ : ‘blue’”]
// “condition”: [
{ “test”: “datum.stokeColor == ‘#387c39’”, “value”: “green” },
{ “test”: “datum.stokeColor != ‘#387c39’”, “value”: “blue” }
]
}]
}
}
If the above part of code I am able to achieve different color based on condition in Signal. Same I am trying to achieve in color of stops which I am unable to change based on condition. It would be helpful if I would know how to add condition with in color of stops.

I’m sorry, but I don’t think this is something we can help with. I’ll refer you to our reply to another user who recently requested help with Vega spec configuration and I recommend you take this question to the Vega community.