Display Data Label (Legend) in Line-Chart Using Chartjs

How to display data values on Chart.js

There is an official plugin for Chart.js 2.7.0+ to do this: Datalabels

Otherwise, you can loop through the points / bars onAnimationComplete and display the values

Preview

Sample Image

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/

Displaying mixed types of legends (bar and lines) with Chartjs

I think the only way is to customize the legend (see http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends).

An example here below:

var ctx = document.getElementById('myChart');var config = { type: 'bar',  options: {    legendCallback: function(chart) {      var text = [];      text.push('<ul class="' + chart.id + '-legend">');      var data = chart.data;      var datasets = data.datasets;      if (datasets.length) {        for (var i = 0; i < datasets.length; ++i) {         text.push('<li>');         if (datasets[i].type=='line') {           text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');          } else {           text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');          }          text.push(datasets[i].label);          text.push('</li>');        }      }      text.push('</ul>');      return text.join('');    },    legend: {      display: false,    },    scales: {      xAxes: [{        type: "category",        id: "axis-bar",      }, {        type: "time",        id: "axis-time",        display: false,      }, ],    },  },  data: {    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],    datasets: [{      label: "my dataset 1",      type: "line",      backgroundColor: "#0000FF",      borderColor: "#0000FF",      borderWidth: 1,      fill: false,      xAxisID: "axis-time",      data: [{x:1*3600,y:2124},{x:1.5*3600,y:12124},{x:2*3600,y:1636},{x:2.5*3600,y:11636},{x:3*3600,y:1057},{x:3.5*3600,y:11057},{x:4*3600,y:9433},{x:4.5*3600,y:19433},{x:5*3600,y:4512},{x:5.5*3600,y:4512},{x:6*3600,y:3581},{x:6.5*3600,y:3581},{x:7*3600,y:53},{x:7.5*3600,y:53},]    },{      label: "my dataset 2",      type: "bar",      backgroundColor: "#ff0000",      borderColor: "#ff0000",      borderWidth: 1,      fill: true,      xAxisID: "axis-bar",      data: [21242, 16360, 10577, 94337, 45312, 35581, 53]    }]  },
};
var myChart = new Chart(ctx, config);var legend = myChart.generateLegend();document.getElementById("legend").innerHTML = legend;

body {  font-family: 'Arial';}
.container {  margin: 15px auto;}
#chart {  float: left;  width: 70%;}
#legend {  float: right;}
[class$="-legend"] {  list-style: none;  cursor: pointer;  padding-left: 0;}
[class$="-legend"] li {  display: block;  padding: 0 5px;}
[class$="-legend"] li.hidden {  text-decoration: line-through;}
[class$="-legend"] li span {  display: inline-block;  margin-right: 10px;  width: 20px;}
[class$="-legend"] li span.bar {  height: 10px;}
[class$="-legend"] li span.line {  height: 1px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script><div id="legend"></div><canvas id="myChart" width="400" height="200"></canvas>

Custom Legend with ChartJS v2.0

There is a legendCallback function:

legendCallback Function function (chart) { }

Function to generate a legend. Receives the chart object to generate a legend from. Default
implementation returns an HTML string.

Details can be found here

see this issue for the default legend callback:

legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul class="' + chart.id + '-legend">'); 
    for (var i = 0; i < chart.data.datasets.length; i++) { 
        text.push('<li><span style="background-color:' + 
                   chart.data.datasets[i].backgroundColor + 
                   '"></span>'); 
        if (chart.data.datasets[i].label) { 
            text.push(chart.data.datasets[i].label); 
        } 
        text.push('</li>'); 
    } 
    text.push('</ul>'); 
    return text.join(''); 
}

Display Data Label (Legend) in Line-Chart Using Chartjs

How to display data values on Chart.js

Displaying mixed types of legends (bar and lines) with Chartjs

Custom Legend with ChartJS v2.0

Related Topics

Leave a reply