Render Graph Error on line : TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided double value is non-finite.

[zibous]

With the following configuration I get this error: Used with the latest version chart.js (3.0.0-beta.5):

{
  "data": {
    "labels": [
      "2020-11-02 21:00:00",
      "2020-11-02 22:00:00",
      "2020-11-02 23:00:00",
      "2020-11-03 00:00:00",
      "2020-11-03 01:00:00",
      "2020-11-03 02:00:00",
      "2020-11-03 03:00:00",
      "2020-11-03 04:00:00",
      "2020-11-03 05:00:00",
      "2020-11-03 06:00:00",
      "2020-11-03 07:00:00",
      "2020-11-03 08:00:00"
    ],
    "datasets": [
      {
        "label": "Aussen",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 13.28,
        "maxval": 16.72,
        "current": "13.28",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_aussen",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(149,165,166,0.85)",
              "50": "rgba(211,84,0,0.85)",
              "100": "rgba(205,220,57,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(231,76,60,0.85)",
              "1": "rgba(241,196,15,0.85)",
              "2": "rgba(26,188,156,0.85)",
              "3": "rgba(230,126,34,0.85)"
            }
          }
        },
        "name": "Aussen",
        "last_changed": "2020-11-03T09:01:57.020294+00:00",
        "state": "13.28",
        "backgroundColor": "rgba(176,122,161,0.85)",
        "borderColor": "rgba(176,122,161,0.85)",
        "data": [
          "16.72",
          "16.28",
          "16.28",
          "15.22",
          "15.22",
          "14.61",
          "14.28",
          "13.89",
          "14.00",
          "14.11",
          "13.72",
          "13.39",
          "13.28"
        ]
      },
      {
        "label": "Küche",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 23.53,
        "maxval": 25.98,
        "current": "23.95",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_kuche",
        "name": "Küche",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(236,240,241,0.85)",
              "50": "rgba(243,156,18,0.85)",
              "100": "rgba(229,28,35,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(241,196,15,0.85)",
              "1": "rgba(26,188,156,0.85)",
              "2": "rgba(230,126,34,0.85)",
              "3": "rgba(39,174,96,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:31:06.981875+00:00",
        "state": "23.95",
        "backgroundColor": "rgba(157,118,96,0.85)",
        "borderColor": "rgba(157,118,96,0.85)",
        "data": [
          "25.98",
          "25.11",
          "24.44",
          "24.23",
          "24.11",
          "23.78",
          "23.74",
          "23.53",
          "23.56",
          "23.95",
          "23.88",
          "23.95"
        ]
      },
      {
        "label": "Bad",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 24.86,
        "maxval": 25.89,
        "current": "25.29",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_bad",
        "name": "Bad",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(46,204,113,0.85)",
              "50": "rgba(52,73,94,0.85)",
              "100": "rgba(39,174,96,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(26,188,156,0.85)",
              "1": "rgba(230,126,34,0.85)",
              "2": "rgba(39,174,96,0.85)",
              "3": "rgba(142,68,173,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:34:21.910288+00:00",
        "state": "25.29",
        "backgroundColor": "rgba(52,152,219,0.85)",
        "borderColor": "rgba(52,152,219,0.85)",
        "data": [
          "25.89",
          "25.83",
          "25.58",
          "25.42",
          "25.38",
          "25.03",
          "24.96",
          "24.86",
          "25.06",
          "25.17",
          "25.25",
          "25.29"
        ]
      },
      {
        "label": "Eingang",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 21.89,
        "maxval": 22.12,
        "current": "21.89",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_eingang",
        "name": "Eingang",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(41,128,185,0.85)",
              "50": "rgba(44,62,80,0.85)",
              "100": "rgba(236,240,241,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(52,73,94,0.85)",
              "1": "rgba(127,140,141,0.85)",
              "2": "rgba(41,128,185,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:35:15.134018+00:00",
        "state": "21.89",
        "backgroundColor": "rgba(46,204,113,0.85)",
        "borderColor": "rgba(46,204,113,0.85)",
        "data": [
          "21.97",
          "21.99",
          "22.05",
          "22.03",
          "22.12",
          "22.05",
          "22.03",
          "21.97",
          "22.03",
          "22.03",
          "21.95",
          "21.89"
        ]
      }
    ]
  },
  "config": {
    "secondaryAxis": false,
    "series": 5,
    "options": {}
  }
}

If I adjust the processing of createGradient and addColors then it works:

function createGradient(ctx, axis, area) {
        // Bugfix, because sometimes i get no values...
    if(area.bottom && area.top && area.left && area.right){
            return axis === 'y'
        ? ctx.createLinearGradient(0, area.bottom, 0, area.top)
        : ctx.createLinearGradient(area.left, 0, area.right, 0);
    }
}

function addColors(gradient, scale, colors) {
    Object.keys(colors).forEach(value => {
        const pixel = scale.getPixelForValue(value);
        if(pixel){
                        // BugFix, only when pixel holds values....
            const stop = scale.getDecimalForPixel(pixel);
            gradient.addColorStop(Math.max(0, Math.min(1, stop)), index_esm(colors[value]).rgbString());
        }
    });
}

[kurkle]

I pushed version 0.1.1 to try to address these issues. Can you test if it works for you?

[zibous]

@kurkle Thank, is working 👍

I am searching for a generic plugin for all charts, but so far had no success. Building a plugin for every chart type is very resource-intensive

Simple for yours, i use the helper to build the gradient color:

const helpers = Chart.helpers;
function addColors(gradient, scale, colors) {
        for (const value of Object.keys(colors)) {
            const pixel = scale.getPixelForValue(value);
            const stop = scale.getDecimalForPixel(pixel);
            if (isFinite(pixel) && isFinite(stop)) {
                gradient.addColorStop(
                    Math.max(0, Math.min(1, stop)),
                    helpers.color(colors[value]).alpha(0.95).rgbString()
                );
            }
        }
    }