Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/highcharts/highcharts/llms.txt

Use this file to discover all available pages before exploring further.

​
Create Your First Chart in 5 Minutes

This quick start guide will help you create a working chart with minimal setup. We’ll use the CDN approach for simplicity.
This guide uses the CDN for quick setup. For production projects, consider using npm installation instead.

​
Complete Example

Here’s a complete HTML file that creates a column chart: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Highcharts</title>
  
  <!-- Load Highcharts from CDN -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <!-- Container for the chart -->
  <div id="container" style="width:100%; height:400px;"></div>
  
  <script>
    // Create the chart
    document.addEventListener('DOMContentLoaded', function () {
      Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Corn vs Wheat Production 2023'
        },
        subtitle: {
          text: 'Source: indexmundi.com'
        },
        xAxis: {
          categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: '1000 metric tons (MT)'
          }
        },
        tooltip: {
          valueSuffix: ' (1000 MT)'
        },
        series: [
          {
            name: 'Corn',
            data: [387749, 280000, 129000, 64300, 54000, 34300]
          },
          {
            name: 'Wheat',
            data: [45321, 140000, 10000, 140500, 19500, 113500]
          }
        ]
      });
    });
  </script>
</body>
</html>
Copy this code into an HTML file and open it in your browser - you’ll see a working chart!

​
Step-by-Step Breakdown

1

Load Highcharts

Include the Highcharts library from the CDN:
<script src="https://code.highcharts.com/highcharts.js"></script>
For production, consider loading additional modules like accessibility:
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
2

Create a container

Add a <div> element where the chart will be rendered:
<div id="container" style="width:100%; height:400px;"></div>
The container needs an ID (used by Highcharts) and dimensions (width and height).
3

Initialize the chart

Call Highcharts.chart() with the container ID and configuration:
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: 
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]
  }]
});

​
Using with npm

If you prefer npm installation:
1

Install Highcharts

npm install highcharts --save
2

Import and use

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: 
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
This adds a menu button to export as PNG, JPEG, PDF, SVG, or CSV.

​
Add Tooltips

Customize the tooltip that appears on hover: 
Highcharts.chart('container', {
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b><br/>',
    valueSuffix: ' units'
  },
  // ... rest of config
});

​
Enable Data Labels

Show values directly on the chart: 
Highcharts.chart('container', {
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true
      }
    }
  },
  // ... rest of config
});

​
Stock Charts (Time Series)

For time-series data, use Highcharts Stock: 
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="width:100%; height:400px;"></div>

<script>
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'USD to EUR Exchange Rate'
  },
  series: [{
    name: 'USD to EUR',
    data: [
      [Date.UTC(2024, 0, 1), 0.85],
      [Date.UTC(2024, 1, 1), 0.87],
      [Date.UTC(2024, 2, 1), 0.86],
      [Date.UTC(2024, 3, 1), 0.88]
    ],
    tooltip: {
      valueDecimals: 2
    }
  }]
});
</script>
Stock charts use Highcharts.stockChart() instead of Highcharts.chart().

​
Framework Integration

Highcharts works with popular frameworks: 
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 <HighchartsReact highcharts={Highcharts} options={options} />;
}
See the integrations overview for official wrappers.

​
Common Options

Here are the most commonly used configuration options:
OptionDescriptionExample
chart.typeChart type'line', 'bar', 'pie', 'column'
title.textChart title'Monthly Revenue'
xAxis.categoriesX-axis labels['Jan', 'Feb', 'Mar']
yAxis.title.textY-axis label'Sales ($)'
seriesData series[{ name: 'Sales', data: [1, 2, 3] }]
tooltipHover tooltip config{ valueSuffix: ' units' }
plotOptionsSeries-specific settings{ line: { marker: { enabled: false } } }

​
Next Steps

Your First Chart

Detailed tutorial with explanations of every option

API Reference

Complete reference of all configuration options

Chart Types

Explore all available chart types

Examples

Browse hundreds of live examples
For a more detailed walkthrough, continue to Your First Chart where we explain each configuration option in depth.