Creating charts with JavaScript could be quite a cumbersome task if you’re going to use only pure JavaScript. Luckily, there are many good libraries that simplify this task. One of the most popular among them is Chart.js.
Here’s an example of creating a bar chart with Chart.js:
1. First, include Chart.js library in your HTML file:
```
```
1. Create a canvas element in your HTML where you want to display the chart:
```
```
1. Next, you’ll need to create a script where you draw the chart:
```
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: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)‘
],
borderColor: [
‘rgba(255, 99, 132, 1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’,
‘rgba(153, 102, 255, 1)’,
‘rgba(255, 159, 64, 1)‘
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
```
This script creates a bar chart displaying how many votes have been given to each color.
Other great libraries for creating charts are D3.js, Google Charts, Highcharts, etc.
Remember to always check if the library you want to use is compatible with your project and its license allows using it in the way you want.
