Show values on top of bars in chart.js

Please refer this Fiddle : https://jsfiddle.net/4mxhogmd/1/

I am working on chart.js If you see in fiddle, you will notice that value which is top on bar is not properly displayed in some cases(goes outside the canvas) While research I came across this link how to display data values on Chart.js

But here they used tooltip also for same cases to the text tweak inside of bars. I don't want this.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [6, 87, 56, 15, 88, 60, 12],
            backgroundColor: "#4082c4"
        }]
    },
    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: {
                    display: false,
                    beginAtZero:true
                }
            }],
            xAxes: [{
                gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

What I want is to show value on top only, for all cases.

I pulled out the data from being defined inside of myChart that way I could pull out the max value from the dataset. Then inside of the yAxes you can set the max ticks to be the max value + 10 from your data set. This ensures that the top bars in the graph will not go off the edge of the canvas and not display their value.

var ctx = document.getElementById("myChart");
debugger;
var data = {
  labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
  datasets: [{
    data: [150, 87, 56, 50, 88, 60, 45],
    backgroundColor: "#4082c4"
  }]
}
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  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: Math.max(...data.datasets[0].data) + 10,
          display: false,
          beginAtZero: true
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>

How To Show Values On Top Of Bars in Chart Js, Hi Guys, in this post I would share how to show values on top of bars in Chart.js. My project used library Chart.JS to display a Chart from data  Hi Guys, in this post I would share how to show values on top of bars in Chart.js.My project used library Chart.JS to display a Chart from data sets. Previously, I have made a Chart in the form of a bar like a picture below.

The fastest way I found to do this was to use this plugin: https://github.com/chartjs/chartjs-plugin-datalabels

Labels can be added to your charts simply by importing the plugin to the js file e.g.:

import 'chartjs-plugin-datalabels'

And if you want to apply it values on top (globally), simply set these options in your code:

Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';

More options can be found here: https://chartjs-plugin-datalabels.netlify.com/options.html

Bar · Chart.js documentation, A bar chart provides a way of showing data values represented as vertical bars. Note: for negative bars in vertical chart, top and bottom are flipped. Same goes​  Show values on top of bars in a barChart. I have a bar chart with ordinal scale for the x-axis. I want to display the y-values on the top of each bar or in the bottom of each bar. It would be also acceptable to display the y-values when one hovers over the bar.

Here is a more robust solution that will display the datapoint value inside the bar for cases where the axis height is close to the bar height. In other words, this will display the value above the bar and/or below the bar if the text will extend beyond the canvas visible area.

Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          ctx.fillText(dataset.data[i], model.x, yPos);
        }
      });
    }
  }
});

You can enable your chart to use the plugin by adding the below property in your chart options.

showDatapoints: true,

How to add labels on top of each bar in a bar chart · Issue #605 , Hello everyone, I want to add labels at the top of each bar in my bar chart. But I have no idea how to use it and how to display the data without having a context. and how to display the data without having a context or chart object (like in Chart.js). How to set '%' (eg., 5.5%) beside the value on each bar  Bar. A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

This worked in my case.(plugins section below)

options: {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }

Happy Coding.

Show values on bar chart without tooltip · Issue #74 · jerairrest/react , Is there any way to show the value above bar by default? Thanks a who came up with the solution in the Chartjs repo. chartjs/Chart.js#1861. Here's a quick solution for the inline values in a bar chart: Chart.js --> Line 162 :

You can consider plugin which show data value on top of each bar. plugins: {

afterDatasetsDraw: function (context, easing) {
 var ctx = context.chart.ctx;
   context.data.datasets.forEach(function (dataset) {
     for (var i = 0; i < dataset.data.length; i++) {
        if (dataset.data[i] != 0) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            var textY = model.y + (dataset.type == "line" ? -3 : 15); 
              ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'start';
              ctx.textBaseline = 'middle';
              ctx.fillStyle = dataset.type == "line" ? "black" : "black";
              ctx.save();
              ctx.translate(model.x, textY-15);
              ctx.rotate(4.7);
              ctx.fillText(dataset.data[i], 0, 0);
              ctx.restore();
             }
           }
         });
       }
    }

live code: Link

How to show values on chart bars?, i want to display bar chart with the values on top of each bar.I'm using angulr Please use chartjs-plugin-datalabels (the plugin requires Chart.js 2.7.0 or later). I want to make stacked bar chart that shows difference in values for each bar e.g. there were some values and new values are either bigger or smaller and I want to show it as a green part stacked on what has been before and empty border showing decrese in value. Something like this. (numbers in the pic are random)

How to show data values on top of each bar in chart.js, StudyZone4U.com - Chart.js | show data values on top of each bar This is an example of displaying data value on top… I'd like to put values over a simple bar/column chart in excel. A similar question was asked for R, and I know how to get my data into R, but not how to make the charts. What I'm doing is very simple seems easier to do in Excel than learning how to do it in R.

Chart.js the value on the bar graph does not disappear when , I have a line chart and a bar chart where the values are visible. The problem is that if I unselect an argument, only the bar disappears but not its  chartjs / Chart.js. Sign up How to show data values or index labels in ChartJs (Latest Version) #2962. arunnambissan opened this issue Jul 13, 2016 · 1 comment

Getting Started With Chart.js: Line and Bar Charts, In the first introductory Chart.js tutorial of the series, you learned how to install and use Line charts are useful when you want to show the changes in value of a given You can set its value to top , left , bottom , or right . I have a report which contain one dimension and two measure. I am using bar chart to display both the measure data like below I like to display the % on top of the each bar . if you see the first bar then I have my first measure value is 38 and second measure value is 452 now like to display 38/452 = 8.41%

Comments
  • If you add a second data object and then you filter the data by the first data object, the values from the second data object will still be visible. Is there a solution to fix this issue?
  • This is not a proper answer. As if value is too large this will not work. But still by making some changes, I can achieve what I want. Many Thanks
  • @Kenny and others: check DavidX's answer. It presents an elegant plugin that would do the job.
  • This is a fabulous answer! Check this out if you're looking to aggregate stacked charts, github.com/chartjs/chartjs-plugin-datalabels/issues/16
  • I don't want this. I want value to be displayed on Top only, in all cases. Anyway Thanks
  • Does this works for other charts? doughnut, radar.. etc. Tried using it but it doesn't work.
  • and if you factor in the dataset loop variable (function(dataset, eachLoopIndex)) in the fillText, if the column chart is a stacked version, the two values on a same column wont intersect, like so: ctx.fillText(dataset.data[i], model.x, y_pos-eachLegendIndex*10);
  • How to increase the size of text visible above bar?
  • WARNING: afterDraw() callback is triggered many times by back-end engine during canvas and chart drawings for various events such as page reload, display orientation changes, canvas onclick, etc. Put a console.log() to verify it. If your operation is resource-expensive, you may want to avoid it as afterDraw() callback.