Chartjs-Change label text of react chartjs into image

by

1👍

This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code. In your case, you can use the afterDraw hook to draw images (icons) instead of tick labels directly on the canvas using CanvasRenderingContext2D.

The plugin would be defined as follows:

const plugins = [{
  afterDraw: chart => {
    let ctx = chart.chart.ctx; 
    ctx.save();
    let xAxis = chart.scales['x-axis-0'];
    let yAxis = chart.scales['y-axis-0'];
    xAxis.ticks.forEach((value, index) => {  
      let x = xAxis.getPixelForTick(index);      
      let image = new Image();
      image.src = ..., // provide the image URL
      ctx.drawImage(image, x - 12, yAxis.bottom + 10);
    });  
    ctx.restore();    
}];

Then tell the Bar element about the plugin to be used.

<Bar
  ... 
  plugins={plugins}
/>

Also add some extra space at the bottom of the chart by defining layout.padding.bottom inside the chart options, otherwise the text won’t be visible.

layout: {
  padding: {
    bottom: 60
  }
},

Leave a comment