Display image on bar chart.js along with label (chartjs-plugin-datalabels)

Question

chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot

Tried custom option for toopltip but basically need to try rendering of html in the plugin data label so as image can also be added

plugins: { datalabels: { anchor: 'end', align: 'start', font: { size: 20, } } }

Display image on the bar

Expected Result :

you can use chartjs controllers to add images and also labels without using the plugin. https://www.chartjs.org/docs/latest/developers/charts.html — Toe, Jan 27 '20 at 17:07

uminder · Answer 1 · 2020-03-15T11:05:37.020

This can be achieved by combining chartjs-plugin-datalabels with chartjs-plugin-labels as follows:

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['2009', '2010', '2011', '2012'],
    datasets: [{
      label: 'My First Dataset',
      data: [25, 59, 80, 76],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: 'end',
        align  : 'start'        
      },
      labels: {
        render: 'image',
        textMargin: -60,
        images: [
          null, 
          null, 
          {
            src: 'https://i.stack.imgur.com/9EMtU.png',
            width: 20,
            height: 20
          },
          null
        ]
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>

Display image on bar chart.js along with label (chartjs-plugin-datalabels)

1 Answers1