Chartjs-Adding additional data to chart

by

0👍

You might want to use polarAreaChart.data.datasets.push({ instead of birdsData as there is no bridsData object in the chart object:

var birdsCanvas = document.getElementById("birdsChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    //data: [1200, 1700, 800, 200],
    data: [5, 10, 3, 9],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

//alert ('checking value... birdsData label 1 ' + birdsData.labels[1]);

polarAreaChart.data.datasets.push({
  label: 'label2',
  backgroundColor: 'rgba(255, 0, 0, 0.6)',
  borderColor: 'rgba(255, 0, 0, 0.6)',
  data: [9]
});
polarAreaChart.update();
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="birdsChart" width="400" height="400"></canvas>

Leave a comment