Ask Question Sign In Sign Up

How to run chart.js samples using source code?

Member

by raven_corwin , in category: Javascript , 10 months ago

How to run chart.js samples using source code?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by darrion.kuhn , 10 months ago

@raven_corwin 

To run chart.js samples using source code, follow these steps:

  1. Download the Chart.js library from the official website: https://www.chartjs.org/
  2. Extract the downloaded zip file and copy the "Chart.min.js" file to your project directory.
  3. Create an HTML file in your project directory and link the Chart.js library with the following code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Sample</title>
    <script src="Chart.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        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: [
                        'red',
                        'blue',
                        'yellow',
                        'green',
                        'purple',
                        'orange'
                    ],
                    borderColor: [
                        'black',
                        'black',
                        'black',
                        'black',
                        'black',
                        'black'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>


  1. Save the HTML file and open it in a web browser to see the chart rendered.


You can modify the code in the script tag to create different types of charts and customize their appearance according to your needs. Refer to the Chart.js documentation for more examples and options: https://www.chartjs.org/docs/

Related Threads:

How to extract json from html source code using regex?
How to document application source file using doxygen?
How to run a javascript code over an iframe?
How to run jquery code when changing templates in ember.js?
How to run a script on server using fastapi?
How to test async code with mocha using await?