Chartjs-How to display a barchart in chart.js?

by

0👍

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: 'horizontalBar',
  data: {
   labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
   datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
   }]
},
 options: {
  scales: {
    xAxes: [{
     stacked: true
    }],
    yAxes: [{
     stacked: true
    }]
   }
 }
});
   
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

you can pass data into array as this:

data: {
   labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
   datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
   }]

datasets and then data

this suggests a method to convert your data into this pattern: Data with pair X and Y values

hope this will help you.

0👍

You are probably looking for something like this:

new Chart(document.getElementById("myChart"),
{
  type: "horizontalBar",
  data: {
    labels: [
      "2016-12-25",
      "2016-12-26"
    ],
    datasets: [
      {
        label: "My First Dataset",
        data: [
          20,
          10
        ],
        fill: false,
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
          "rgb(255, 99, 132)",
          "rgb(255, 159, 64)"
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
   
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

0👍

To expand on the other answer, you can use map to convert a single object into something to graph. You just have to separate the x-values (“labels”) and the y-values (“data”).

var toGraph = [{
  x: '2016-12-25',
  y: 20
}, {
  x: '2016-12-26',
  y: 10
}];

new Chart(document.getElementById("myChart"), {
  "type": "horizontalBar",
  "data": {
    "labels": toGraph.map(p => p.x),
    "datasets": [{
      "label": "My First Dataset",
      "data": toGraph.map(p => p.y),
      "fill": true,
      "backgroundColor": "blue"
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>

<body>
  <canvas id="myChart" width="400" height="400"></canvas>
</body>

</html>

0👍

Below is your code fixed

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

JS

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    datasets: [
      {
        label: "2016-12-25",
        data: [{ x: "2016-12-25", y: 20 }],
        backgroundColor: "#D6E9C6"
      },
      {
        label: "2016-12-26",
        data: [{ x: "2016-12-26", y: 10 }],
        backgroundColor: "#FAEBCC"
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  }
});

OUTPUT

enter image description here

Leave a comment