Quick Start Guide

Create your first Highcharts visualization in under 5 minutes with this quick start guide.

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:

Line Chart

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:

React

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:

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

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.