CODEWITHSUNDEEP
javascriptchartschart.jsbar-chart
Shahzad Ahamad
Shahzad Ahamad

Reputation: 829

Adding image on the top of bar in chartjs

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.

enter image description here

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

Upvotes: 3

Views: 5982

Answers (1)

uminder
uminder

Reputation: 26150

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.net/9EMtU.png',
            width: 20,
            height: 20
          },
          null, 
          {
            src: 'https://i.sstatic.net/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.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>

Upvotes: 5

Related Questions