CODEWITHSUNDEEP
chart.jschart.js3
david
david

Reputation: 1077

Chart.js coming up as blank

I'm using chart.js in a plain JavaScript page and the chart is coming up as blank. I am not getting any errors in the Google Chrome console. Below is the code I am using

<!DOCTYPE html>
<html lang="en">
<head th:replace="fragments/header :: head('Home')"></head>
<body>
    <header th:replace="fragments/header :: header"> </header>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container">
        <div>
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>
    </div>

    <script>
    const labels = [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
        ];
        const chartData = {
          labels: labels,
          datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
          }]
        };
        
        const config = {
                  type: 'line',
                  chartData,
                  options: {}
                };
        
    
      var myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>

    <!-- Bootstrap core JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
</body>

Can chart.js be using with plain JavaScript? Is there anything wrong with the code I am using?

Upvotes: 2

Views: 3552

Answers (1)

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

Please assign data key in config to assign chartdata

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const chartData = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'line',
  data: chartData,
  options: {}
};


var myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart" width="200" height="200"></canvas>
  </div>
</div>

Upvotes: 2

Related Questions