Chartjs-Javascript chart display labels

by

1👍

✅

Here is what you need : http://jsfiddle.net/ap25v5j1/

For your 3 points :

  1. Use this :

labels: ["0","2015", "2016", "2017", "2018", "2019", "2020"],

and add null in data

  1. use pointDot: false, to remove circles

  2. Add labels in your datasets :

datasets: [{
    label: "Budget",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#00f",
    pointHighlightFill: "#000",
    data: [180, 390]
  }, {
    label: "Depense",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#0f0",
    data: [180, 210, 405, 980, 1200, 1550]
  }, ]

Then add following in your options :

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><div class=\"legendSpan\" style=\"border-color:<%=datasets[i].strokeColor%>;\"/></div><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

Then generate legend :

var chart = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(chart).Line(data, options);
var legend = lineChart.generateLegend();
$('#myDiv').html(legend); //jQuery

or 

document.getElementById('myDiv').innerHTML = legend; //js

Where #myDiv is a div in your html below your chart

<div id="myDiv"></div>

And you will need to style it :

.legendSpan {
  width: 40px;
  height: 0px;
  border: 2px red solid;
  display: inline-block; 
  margin: 5px;
}

.line-legend li{
  display: inline;
  padding: 5px;
}

var data = {
  labels: ["0", "2015", "2016", "2017", "2018", "2019", "2020"],
  datasets: [{
    label: "Budget",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#00f",
    pointHighlightFill: "#000",
    data: [null, 180, 390]
  }, {
    label: "Depense",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#0f0",
    data: [null, 180, 210, 405, 980, 1200, 1550]
  }, ]
}
var options = {
  pointDot: false,
  bezierCurve: false,
  scaleFontSize: 13,
  scaleShowVerticalLines: false,
  legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><div class=\"legendSpan\" style=\"border-color:<%=datasets[i].strokeColor%>;\"/></div><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};

var chart = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(chart).Line(data, options);
var legend = lineChart.generateLegend();
document.getElementById('myDiv').innerHTML = legend;
.legendSpan {
  width: 40px;
  height: 0px;
  border: 2px red solid;
  display: inline-block;
  margin: 5px;
}
.line-legend li {
  display: inline;
  padding: 5px;
}
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="canvas" width="420" height="350"></canvas>
<div id="myDiv"></div>

2👍

To start from 2015

var data = {
            labels : ["0","2015", "2016", "2017", "2018", "2019", "2020"],
            datasets :
                [
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "blue",
                        data : [null,180, 390]
                    },
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "green",
                        data : [null,180, 210, 405, 980, 1200, 1550]
                    },
                ]
            }

Use pointDot:false in option to remove circle on every point

  var options = {

           pointDot: false
}

For show the label use

In html file

<canvas id="canvas" width="420" height="350"></canvas>
<div id="legend" class="chart-legend"></div>

In JS

var data = {
            labels : ["0","2015", "2016", "2017", "2018", "2019", "2020"],
            datasets :
                [
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "blue",
                        data : [null,180, 390],
             label: "Budget"
                    },
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "green",
                        data : [null,180, 210, 405, 980, 1200, 1550],
             label: "Depences"
                    },
                ]
            }
    var options = {
                bezierCurve : false,
           pointDot: false,
                scaleFontSize: 13,
          tooltipTemplate: "<%= value %>%",
                scaleShowVerticalLines: false
    };

    var chart = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(chart).Line(data, options);

document.getElementById('legend').innerHTML = myChart.generateLegend();

Style in CSS

.chart-legend li span{
    display: inline-block;
    width: 25px;
    height: 4px;
    margin-right: 5px;
}

0👍

Since 1 and 2 has already been answered may I ask why dont you use the newest 2.1.6 version?

It is better and easier to use

http://www.chartjs.org/docs/

For example the circle problem can be solved there by changing this

Chart.defaults.global.elements.point.pointStyle = 'line'

and most important the information is displayed automatically and described in the Legend Configuration topic e.g.

Chart.defaults.global.legend.position = 'bottom'

From what I remember in the 1.x versions you have to create the info yourself

Leave a comment