how to display data values on Chart.js

I would like to ask if it's possible using Chart.js to display data values? I want to print the graph.

Thanks for any advice.

Late edit: there is an official plugin for Chart.js 2.7.0+ to do this: https://github.com/chartjs/chartjs-plugin-datalabels

Original answer:

You can loop through the points / bars onAnimationComplete and display the values


Preview


HTML

<canvas id="myChart1" height="300" width="500"></canvas>
<canvas id="myChart2" height="300" width="500"></canvas>

Script

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [60, 80, 81, 56, 55, 40]
        }
    ]
};

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, points.y - 10);
            });
        })
    }
});

var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                ctx.fillText(bar.value, bar.x, bar.y - 5);
            });
        })
    }
});

Fiddle - http://jsfiddle.net/uh9vw0ao/

Bar · Chart.js documentation, 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  Simple data visualization with HTML5 form and Chart.js In recent, data visualization becomes more important because it presents a better conversation between customer and business. The company can even through the business intelligence tools to transfer their data to information to drive values.

Here is an updated version for Chart.js 2.3

Sep 23, 2016: Edited my code to work with v2.3 for both line/bar type.

Important: Even if you don't need the animation, don't change the duration option to 0, otherwise you will get chartInstance.controller is undefined error.

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",
                data: [60, 80, 81, 56, 55, 40]
            }
        ]
    };

var opt = {
    events: false,
    tooltips: {
        enabled: false
    },
    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);
                });
            });
        }
    }
};
 var ctx = document.getElementById("Chart1"),
     myLineChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: opt
     });
<canvas id="myChart1" height="300" width="500"></canvas>

Updating Charts · Chart.js documentation, It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and title: { display: true, text: 'Chart.js' }, scales: { xAxes: [{ display: true }], yAxes:​  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

This animation option works for 2.1.3 on a bar chart.

Slightly modified @Ross answer

animation: {
duration: 0,
onComplete: function () {
    // render the value of the chart above the bar
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = this.chart.config.options.defaultFontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.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;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
        }
    });
}}

How To Show Values On Top Of Bars in Chart Js, JS to display a Chart from data sets. Previously, I have made a Chart in the form of a bar like a picture below. But on that Chart, I don't know the  I have a bar chart and I would like to display the data value inside the bar, without the need to roll the mouse over. I also have a line chart, with big point size, and I would like to display it's value inside the point. So, what I want is a chart like that: Is there a way to do that? 👍

Based on @Ross's answer answer for Chart.js 2.0 and up, I had to include a little tweak to guard against the case when the bar's heights comes too chose to the scale boundary.

The animation attribute of the bar chart's option:

animation: {
            duration: 500,
            easing: "easeOutQuart",
            onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.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,
                            scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                        ctx.fillStyle = '#444';
                        var y_pos = model.y - 5;
                        // Make sure data value does not get overflown and hidden
                        // when the bar's value is too close to max value of scale
                        // Note: The y value is reverse, it counts from top down
                        if ((scale_max - model.y) / scale_max >= 0.93)
                            y_pos = model.y + 20; 
                        ctx.fillText(dataset.data[i], model.x, y_pos);
                    }
                });               
            }
        }

How to show data values or index labels in ChartJs (Latest Version , I have a line chart and a bar chart where the values are visible. new Chart(ctx, { type: 'bar', data: { labels: nomi, datasets: [{ label: 'PP  Display values in bar chart Here's a quick solution for the inline values in a bar chart: Chart.js --> Line 162 : and show data on the top of bar not through

I think the nicest option to do this in chartJS v2.x is by using a plugin, so you don't have a large block of code in the options. In addition, it prevents the data from disappearing when hovering over a bar.

I.e. simply use this code, which registers a plugin that adds the text after the chart is drawn.

Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;

        // 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';

        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;
                ctx.fillText(dataset.data[i], model.x, model.y - 2);
            }
        });
  }
});

Chart.js the value on the bar graph does not disappear when , Chart.js is a powerful data visualization library, but I know from experience that it can be tricky to just get started and get a graph to show up. size of the data points, the radius of each element is set in relation to its value. To work with Chart.js, custom scale types must implement the following interface. Optionally, the following methods may also be overwritten, but an implementation is already provided by the Chart.Scale base class. The Core.Scale base class also has some utility functions that you may find useful.

10 Chart.js example charts to get you started, 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). It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options. Adding and removing data is supported by changing the data array. To add data, just add data into the data array as seen in this example.

How to show values on chart bars?, Plugin for Chart.js to display percentage, value or label in Pie or Doughnut. new Chart(ctx, { type: type, data: data, options: { plugins: { labels: { // render 'label',​  This function can also accept a third parameter that is the data object passed to the chart. Filter Callback. Allows filtering of tooltip items. Must implement at minimum a function that can be passed to Array.prototype.filter. This function can also accept a second parameter that is the data object passed to the chart. Tooltip Callbacks

chartjs-plugin-labels, I have created a web page in a html file. I have used the chart.js plugin to display a bar chart. However, only the first value of the array displays  Chart.js is a popular open source library that helps us to plot data in web applications. It is highly customizable, but configuring all of its options remains a challenge for some people.

Comments
  • what have you done so far?
  • my graph is working perfectly ..i just want to display data values in my LineBar chart.. then i can print my graphs.. because now i can display data values just by mouse event
  • What if i had two line chart in the same Chart ?
  • With the above it would still show the values, but you might see an overlap if the points are too close to each other. But you can always put in logic to change the value position. Like for instance - jsfiddle.net/hh719qex if you have a color printer. If you have only 2 series you could also do stuff like setting the textBaseline different IF the 2 points are 2 close to each other.
  • Can you add styles to this data above the points? Maybe use the styles from the generic chartjs tooltips?
  • this was for the v1.0.2 how to do this for v2.1.3?The object structure is different in the later version.
  • @potatopeelings I have used the onComplete callback here but it also fires when the mouseover is on the bar's of the chart causing the number to blink due to redraw.Would that be same if onAnimationComplete? I am unable to use this callback with my existing chart code (see var chartBar at the bottom pastebin.com/tT7yTkGh)
  • I get "Uncaught TypeError: Cannot read property '0' of undefined" when trying this on bar graphs. Do bars use something other than "dataset.metaData[i]._model"?
  • It's actually var model = dataset._meta[i].data[0]._model;
  • That's also not the full truth. I still get exceptions. Will try to figure it out.
  • var model = dataset._meta[0].data[i]._model; actually.
  • Looks like it is not as simple as _meta[0]. In fact the _meta object isn't an array, it has a single element with a number as the key. I can't figure out the rationale behind what the number will be so I just take the first element by looking in the keys list, like this : var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
  • I also had to set hover: {animationDuration: 0} to stop the labels animating away on hover