Chartjs-Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar

by

0👍

You could get rid of chartjs-plugin-labels and directly use the Plugin Core API. It offers a range of hooks that can be used for performing custom code. You can for example use the afterDraw hook to draw the images through CanvasRenderingContext2D.drawImage().

afterDraw: chart => {
  let ctx = chart.chart.ctx;
  let xAxis = chart.scales['x-axis-0'];
  let yAxis = chart.scales['y-axis-0'];
  xAxis.ticks.forEach((value, index) => {
    let sum = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).reduce((sum, ds) => sum + ds.data[index], 0);
    let x = xAxis.getPixelForTick(index);
    let y = yAxis.getPixelForValue(sum);
    let image = new Image();
    image.src = images[index];
    ctx.drawImage(image, x - 12, y - 25);
  });
}

To make sure that the top located image does not overlap the legend, the following code should be invoked prior to create the chart.

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 25;
};

Please take a look at below runnable code and see how it works.

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'];

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 25;
};

new Chart("canvas", {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {      
      let ctx = chart.chart.ctx; 
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {  
        let sum = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).reduce((sum, ds) => sum + ds.data[index], 0);
        let x = xAxis.getPixelForTick(index);      
        let y = yAxis.getPixelForValue(sum); 
        let image = new Image();
        image.src = images[index];
        ctx.drawImage(image, x - 12, y - 25);
      });      
    }
  }],
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
      label: 'X',
      backgroundColor: "rgba(220,220,220,0.5)",
      data: [50, 40, 23, 45]
    }, {
      label: 'Y',
      backgroundColor: "rgba(151,187,205,0.5)",
      data: [50, 40, 78, 23]
    }, {
      label: 'Z',
      backgroundColor: "rgba(82,154,190,0.5)",
      data: [50, 67, 78, 23]
    }]
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>

Leave a comment