Apply Gradients to Lines Relatively to Allow Proper Scaling

[LuckyResistor]

Feature Proposal

Using a vertical gradient for the line in a diagram can add additional information. A quick look to the data can give an interpretation of the values like colours of an ample.

See the following example:

The colour helps to interpret the data, without the requirement to look at the scale and interpret the actual numbers.

Feature Use Case

• Display the level of sensor values (blue = very good, green = good, yellow = ok, orange = warning, red = bad). This already gives an interpretation of the values, which is easier to read than the direct interpretation of the numbers.
• Display levels of fitness data (green = easy, orange = moderate, red = hard)
• Visualize temperature data (0ºC = blue, 20ºC = green, 40ºC = yellow, 60ºC = orange, 100ºC = red)
• Visualize light spectrum colour values.

The Problem with The Current Version

Currently, while adding gradients to the diagram is working fine, they are not applied to the diagram only with styling in mind.

• The gradient is not scaled to the diagram. I have to write code to rescale the gradient if the diagram is scaled.
• The gradient is not limited to the diagram itself, but to the whole canvas.
• The gradient is not correctly applied to the label border.
• There is a minor problem with the device pixel ratio while applying the gradient. It is different for the initial gradient and a gradient which is applied later to the canvas.
• Adding points using the same or similar gradient as fill is not possible. Like, points which are have the same hue, but are a little bit brighter or darker.

My current solution

To solve the rescaling issue, I currently use code like this:

    window.c1canvas = document.getElementById('canvas'); 
    window.c1ctx = window.c1canvas.getContext('2d');
    window.resizeGradient = function() {
        window.lineGradient = c1ctx.createLinearGradient(0, c1canvas.height*0.1/devicePixelRatio, 0, c1canvas.height*0.85/devicePixelRatio);
        lineGradient.addColorStop(1.0, '#5080ff');
        lineGradient.addColorStop(0.9, '#50ff70');
        lineGradient.addColorStop(0.7, 'yellow');
        lineGradient.addColorStop(0.5, 'orange');
        lineGradient.addColorStop(0.0, 'red');
        c1config['data']['datasets'][0]['borderColor'] = lineGradient;
        c1chart.update();
    }
    window.onresize = window.resizeGradient;
    window.onload = function() {
        window.c1config = {{ config|tojson }} 
        window.c1chart = new Chart(window.c1ctx, window.c1config);
        window.resizeGradient()
    };

Possible Implementation

I found no simple solution because it seems at the time the gradient is created, one has to specify absolute point values. Scaling the lines and gradients to the right destination sizes seems not easily possible.

Therefore I suggest adding levels to vertical axes.

levels: [
  {max: 20, label: "Very Good",  color: "blue"},
  {max: 40, label: "Good", color: "green"},
  {max: 60, label: "Ok", color: "yellow"},
  {max: 80, label: "Problematic", color: "orange"},
  {max: 100, label: "Bad", color: "red"},
]

The level always covers the area from the previous level to the next max value.

This levels can be used:

• to colour the line using a gradient
• to display vertical "panes" with these levels.

[etimberg]

I don't think this should be in the core since it's not something everyone needs and it'll increase the library size. That being said, it's easy to write a plugin that does this. I made an example of it here: https://jsfiddle.net/c0tzo824/1/

For the example, I swapped the options from using max to min to better align with how the gradients work. The plugin wont cover all cases, in particular if multiple levels fall outside the scale range (i.e. levels are defined up to 100, but the scale tops out at 60).