Chartjs-Is it possible to scale Chart.js background Image

0👍

When drawing the image inside the beforeDraw hook, you should should specify its width and height depending on the size of the canvas.

const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);

Please take a look at your amended code and see how it works.

const data = {
  datasets: [{
    label: "Elevation",
    radius: 0,
    borderWidth: 2,
    pointBorderColor: 'blue',
    pointBackgroundColor: 'red',
    data: [{
      x: "03/02/2022",
      y: "659.63"
    }, {
      x: "03/03/2022",
      y: "659.6"
    }, {
      x: "03/04/2022",
      y: "659.6"
    }, {
      x: "03/05/2022",
      y: "659.63"
    }, {
      x: "03/06/2022",
      y: "659.81"
    }, {
      x: "03/07/2022",
      y: "659.86"
    }, {
      x: "03/08/2022",
      y: "659.99"
    }, {
      x: "03/09/2022",
      y: "660.29"
    }, {
      x: "03/10/2022",
      y: "660.38"
    }, {
      x: "03/11/2022",
      y: "660.39"
    }, {
      x: "03/12/2022",
      y: "660.78"
    }, {
      x: "03/13/2022",
      y: "660.95"
    }, {
      x: "03/14/2022",
      y: "660.95"
    }, {
      x: "03/15/2022",
      y: "661.01"
    }, {
      x: "03/16/2022",
      y: "661.48"
    }, {
      x: "03/17/2022",
      y: "661.39"
    }, {
      x: "03/18/2022",
      y: "661.24"
    }, {
      x: "03/19/2022",
      y: "661.34"
    }, {
      x: "03/20/2022",
      y: "661.44"
    }, {
      x: "03/21/2022",
      y: "661.34"
    }, {
      x: "03/22/2022",
      y: "661.12"
    }, {
      x: "03/23/2022",
      y: "661.27"
    }, {
      x: "03/24/2022",
      y: "661.29"
    }, {
      x: "03/25/2022",
      y: "661.29"
    }, {
      x: "03/26/2022",
      y: "661.29"
    }, {
      x: "03/27/2022",
      y: "661.29"
    }, {
      x: "03/28/2022",
      y: "661.52"
    }, {
      x: "03/29/2022",
      y: "661.53"
    }, {
      x: "03/30/2022",
      y: "661.44"
    }, {
      x: "03/31/2022",
      y: "661.36"
    }, {
      x: "04/01/2022",
      y: "661.0"
    }, {
      x: "04/02/2022",
      y: "660.68"
    }, {
      x: "04/03/2022",
      y: "660.41"
    }, {
      x: "04/04/2022",
      y: "660.247"
    }, {
      x: "04/05/2022",
      y: "660.31"
    }, {
      x: "04/06/2022",
      y: "660.46"
    }, {
      x: "04/07/2022",
      y: "660.7"
    }, {
      x: "04/08/2022",
      y: "660.73"
    }, {
      x: "04/09/2022",
      y: "660.73"
    }, {
      x: "04/10/2022",
      y: "660.73"
    }, {
      x: "04/11/2022",
      y: "660.85"
    }, {
      x: "04/12/2022",
      y: "660.87"
    }, {
      x: "04/13/2022",
      y: "660.83"
    }, {
      x: "04/14/2022",
      y: "660.75"
    }, {
      x: "04/15/2022",
      y: "660.73"
    }],
    fill: false,
    borderColor: 'blue'
  }]
};

//plugin block
const chartAreaBorder = {
  id: 'chartAreaBorder',
  beforeDraw(chart, args, options) {
    const {
      ctx,
      chartArea: {
        left,
        top,
        width,
        height
      }
    } = chart;
    ctx.save();
    ctx.strokeStyle = options.borderColor;
    ctx.lineWidth = options.borderWidth;
    ctx.setLineDash(options.borderDash || []);
    ctx.lineDashOffset = options.borderDashOffset;
    ctx.strokeRect(left, top, width, height);
    ctx.restore();
  }
};

const image = new Image();
image.src = 'https://i.stack.imgur.com/S7tJH.png';
const imgPlugin = {
  id: 'custom_canvas_background_image',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const {
        top,
        left,
        width,
        height
      } = chart.chartArea;
      const x = left + width / 2 - height / 2;
      const y = top + height / 2 - height / 2;
      ctx.drawImage(image, x, y, height, height);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

var GradientBgPlugin = {
  beforeDraw: function(chart, args, options) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;
    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
    gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
    gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
};

//config block
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: 'bottom'
      },
      title: {
        display: true,
        text: "HARTWELL PROJECT ",
        font: {
          size: 20
        }
      },
    },
    scales: {
      x: {
        type: 'time',
        time: {
          parser: 'MM/dd/yyyy',
          unit: 'month',
          displayFormats: {
            month: 'MMM yyyy'
          }
        },
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        title: {
          position: 'left',
          display: true,
          text: 'Elevation (FT-MSL)'
        }
      }
    },
    chartAreaBorder: {
      borderColor: 'black',
      borderWidth: 10,
      //borderDash: [5, 5],
      borderDashOffset: 5
    },
    imgPlugin: {}
  },
  plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};

// render block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chartBox">
  <canvas id="myChart"></canvas>
</div>

Leave a comment