# Creating Charts with Google Charts
Google Charts is a free JavaScript library that can create professional graphs and charts using your data.
Google Charts can display:
- Pie Charts
- Bar Charts
- Column Charts
- Line Charts
- Area Charts
In this tutorial you will create your first chart using sample data.
---
## Step 1 - Load the Google Charts Library
Add the following line inside the `` section of your webpage.
```html
```
---
## Step 2 - Create a Chart Container
Add a `div` where the chart will be displayed.
```html
```
---
## Step 3 - Create the Chart
Add the following JavaScript before the closing `` tag.
```html
```
[](https://mr.napper.au/uploads/images/gallery/2026-06/image-1782085452882.png)
---
## Understanding the Data
Google Charts uses an array to store chart data.
```javascript
[
['Risk Level', 'Count'],
['Low',15],
['Medium',8],
['High',3]
]
```
The first row contains the headings.
The remaining rows contain the data values.
---
## Changing the Chart Type
The chart type is controlled by:
```javascript
google.visualization.PieChart
```
You can change it to:
| Chart | Class |
|------|------|
| Pie Chart | PieChart |
| Column Chart | ColumnChart |
| Bar Chart | BarChart |
| Line Chart | LineChart |
| Area Chart | AreaChart |
Example:
```javascript
google.visualization.BarChart
```
will display the same data as a bar chart.
---
## Complete Example
```html
Google Charts Example
```
## Accessibility and data note
Provide the values in an HTML table or concise text summary as well as the chart. Do not rely on colour alone, and give the chart container an accessible name where practical. Google Charts loads JavaScript from Google; use fictional or non-personal summary data only.