How to add images as labels to Canvas Charts using chart.js

by

I’m aware that this is an old post but since it has been viewed so many times, I’ll describe a solution that works with the current Chart.js version 2.9.3.

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images (icons) directly on the canvas using CanvasRenderingContext2D.

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx; 
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    xAxis.ticks.forEach((value, index) => {  
      var x = xAxis.getPixelForTick(index);   
      ctx.drawImage(images[index], x - 12, yAxis.bottom + 10);
    });      
  }
}],

The position of the labels will have to be defined through the xAxes.ticks.padding as follows:

xAxes: [{
  ticks: {
    padding: 30
  }   
}],

Please have a look at the following runnable code snippet.

const labels = ['Red Vans', 'Blue Vans', 'Green Vans', 'Gray Vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png']
  .map(png => {
    const image = new Image();
    image.src = png;
    return image;
  });
const values = [48, 56, 33, 44];

new Chart(document.getElementById("myChart"), {
  type: "bar",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {  
        var x = xAxis.getPixelForTick(index);   
        ctx.drawImage(images[index], x - 12, yAxis.bottom + 10);
      });      
    }
  }],
  data: {
    labels: labels,
    datasets: [{
      label: 'My Dataset',
      data: values,
      backgroundColor: ['red', 'blue', 'green', 'lightgray']
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },    
    scales: {
      yAxes: [{ 
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          padding: 30
        }   
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

More Related Contents:

  1. Destroy chart.js bar graph to redraw other graph in same
  2. Limit labels number on Chart.js line chart
  3. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  4. Get pixel color from canvas, on mousemove
  5. Why does canvas.toDataURL() throw a security exception?
  6. CanvasContext2D drawImage() issue [onload and CORS]
  7. how to save canvas as png image?
  8. Does HTML5/Canvas Support Double Buffering?
  9. Canvas toDataURL() returns blank image
  10. Canvas image crossplatform insecure error
  11. HTML5 Canvas camera/viewport – how to actually do it?
  12. I want to do animation of an object along a particular path
  13. Disable arrow key scrolling in users browser
  14. Draw border around nontransparent part of image on canvas
  15. ChartJS – Different color per data point
  16. Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed]
  17. Detect if user clicks inside a circle
  18. addEventListener for keydown on Canvas
  19. How to set ChartJS Y axis title?
  20. Resize a Base-64 image in JavaScript without using canvas
  21. How to save canvas animation as gif or webm?
  22. Force showing the “Save as” dialog box when downloading a file
  23. How to change colours for Angular-Chart.js
  24. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  25. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  26. HTML Canvas Full Screen
  27. javascript: upload image file and draw it into a canvas
  28. Extracting single frames from an animated GIF to canvas
  29. Detecting collision of rectangle with circle
  30. Get distance between two points in canvas

Leave a Comment