search

kurkle / chartjs-plugin-gradient

Easy gradients for Chart.js
MIT License
37 stars 6 forks source link

Legend boxes don't reflect the gradient #28

Closed stockiNail closed 2 years ago

stockiNail commented 2 years ago

Feature Proposal

As I have seen in my lib, when you use gradients, the gradients are not reflected in the legend.

To be precise, the gradient is applied to the legend but due to the gradient size is limited to the scales, the legend are out side of the gradient and then the canvas use the color related to the position.

See example in codepen: https://codepen.io/stockinail/pen/xxpENVM

As you can see the legend is using the red color because is the color from the gradient for legend position.

The same is for polarArea (using the radial gradient) where all legend items are colored with the color of the gradient.

polarGradient

The proposal is to reflect on the legend the gradient.

Possible Implementation

I see only 1 option, creating a generateLabels callback in the plugin to set to the chart in order to create a specific gradient (with dimension of the legend box).

For polarArea, the generateLabels callback could return the color at the data index, calculating the last color for the data index. For this, I have got already a code (even if is written in Java) that it can be translated and used.

stockiNail commented 2 years ago

Forgot to write that if the user set own generateLabels callback, the callback of the plugin should wrap it, invoking it and changes only the fillStyle and strokeStyle.

kurkle commented 2 years ago

It would be great if the legend plugin would resolve the colors with a different context, so a different gradient could be returned based on that. But it does not, so your suggestion might be the only option.

stockiNail commented 2 years ago

But it does not, so your suggestion might be the only option.

yeah, at he moment it sounds so. I know in CHART.JS v4 there is the plan to re-write legend plugin... in version 4!

Just FYI, I'm creating a prototype. I'll show it to you soon.

stockiNail commented 2 years ago

In advance, to do that I think we need to map more hooks of plugin (i.e. to set the callback) and also leverage on chart states map (as done in plugin annotation).

stockiNail commented 2 years ago

@kurkle FYI, generateLabels callback is not the right direction because, when invoked, the legendItems size is not calculated yet. I've found another way.

stockiNail commented 2 years ago

Do you think the support to version 2.x is still needed also for this enhancement?