Chartjs-How do I run one of the Chart.JS examples locally via HTML?

by

0👍

There are two problems (that I can see),

  1. your code is using Utils. ..., but the javascript file is not loaded.
    Solution: replace the Utils.... code or loadthe Javascript file for it

  2. you are not adding the chart to the page.
    Solution:
    Add this code at the end of the script.

     new Chart(
     ctx,
     config
 );

Here, a cleaned version of your demo, how it could work:

  1. I remove most "unneeded" code
  2. the data is static all on the same height, but you can change this easily, by setting the property data
    const ctx = document.getElementById('myChart');
      
    const labels = [1,2,3,4,5,6,7];
    // create random Data
    const helpData1 = labels.map( _ => Math.random() * 100);
    const helpData2 = labels.map( _ => Math.random() * 100);
    const data = {
      labels: labels,
      datasets: [
          {
            label: 'Dataset 1',
            data: helpData1,
            borderColor: '#ff0000',
            backgroundColor: '#ff000088',
            order: 1
          },
          {
            label: 'Dataset 2',
            data:  helpData2,
            borderColor: '#0000ff', 
            backgroundColor:'#0000ff88',
            type: 'line',
            order: 0
          }
      ]
    };
  
   const config = {
      type: 'bar',
      data: data,
      options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart.js Combined Line/Bar Chart'
            }
          }
      },
    };
          
    new Chart(
        ctx,
        config
    );
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px">
  <canvas id="myChart"></canvas>
</div>

Leave a comment