CODEWITHSUNDEEP
javascriptjquerychartschart.js
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Add Labels to Chart.js Bar Chart

I am trying to add labels to my bar chart. See the JS fiddle and code below. How would I change my code to add labels?

http://jsfiddle.net/amwmedia/8kqvyhqv/

var myNewChart;
var data = [
    {
    value: 30,
    label: "hello",
    color: "#F7464A"
  }, {
    value: 50,
    color: "#E2EAE9"
  }, {
    value: 100,
    color: "#D4CCC5"
  }, {
    value: 40,
    color: "#949FB1"
  }, {
    value: 100,
    color: "#4D5360"
  },

];


var options = {
  animation: true,
  animationEasing: 'easeInOutQuart',
  animationSteps: 80,
  multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

};


var ctx = document.getElementById("myChart")
                                    .getContext("2d");

myNewChart = new Chart(ctx).Doughnut(data, options);

Upvotes: 1

Views: 1439

Answers (1)

Craig Mason
Craig Mason

Reputation: 168

I noticed your jsfiddle is using chart.js version 1. My answer uses version 2, as that is all I could find documentation for.

Looks like all you need to do is put labels in the data object:

var data = {
  labels: [
   "label1",
   "label2",
   "label3",
   "label4",
   "label5"
    ],
  datasets: [
   {
    data: [
     30,
     50,
     100,
     40,
     100
     ],
    backgroundColor:[
     '#F7464A',
     '#E2EAE9',
     '#D4CCC5',
     '#949FB1',
     '#4D5360'
    ]
   }]
};

See fiddle. (this is using Chart.js 2.0)

Upvotes: 2

Related Questions