Display value after the bar using chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Display value after the bar using chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script type="text/javascript" src="https://chartjs-plugin-datalabels.netlify.com/chartjs-plugin-datalabels.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w  ww  .j  a v a 2  s  . c  o m*/
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
  type: 'horizontalBar',
  data: {
    labels: ['HTTPS Pages', 'HTTP Pages'],
    datasets: [{
      data: [0, 430],
      backgroundColor: [
        'rgb(81, 170, 120)',
        'rgb(198, 222, 208)'
      ]
    }]
  },
  options: {
    showAllTooltips: true,
    tooltips: {
      enabled: true,
      displayColors: false,
      yPadding: 20,
      xPadding: 30,
      caretSize: 10,
      backgroundColor: 'rgba(240, 240, 240, 1)',
      bodyFontSize: 16,
      bodyFontColor: 'rgb(50, 50, 50)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 1,
      cornerRadius: 0,
      yAlign: 'bottom',
      xAlign: 'center',
      position: 'custom',
      custom: function(tooltip) {
        if (!tooltip) return;
        // disable displaying the color box;
        tooltip.displayColors = false;
      },
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.yLabel + " : " + tooltipItem.xLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;
        }
      }
    },
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        },
        gridLines: {
          display: false
        },
      }],
      xAxes: [{
        ticks: {
          stepSize: 100
        }
      }],
    },
    plugins: {
      datalabels: {
        align: 'end',
        anchor: 'end',
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderRadius: 4,
        color: 'white',
        formatter: Math.round
      }
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="https_http" width="500"></canvas>  
   </body>
</html>

Related Tutorials