[Chartjs]-Alternating bars in bar chart in chart.js are not labelled

by

2👍

✅

You are referencing a property des of your data object which doesn’t exists and concatenate it with a string. So if you remove the + data[i].des, your labels should be back to normal. There are other small issues in your code, e.g. the var des = []; is never used.

I’ve simplified your code and directly added the data fetched via ajax:

data = [{
  "playerid": "Thane ",
  "score": "10",
  "score1": "15"
}, {
  "playerid": "Dombivli ",
  "score": "20",
  "score1": "25"
}, {
  "playerid": "Byculla",
  "score": "25",
  "score1": "5"
}, {
  "playerid": "CST",
  "score": "20",
  "score1": "2"
}, {
  "playerid": "mumbai cen",
  "score": "25",
  "score1": "4"
}]
var player = [], score = [], score1 = [];

for (var i in data) {
  player.push(data[i].playerid); // data[i].des doesn't exist
  score.push(data[i].score);
  score1.push(data[i].score1);
}

var densitydata = {
  label: 'Player Score',
  backgroundColor: 'rgba(200, 200, 200, 0.75)',
  borderColor: 'rgba(200, 200, 200, 0.75)',
  hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  hoverBorderColor: 'rgba(200, 200, 200, 1)',
  data: score
}

var gravitydata = {
  label: 'Player Score',
  backgroundColor: 'rgba(230, 230, 230, 0.75)',
  borderColor: 'rgba(200, 200, 200, 0.75)',
  hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  hoverBorderColor: 'rgba(200, 200, 200, 1)',
  data: score1
}

var chartdata = {
  labels: player,
  datasets: [densitydata, gravitydata]
};

var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
  type: 'bar',
  data: chartdata
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="mycanvas" width="100" height="100"></canvas>

Leave a comment