Background color context element does not have position values

[itayganor]

Reproduction: https://codesandbox.io/s/chart-js-gradient-annotations-broken-8pf3z

It seems that on the first draw, ctx.element does not have x, x2, y nor y2, making it impossible to draw gradients.

These values are only missing on the first draw; You can uncomment line 52 and see that on the first draw green is returned, but after clicking "Force update", the actual gradient works.

[stockiNail]

@itayganor the scriptable options are invoked before the first element initialization because the options are used to calculate the area of the element.
As you have already recognized, the element, at second draw, is initialized and then you have all area properties initialized. Nevertheless the properties, at second draw, are available but they could be inconsistent if some options, which affect the area of the element, are changed (by scriptable options).

[stockiNail]

@kurkle this could be a use case for #579

[stockiNail]

@itayganor maybe you can try the following workaround:

backgroundColor: (ctx, options) => {
  const opts = options.annotations.hi;
  const {y, y2} = ctx.element.resolveElementProperties(ctx.chart, opts);
  const g = ctx.chart.ctx.createLinearGradient(
    0, y,
    0, y2
  );
  g.addColorStop(0, "red");
  g.addColorStop(1, "black");
  return g;
},

[stockiNail]

Forgot the picture:

[kurkle]

Maybe we should stop resolving the properties beforehand and just pass the resolver as options. That way the options would be read when needed, and not before element is updated. It would also remove the need to list all the property names that need to be resolved.

[stockiNail]

Maybe we should stop resolving the properties beforehand and just pass the resolver as options. That way the options would be read when needed, and not before element is updated. It would also remove the need to list all the property names that need to be resolved.

Absolutely agree! AFA I remember, at very beginning this is how it worked but I think it was changed for performance reason (not sure).

[stockiNail]

we should stop resolving the properties beforehand and just pass the resolver as options.

@kurkle if you agree, I'm gonna try to do it tomorrow (if you don't want to do it yourself and if I'll have time, in this period I've got many other stuff to do)

[kurkle]

I have already this working in a branch, but will need find the reason for the original change so we don't break anything.