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

I'm using the plugin, instead of a CSS background, because I need the image to stay with the chart data points ('scatter' type chart).

However, I can't make it show the entire image, no matter what settings I try in the plugin. It is cropping the image vertically.

As per a request, I am editing this post by adding the relevant code here. I import the data from a db, but I'm adding some it here as static code.

Chart.register(ChartDataLabels);
    
let dbstates = '["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Washington D.C.","Florida","Geia","Hawaii","Idaho","Illinois","Indiana"]';

let xcoord = '[{"x":"10","y":"1","label":"AL"},{"x":"10","y":"2","label":"AK"},{"x":"5","y":"5","label":"AZ"},{"x":"5","y":"15","label":"AR"},{"x":"15","y":"5","label":"CA"},{"x":"20","y":"1","label":"CO"},{"x":"3","y":"3","label":"CT"}]';

let myChart;
    
    (async function() {
    
    const isTest = false;
    let onDrag = undefined;
    let jsonmap = JSON.parse(xcoord);
    
    Chart.register({
        id: 'custplugin'
    });
    
    const image = new Image();
    image.src = 'images/ECOS-Southside-booths1.jpg';
    
    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();
        }
      }
    };
    
    const data = {
      labels: JSON.parse(dbstates),
      datasets: [{
        label: 'Location',
        data: jsonmap,
        backgroundColor: 'rgb(255, 99, 132)',
        pointHitRadius: 5,
        }],
    };
    
    const config = {
      type: 'scatter',
      data: data,
      responsive: false,
      maintainAspectRatio: true,
      plugins: [ custplugin ], // declare custom plugin
      options: {
        animation: false,
        layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } },
        plugins: {
            custplugin: {
                borderColor: 'black',
            },
       },
       scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          }
        },
      elements: {
        point: {
          radius: 10,
          hoverRadius: 15
        }
      }
      }
    };
    
    const ctx = document.getElementById('pie-chart');
    
    myChart = new Chart(ctx, config);
    })();

I tried setting CSS 'overflow: visible' for the 'canvas' element and the div holding that, but that has no effect. I've tried messing with the 'const x' and 'const y' settings in the plugin, but nothing seems to work.

How can I get the entire image to show?

Thanks for any help.

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

I'm using the plugin, instead of a CSS background, because I need the image to stay with the chart data points ('scatter' type chart).

However, I can't make it show the entire image, no matter what settings I try in the plugin. It is cropping the image vertically.

As per a request, I am editing this post by adding the relevant code here. I import the data from a db, but I'm adding some it here as static code.

Chart.register(ChartDataLabels);
    
let dbstates = '["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Washington D.C.","Florida","Geia","Hawaii","Idaho","Illinois","Indiana"]';

let xcoord = '[{"x":"10","y":"1","label":"AL"},{"x":"10","y":"2","label":"AK"},{"x":"5","y":"5","label":"AZ"},{"x":"5","y":"15","label":"AR"},{"x":"15","y":"5","label":"CA"},{"x":"20","y":"1","label":"CO"},{"x":"3","y":"3","label":"CT"}]';

let myChart;
    
    (async function() {
    
    const isTest = false;
    let onDrag = undefined;
    let jsonmap = JSON.parse(xcoord);
    
    Chart.register({
        id: 'custplugin'
    });
    
    const image = new Image();
    image.src = 'images/ECOS-Southside-booths1.jpg';
    
    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();
        }
      }
    };
    
    const data = {
      labels: JSON.parse(dbstates),
      datasets: [{
        label: 'Location',
        data: jsonmap,
        backgroundColor: 'rgb(255, 99, 132)',
        pointHitRadius: 5,
        }],
    };
    
    const config = {
      type: 'scatter',
      data: data,
      responsive: false,
      maintainAspectRatio: true,
      plugins: [ custplugin ], // declare custom plugin
      options: {
        animation: false,
        layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } },
        plugins: {
            custplugin: {
                borderColor: 'black',
            },
       },
       scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          }
        },
      elements: {
        point: {
          radius: 10,
          hoverRadius: 15
        }
      }
      }
    };
    
    const ctx = document.getElementById('pie-chart');
    
    myChart = new Chart(ctx, config);
    })();

I tried setting CSS 'overflow: visible' for the 'canvas' element and the div holding that, but that has no effect. I've tried messing with the 'const x' and 'const y' settings in the plugin, but nothing seems to work.

How can I get the entire image to show?

Thanks for any help.

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

• 1 Can you please provide a minimal reproducible example of the issue? – C3roe Commented Apr 1 at 9:33
• Okay, here you go. A live example is here: link – jamminjames Commented Apr 2 at 1:21
• I see via console.log that the chart height is less than the image height, and not the same proportions as the image (w x h). But I don't see where to set the chart height. I tried resampling to a smaller image, but since the chart is not the same proportions, that doesn't help. – jamminjames Commented Apr 2 at 2:08

1 Answer 1

Okay, I just needed to set the canvas size element to the image size in the html:

<canvas id="pie-chart" width=978 height=653></canvas>