0
<!DOCTYPE html>
<html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Chart.js demo</title>
  <canvas id="myChart" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
  <h1>Chart.js Sample</h1>
  <script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
            }]
          },
  </script>
</body>
</html>

not able to display bar chart with above code. could some one help what is the issue with it? i am trying to use chart.js library as source for displaying charts not able to display bar chart with above code. could some one help what is the issue with it? i am trying to use chart.js library as source for displaying charts

alessandrio
  • 4,282
  • 2
  • 29
  • 40
Krishna Reddy
  • 1
  • 1

1 Answers1

0

Some braces are not closed in your script, And the chart.js version referenced is very old. The chart was displayed when I corrected your script and updated chart.js to the current version 2.5.0.

<head>
  <meta charset="utf-8" />
  <title>Chart.js demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="text/javascript"></script>
</head>

<body>
  <h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>

  <script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
            ],
            borderColor: [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
            ],
            borderWidth: 1
          }
        ]
      }
    });
  </script>
</body>
Parag
  • 400
  • 1
  • 3
  • 11
  • thank you so much parag it did work, could please help me how can i update the graph size its, not working properly when i change canvas properties – Krishna Reddy May 21 '17 at 04:12
  • refer this answer http://stackoverflow.com/questions/37621020/setting-width-and-height – Parag May 21 '17 at 04:36
  • thanks again parag, i want to remove the grid lines from the graph with below code var myChart = new Chart(ctx1, { type: 'bar', data: data , scales: { xAxes: [{ gridLines: { display:false } }], yAxes: [{ gridLines: { display:false } }] } }); but its not working, is it because of version issues? – Krishna Reddy May 21 '17 at 05:20