Code icon

CSS - CHARTS

Links


    // CHART JS
    <canvas id="myChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
    


    // INITIALIZE JAVASCRIPT
    1. SETUP
    2. CONFIG
    3. RENDER = new Chart

    //SETUP
    const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    ];
    const data = {
    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],
    }]
    };

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

    //RENDER
    var myChart = new Chart(
        document.getElementById('myChart'),
        config
      );