[Chartjs]-Chart.js add icon at the top of bar

by

1👍

You could try this.
but it’s not always show icon,only when mouseover bar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/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>
<script>
    new Chart(document.getElementById('myChart'), {
      type: 'bar',
      data: {
        labels: ['A', 'B',],
        datasets: [{
          label: 'My Dataset',
        data: [76],
          fill: false,
          backgroundColor: ['rgba(255, 99, 132, 0.2)'],
          borderColor: ['rgb(255, 99, 132)'],
          borderWidth: 1
        }]
      },
      options: {
        tooltipTemplate: "<%= value %>",
        showTooltips: true,
        onAnimationComplete: function() {
          this.showTooltip(this.datasets[0].points, true);
        },
      tooltipEvents: [],
        plugins: {
          labels: {
            render: 'image',
            textMargin: 10,
            images: [
              {
                src: 'https://i.stack.imgur.com/9EMtU.png',
                width: 20,
                height: 20
              },
              null, 
            ]
          }
        },
      }
    });
</script>

0👍

Simonbrunel gives a solution: link and fiddle https://jsfiddle.net/simonbrunel/y1ry2cvb/.

If you want to use icons in chart, you must give a fontFamily, in my case i use icons from FontAwesome

options: {
  scales: {
    xAxes: {
      ticks: { 
        fontFamily: 'FontAwesome',
      }
    }
  }
}

and after that, im using unicod: \uf071 –>> exclamation-triangle

Leave a comment