Chartjs-How to incorporate chart.js in jsp file

by

1👍

✅

There are different problems in your code.

  1. The referenced Chart.js library does not exist. Instead of ...Chart.min.js, write ...chart.min.js (lowercase).
  2. Define your custom JS code in a function and execute it only once the body and its canvas are fully loaded (<body onload="drawChart()">).

Please take a look at below runnable HTML code, it should run similarly with JSP.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

  <script type="text/javascript">
    function drawChart() {
      var stars = [135850, 52122, 148825, 16939, 9763];
      var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
      new Chart('myChart', {
        type: 'bar',
        data: {
          labels: frameworks,
          datasets: [{
            label: 'Github Stars',
            data: stars
          }]
        },
      });
    }
  </script>
</head>

<body onload="drawChart()">
  <canvas id="myChart" width="800" height="400"></canvas>
</body>

</html>

Leave a comment