I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.

In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.

So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.

In the picture you can see "E" above the two bars.

I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".

Thank you

I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.

In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.

So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.

In the picture you can see "E" above the two bars.

I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".

Thank you

• javascript
• charts
• chart.js
• bar-chart

• did you get any solution ? – ArigatoManga Commented Jun 22, 2019 at 2:38
• @ArigatoManga No Arigato, I didn't find any solution. I think it's not possible in chartjs. I had to use a different chart. – Shahzad Ahamad Commented Jun 22, 2019 at 16:43
• after a long try i was able to do it.. but don't know if that will be useful for you now – ArigatoManga Commented Jun 23, 2019 at 2:51
• Please answer it here, It can be helpful to others – Shahzad Ahamad Commented Jun 25, 2019 at 17:36
• How to Add an Image on Top of the Bars in Chart.js: youtube./watch?v=sfR2tLYaxxQ – hanumanDev Commented Mar 24, 2022 at 17:32

1 Answer 1

You can place images on top of individual bars using chartjs-plugin-labels.

Please have a look at the following runnable code snippet:

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'My 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: {
      labels: {
        render: 'image',
        textMargin: 10,
        images: [
          {
            src: 'https://i.sstatic/9EMtU.png',
            width: 20,
            height: 20
          },
          null, 
          {
            src: 'https://i.sstatic/9EMtU.png',
            width: 20,
            height: 20
          },
          null
        ]
      }
    },
    layout: {
      padding: {
        top: 30
      }
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 300px;
}

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