Chartjs-Add data dynamically to chart

by

1👍

✅

Yes it is possible, although you are using a verry outdated version of the lib you might want to consider updating it

V2:

const chart = new Chart(document.getElementById("bar-chart-horizontal"), {
  type: 'horizontalBar',
  data: {

    //here I want all elements of arrayinut
    labels: [],
    datasets: [{
      label: "Number of fruits",
      //here I need to create arrayinput.length differnt colors but thats not that important now           
      backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],

      //here I want the elements of number
      data: []
    }]
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'Fruits'
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },

  }
});

const addFruits = () => {
  chart.data.labels = ["apple", "banana", "pineapple", "cherry", "peach"];
  chart.data.datasets[0].data =  [5, 10, 3, 8, 1];
  chart.update();
}

addFruits()
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chartcontainer">
  <canvas id="bar-chart-horizontal"></canvas>
</div>

V3:

const chart = new Chart(document.getElementById("bar-chart-horizontal"), {
  type: 'bar',
  data: {

    //here I want all elements of arrayinut
    labels: [],
    datasets: [{
      label: "Number of fruits",
      //here I need to create arrayinput.length differnt colors but thats not that important now           
      backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],

      //here I want the elements of number
      data: []
    }]
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Fruits'
      },
    },
    scales: {
      y: {
        beginAtZero: false
      }
    },

  }
});

const addFruits = () => {
  chart.data.labels = ["apple", "banana", "pineapple", "cherry", "peach"];
  chart.data.datasets[0].data = [5, 10, 3, 8, 1];
  chart.update();
}

addFruits()
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<div class="chartcontainer">
  <canvas id="bar-chart-horizontal"></canvas>
</div>

1👍

You can directly use arrayinput inside the function, same for arraynumber.

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chartcontainer">
    <canvas id="bar-chart-horizontal"></canvas>
</div>

Javascript:

var arrayinput = ["apple", "banana", "pineapple", "cherry","peach"] ;
var arraynumber = ["5", "10", "3", "8", "1"];

var number=[];
for(var i=0;i<arrayinput.length;i++){
     number[i] = parseInt(arraynumber[i]);
}

new Chart(document.getElementById("bar-chart-horizontal"), {
    type: 'horizontalBar',
    data: {
     
//here I want all elements of arrayinut
      labels: arrayinput,
      datasets: [
        {
          label: "Number of fruits",
//here I need to create arrayinput.length differnt colors but thats not that important now           
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],

  //here I want the elements of number
          data: arraynumber
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Fruits'
      },
        scales: {
           xAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
        },
     
    }
});

For using different colors for the chart, you can roughly estimate the maximum number of entries in arrayinput and generate the color array of that size. For example: If you know that entries in the arrayinput will never exceed 1000, you can make an array of 1000 colors, and can make a new array of out of this as per your requirement.
Like this:

var backgroundColor = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
var colorArray = [];

//Max value of arrayinput is say 5

for(var i=0; i<arrayinput.length; i++) {
    colorArray.push(backgroundColor[i]);
}

Use this colorArray in the function directly same like arrayinput.
Live Demo Here: https://codepen.io/Hitesh_Vadher/pen/vYZmdMZ

Leave a comment