I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.

It is better at staying in place than a css background image, however, when the window is resized, the data points end up in different spots relative to the image. Is there any way to make the chart change size at the same rate as the image, so that the data points stay put relative to the image?

I've tried changing the 'responsive' and 'maintainAspectRatio' settings, but they don't seem to make a difference in this regard.

My custom plugin is as shown at the link above:

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (imageplete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

Thanks for any help.

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.

It is better at staying in place than a css background image, however, when the window is resized, the data points end up in different spots relative to the image. Is there any way to make the chart change size at the same rate as the image, so that the data points stay put relative to the image?

I've tried changing the 'responsive' and 'maintainAspectRatio' settings, but they don't seem to make a difference in this regard.

My custom plugin is as shown at the link above:

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (imageplete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

Thanks for any help.

• javascript
• image
• plugins
• background
• chart.js

1 Answer 1

I was able to do this with css. Add 'overflow: scroll' to 'body' and set a size for a div containing the 'canvas' element:

body {
    background-color: white;
    overflow: scroll;
}
#canvasdiv {
    width: 1200px;
    height: 900px;
    margin: 50px 0 0;
}
#canvas {
    width: auto !important;
    height: auto !important;
}