` element where the chart will be rendered:
```html theme={null}
```
The container needs an ID (used by Highcharts) and dimensions (width and height).
Call `Highcharts.chart()` with the container ID and configuration:
```javascript theme={null}
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: { type: 'column' },
title: { text: 'My Chart' },
series: [{
name: 'Sales',
data: [1, 3, 2, 4]
}]
});
});
```
The `DOMContentLoaded` event ensures the page is fully loaded before creating the chart.
## Chart Types
Change the chart type by modifying the `chart.type` option:
```javascript Line Chart theme={null}
Highcharts.chart('container', {
chart: { type: 'line' },
title: { text: 'Monthly Sales' },
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
series: [{
name: 'Revenue',
data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});
```
```javascript Bar Chart theme={null}
Highcharts.chart('container', {
chart: { type: 'bar' },
title: { text: 'Fruit Consumption' },
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
```
```javascript Pie Chart theme={null}
Highcharts.chart('container', {
chart: { type: 'pie' },
title: { text: 'Browser Market Share' },
series: [{
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Firefox', y: 11.84 },
{ name: 'Safari', y: 10.85 },
{ name: 'Edge', y: 4.67 },
{ name: 'Other', y: 11.23 }
]
}]
});
```
```javascript Area Chart theme={null}
Highcharts.chart('container', {
chart: { type: 'area' },
title: { text: 'Area Chart Example' },
xAxis: {
categories: ['Q1', 'Q2', 'Q3', 'Q4']
},
series: [{
name: 'Revenue',
data: [1000, 1200, 1400, 1100]
}, {
name: 'Costs',
data: [800, 900, 950, 1000]
}]
});
```
## Using with npm
If you prefer npm installation:
```bash theme={null}
npm install highcharts --save
```
```javascript theme={null}
import Highcharts from 'highcharts';
Highcharts.chart('container', {
chart: { type: 'line' },
title: { text: 'My Chart' },
series: [{ data: [1, 2, 3, 4, 5] }]
});
```
## Adding Interactivity
Enhance your chart with built-in features:
### Enable Exporting
Add the exporting module to let users download charts:
```html theme={null}
```
This adds a menu button to export as PNG, JPEG, PDF, SVG, or CSV.
### Add Tooltips
Customize the tooltip that appears on hover:
```javascript theme={null}
Highcharts.chart('container', {
tooltip: {
pointFormat: '{series.name}:
{point.y}',
valueSuffix: ' units'
},
// ... rest of config
});
```
### Enable Data Labels
Show values directly on the chart:
```javascript theme={null}
Highcharts.chart('container', {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
// ... rest of config
});
```
## Stock Charts (Time Series)
For time-series data, use Highcharts Stock:
```html theme={null}
```
Stock charts use `Highcharts.stockChart()` instead of `Highcharts.chart()`.
## Framework Integration
Highcharts works with popular frameworks:
```jsx React theme={null}
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
function MyChart() {
const options = {
title: { text: 'My Chart' },
series: [{ data: [1, 2, 3, 4, 5] }]
};
return ;
}
```
```vue Vue theme={null}
```
```typescript Angular theme={null}
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-chart',
template: ''
})
export class ChartComponent implements OnInit {
ngOnInit() {
Highcharts.chart('container', {
title: { text: 'My Chart' },
series: [{ data: [1, 2, 3, 4, 5] }]
});
}
}
```
See the [integrations overview](https://www.highcharts.com/integrations/) for official wrappers.
## Common Options
Here are the most commonly used configuration options:
| Option | Description | Example |
| - | - | - |
| `chart.type` | Chart type | `'line'`, `'bar'`, `'pie'`, `'column'` |
| `title.text` | Chart title | `'Monthly Revenue'` |
| `xAxis.categories` | X-axis labels | `['Jan', 'Feb', 'Mar']` |
| `yAxis.title.text` | Y-axis label | `'Sales ($)'` |
| `series` | Data series | `[{ name: 'Sales', data: [1, 2, 3] }]` |
| `tooltip` | Hover tooltip config | `{ valueSuffix: ' units' }` |
| `plotOptions` | Series-specific settings | `{ line: { marker: { enabled: false } } }` |
## Next Steps
Detailed tutorial with explanations of every option
Complete reference of all configuration options
Explore all available chart types
Browse hundreds of live examples
For a more detailed walkthrough, continue to [Your First Chart](/your-first-chart) where we explain each configuration option in depth.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.