javascript – Values ​​on each column of Chart.js

Question:

Good day. There is a problem – charts on chart.js, everything works as it should, but it was required to display the value of the column itself (value on the y-axis) above each chart column. There are several solutions in the answers on this same stackoverflow, but for the version of chart.js <2, i.e. on the latter, nothing like this does not want to run 🙁

Here I roughly threw a small diagram, if anyone has a solution – share – https://jsfiddle.net/fpsx4jy3

var densityCanvasS = document.getElementById("densityChartS");

var densityData = {	
  data: [47.1,34.05],
  backgroundColor: '#107410' 
};


var chartOptions = {
  legend: {
	  display: false,

  labels: {
            boxWidth: 10,
            fontColor: 'rgb(255, 10, 10)'
          }	  
  },
  scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
										scaleStartValue:0
                		}
            			}],
						 xAxes: [{
            			barThickness : 60
      				  }]
        }

};


var barChart = new Chart(densityCanvasS, {
  type: 'bar',
  data: {
    labels: ['Магазин 1','Магазин 2'],
    datasets: [densityData]
  },
  options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<div style='max-width:1000px;'><canvas id="densityChartS"> </canvas></div>

Answer:

Here's the example you wanted:

var densityCanvasS = document.getElementById("densityChartS");

var densityData = {	
  data: [47.1,34.05],
  backgroundColor: '#107410' 
};

var data_max = Math.max(...densityData.data) + 10;

var barChart = new Chart(densityCanvasS, {
  type: 'bar',
  data: {
    labels: ['Магазин 1','Магазин 2'],
    datasets: [densityData]
  },
  options: {
    "hover": {
      "animationDuration": 0
    },
    "animation": {
        "duration": 1,
        "onComplete": function() {
            var chartInstance = this.chart,
            ctx = chartInstance.ctx;

            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    },
    legend: {
        "display": false
    },
    tooltips: {
        "enabled": false
    },

    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          max: data_max,
          display: false,
          beginAtZero: true
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<div style='max-width:1000px;'><canvas id="densityChartS"> </canvas></div>

I also took the maximum value of the columns. Then, inside the y-axis, set the max ticks to be max value + 10 from your dataset. This ensures that the top bars on the graph will not go off the edge of the canvas, AND will always be visible on the graph.

Scroll to Top