Gradient background for trend chart

ChartFactor Toolkit
1

Hello, I’m trying to use a linear gradient in the backgroud color of my trend chart, but it renders a black background, this is what i’m doing:

let color = cf.Color()
      .theme({ background:'linear-gradient(310deg,#2152ff,#21d4fd)', font: 'black' })
      .palette(["#fff"]);
myChart.set("color", color)

Is this an issue or, maybe, is there a different way to achieve this?

2

Actually yes, there is a way to do it, first you need to set a transparent background like this:

let color = cf.Color()
        .theme({ background:'rgba(0,0,0,0)', font: 'black'}) // with this you make the chart background transparent
        .palette(["#0095b7", "#a0b774", "#f4c658", "#fe8b3e"]);

myCart.set("color", color)

Then you need to set the styles of your chart element like this:

<div id="my-chart-id" style="background: linear-gradient(310deg, #2152ff, #21d4fd);"></div>
1 Like
3

I works good, thaks, but maybe i could be better if the api allows you to do that in a few lines

1 Like
4

Actually we were in a similar situation before, so we are working on that feature, it wil be released soon

1 Like
5

Got it, so I will be waiting for the updates, thank you very much