HighCharts - Quick Guide

Highcharts - Quick Guide

This guide provides a rapid overview of getting started with Highcharts, covering the essential concepts from setup to basic chart creation.

Highcharts - Overview

Highcharts is a modern JavaScript charting library for adding interactive, responsive charts to web projects. It renders using SVG for crisp visuals on all devices and works standalone, without needing external libraries like jQuery.

Core Features:

Compatibility: Works in all modern browsers and has framework wrappers (React, Vue, Angular).
Interactive: Supports zooming, panning, tooltips.
Responsive: Adapts charts to different screen sizes.
Rich Chart Types: Line, bar, pie, area, scatter, bubble, 3D, maps, stock, gauges, heatmaps, treemaps, and many more.
Standalone: No jQuery or other library dependencies required.
Simple Configuration: Uses JavaScript objects for easy setup.
Dynamic: Allows live updating of data and configurations.
Accessible: Supports ARIA standards and keyboard navigation.
Export/Print: Built-in image and PDF export, plus printing.
Extensible API: Offers deep customization options.

Licensing:

Free for non-commercial use. Commercial use requires a paid license. See the official Highcharts website for details.

Highcharts - Environment Setup

You can set up Highcharts using CDN or NPM/Yarn.

Using CDN (Recommended for simple projects):

Include the scripts in your HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts CDN</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- Optional: Add modules like exporting -->
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
    <div id="chartContainer" style="width:100%; height:400px;"></div>
    <script>
        // Your chart configuration script here
        document.addEventListener('DOMContentLoaded', function () {
           Highcharts.chart('chartContainer', { /* options */ });
        });
    </script>
</body>
</html>

Using NPM/Yarn (Recommended for build systems):

Install: npm install highcharts or yarn add highcharts
Import and Initialize:

import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
Exporting(Highcharts); // Initialize module

// ... later in your code
Highcharts.chart('containerElementId', { /* options */ });

Highcharts - Configuration Syntax

Highcharts uses a JavaScript object to define chart options. The basic structure involves creating an HTML container and then calling Highcharts.chart().

Step 1: Create HTML Container

Add a <div> element with a unique ID where the chart will be rendered.

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

Step 2: Create Configuration Object

Define the chart’s appearance and data using a JavaScript object. Key properties include:

chart: Basic chart options like type (e.g., ‘line’, ‘bar’).
title: The main title of the chart.
subtitle: An optional subtitle.
xAxis: Configuration for the horizontal axis (categories, labels, title).
yAxis: Configuration for the vertical axis (labels, title, plot lines).
tooltip: Settings for the hover pop-up information.
legend: Configuration for the chart legend.
series: An array containing the data series to be plotted. Each series object typically has a name and data array.

Step 3: Initialize the Chart

Use Highcharts.chart(containerId, optionsObject) to render the chart.

Example: Basic Line Chart

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Basic Example</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const options = {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Monthly Average Temperature'
                },
                subtitle: {
                    text: 'Source: Fictional Data'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    }
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                series: [{
                    name: 'City A',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'City B',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }]
            };

            const chart = Highcharts.chart('container', options);
        });
    </script>
</body>
</html>

Result Description:

Running this HTML file will display a line chart titled ‘Monthly Average Temperature’ in the ‘container’ div. It will show two lines, one for ‘City A’ and one for ‘City B’, plotting their temperature data across the months listed on the X-axis. Hovering over points will show tooltips with the exact temperature.

Supported Chart Types Overview

Highcharts supports a vast range of chart types:

Category	Examples
Line Charts	Basic line, spline, step line, time series.
Area Charts	Basic area, stacked area, percentage area.
Bar/Column Charts	Basic, stacked, grouped, negative values, drilldown.
Pie Charts	Basic pie, donut, semi-circle, drilldown, gradient.
Scatter/Bubble	Scatter plot, bubble chart (size represents third variable).
Dynamic	Real-time updates, adding points interactively.
Combinations	Mixing types (e.g., line and column), multiple axes.
3D Charts	3D versions of column, pie, etc.
Gauges	Speedometer, solid gauge, VU meter.
Heat/Tree Maps	Matrix data visualization, hierarchical data visualization.

This quick guide covers the basics. Explore subsequent chapters or the official Highcharts documentation and demo gallery for detailed examples of each chart type and advanced features.