lundi 25 février 2019

Can I use a gradient in Chart.js without accessing the chart context when the chart is created?

In Chart.js, is it possible to create a chart with a gradient as a background color only by passing in data or options when creating the chart?

All the tutorials I see involve calling createLinearGradient on the chart context when creating the chart, and then passing in the gradient object via the backgroundColor option.

Ideally, I would like to be able to pass data to my chart by doing something like this:

datasets: [
  {
    data: myData,
    backgroundColor: "linear-gradient(#FF0000, #00FF00)"
  }
]

Or, if it's absolutely impossible to create a gradient without the chart context, then with something like:

datasets: [
  {
    data: myData,
    backgroundColor: (ctx) => {
      let gradient = ctx.createLinearGradient(0, 0, 100, 0);
      gradient.addColorStop(0, '#FF0000');
      gradient.addColorStop(0, '#00FF00');
      return gradient;
    }
  }
]

I am unable to touch the chart context (or at least, it would be quite difficult and rather hacky to do so) because I am using ember-cli-chart, which as far as I know does not provide a way to access the chart's context.

I'd also be happy just having a clean way to work around this in Ember, if there are suggestions there.




Aucun commentaire:

Enregistrer un commentaire