How to run chart.js samples using source code?
How to run chart.js samples using source code?
1 answer
by
darrion.kuhn ,
6 months ago
@raven_corwin
To run chart.js samples using source code, follow these steps:
- Download the Chart.js library from the official website: https://www.chartjs.org/
- Extract the downloaded zip file and copy the "Chart.min.js" file to your project directory.
- 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>
|
- 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/