[Chartjs]-How to change the labels to the image (icon) in bar chart.js

by

12👍

The easiest way to do this would be to get a font that includes these icons and then set the font family for the ticks

  ...
  options: {
    scales: {
      xAxes: [{
        ticks: {
          fontFamily: 'FontAwesome'
        }
      }]
    }
  }
};

and then specify the appropriate character codes in your labels

labels: ["\uf24e", "\uf1b9", "\uf242", "\uf0fc", "\uf236"],

With the FontAwesome CSS, the above would give you

enter image description here

9👍

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) instead of tick labels directly on the canvas using CanvasRenderingContext2D.

You’ll also have to instruct Chart.js not to display the default tick labels. This can be done through the following definition inside the chart options.

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }],

Further you need to define some padding at the bottom of the chart, otherwise you’ll see only part of the images.

layout: {
  padding: {
    bottom: 30
  }
},

Please have a look at the runnable code snippet below.

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'];
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);      
        var image = new Image();
        image.src = images[index],
        ctx.drawImage(image, x - 12, yAxis.bottom + 10);
      });      
    }
  }],
  data: {
    labels: labels,
    datasets: [{
      label: 'My Dataset',
      data: values,
      backgroundColor: ['red', 'blue', 'green', 'lightgray']
    }]
  },
  options: {
    responsive: true,
    layout: {
      padding: {
        bottom: 30
      }
    },
    legend: {
      display: false
    },    
    scales: {
      yAxes: [{ 
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        }   
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment