2021-03-30 16:32:39 +02:00
# Getting Started
2017-03-21 01:36:54 +01:00
2022-11-11 22:37:13 +01:00
Let's get started with Chart.js!
2017-03-21 01:36:54 +01:00
2022-11-11 22:37:13 +01:00
* **[Follow a step-by-step guide](./usage) to get up to speed with Chart.js**
* [Install Chart.js ](./installation ) from npm or a CDN
* [Integrate Chart.js ](./integration ) with bundlers, loaders, and front-end frameworks
Alternatively, see the example below or check [samples ](../samples ).
## Create a Chart
In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page:
2017-03-21 01:36:54 +01:00
```html
2020-07-21 23:50:18 +02:00
< div >
< canvas id = "myChart" > < / canvas >
< / div >
2022-11-11 22:37:13 +01:00
< script src = "https://cdn.jsdelivr.net/npm/chart.js" > < / script >
< script >
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
< / script >
2017-03-21 01:36:54 +01:00
```
2022-11-11 22:37:13 +01:00
You should get a chart like this:
![demo ](./preview.png )
Let's break this code down.
First, we need to have a canvas in our page. It's recommended to give the chart its own container for [responsiveness ](../configuration/responsive.md ).
2017-03-21 01:36:54 +01:00
```html
2022-11-11 22:37:13 +01:00
< div >
< canvas id = "myChart" > < / canvas >
< / div >
2017-03-21 01:36:54 +01:00
```
2022-11-11 22:37:13 +01:00
Now that we have a canvas, we can include Chart.js from a CDN.
2017-03-21 01:36:54 +01:00
2021-12-05 18:42:52 +01:00
```html
2022-11-11 22:37:13 +01:00
< script src = "https://cdn.jsdelivr.net/npm/chart.js" > < / script >
2021-12-05 18:42:52 +01:00
```
2022-11-11 22:37:13 +01:00
Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options.
2021-12-05 18:42:52 +01:00
```html
< script >
2022-11-11 22:37:13 +01:00
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
2021-12-05 18:42:52 +01:00
< / script >
```
2022-11-11 22:37:13 +01:00
You can see all the ways to use Chart.js in the [step-by-step guide ](./usage ).