[Chartjs]-Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite

by

1👍

✅

The problem is in the last line of your plugins.afterLayout function. There is no object such as chart.data, use chart.config.data instead.

// chart.data.datasets[0].backgroundColor = color;  // replace this line
chart.config.data.datasets[0].backgroundColor = color;

Please have a look at your amended code below (I had to make an assumptions about your data).

const datasets = {
  labels: ['A', 'B', 'C'],
  datasets: [{
    label: 'data',
    data: [0.6, 0.7, 0.8],
    barThickness: 5
  }]
};

new Chart("myChart", {
  plugins: [{
    id: "responsiveGradient",
    afterLayout: (chart, options) => {
      var scales = chart.scales;
      var color = chart.chart.ctx.createLinearGradient(
        scales["x-axis-0"].left,
        scales["y-axis-0"].bottom,
        scales["x-axis-0"].right,
        scales["y-axis-0"].top
      );
      // add gradients stops
      color.addColorStop(0, "black");
      color.addColorStop(0.25, "red");
      color.addColorStop(0.5, "orange");
      color.addColorStop(0.75, "yellow");
      color.addColorStop(1, "green");
      // changes the background color option
      chart.config.data.datasets[0].backgroundColor = color;
    }
  }],
  type: 'horizontalBar',
  data: datasets,
  options: {
    maintainAspectRatio: false,
    tooltips: {
      enabled: false
    },
    title: {
      display: false,
    },
    responsive: true,
    legend: {
      display: false,
      position: "top"
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false,
          min: 0.5,
          max: 0.8,
          maxTicksLimit: 6,
        },
        scaleLabel: {
          display: false
        },            
        gridLines: {
          display: false,
          zeroLineColor: "transparent",
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 6,
          padding: 15,
        },
        gridLines: {
          drawTicks: false,
          display: false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

0👍

For me the cause of this error was trendlineLinear property, as i was trying to use trendlineLinear for a single item array too.
Here is how I fixed it ->

series={[
           {
            data: dataArray,
            label: 'some label name',
            trendlineLinear: **dataArray.length > 1** && {
            lineStyle: 'dotted',
             width: 2
            }
         ]}

Leave a comment