Advanced Features - Highcharts

Overview

Highcharts offers powerful advanced features for creating sophisticated, interactive visualizations. This guide covers annotations, 3D rendering, and custom interactions.

Annotations

Add labels and markers to highlight specific data points or events on your chart.

Overview
Example
Required Module

Annotations allow you to add custom labels, shapes, and markers to highlight important data points or events. They’re perfect for:

Marking significant events on time series data
Highlighting outliers or anomalies
Adding context to specific data points
Creating interactive explanations

Highcharts.chart('container', {
    chart: {
        type: 'area',
        zooming: {
            type: 'x'
        },
        panning: true,
        panKey: 'shift'
    },

    title: {
        text: 'TSLA Stock price 2017 - March 17, 2025',
        align: 'left'
    },

    annotations: [
        {
            draggable: '',
            labelOptions: {
                shape: 'connector'
            },
            labels: [
                {
                    allowOverlap: true,
                    point: {
                        xAxis: 0,
                        yAxis: 0,
                        x: '2020-08-20',
                        y: 133.45
                    },
                    x: -100,
                    text: '5 for 1 Stock split announcement'
                },
                {
                    point: {
                        xAxis: 0,
                        yAxis: 0,
                        x: '2020-12-21',
                        y: 216.62
                    },
                    text: 'Inclusion to S&P 500 Index',
                    x: -70,
                    y: -20
                },
                {
                    point: {
                        xAxis: 0,
                        yAxis: 0,
                        x: '2021-04-01',
                        y: 220.58
                    },
                    text: 'Record earnings in Q1 2021',
                    y: -60,
                    x: -25
                },
                {
                    point: {
                        xAxis: 0,
                        yAxis: 0,
                        x: '2021-11-01',
                        y: 402.86
                    },
                    x: -100,
                    text: 'Stock Sale by Elon Musk'
                }
            ]
        }
    ],

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value} USD'
        }
    },

    series: [
        {
            data: data, // Your time series data
            name: 'TSLA Stock Price',
            marker: {
                enabled: false
            }
        }
    ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

The annotations module must be loaded after the main Highcharts library.

3D Charts

Create visually stunning 3D charts with customizable viewing angles.

Interactive 3D Column Chart

const chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            enabled: false
        }
    },
    title: {
        text: 'Sold passenger cars in Norway by brand, May 2024'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        data: [
            ['Toyota', 1795],
            ['Volkswagen', 1242],
            ['Volvo', 1074],
            ['Tesla', 832],
            ['Hyundai', 593],
            ['MG', 509],
            ['Skoda', 471],
            ['BMW', 442],
            ['Ford', 385],
            ['Nissan', 371]
        ],
        colorByPoint: true
    }]
});

Adding Interactive Controls

Make your 3D charts interactive with sliders:

function showValues() {
    document.getElementById('alpha-value').innerHTML = 
        chart.options.chart.options3d.alpha;
    document.getElementById('beta-value').innerHTML = 
        chart.options.chart.options3d.beta;
    document.getElementById('depth-value').innerHTML = 
        chart.options.chart.options3d.depth;
}

// Activate the sliders
document.querySelectorAll('#sliders input').forEach(input => 
    input.addEventListener('input', e => {
        chart.options.chart.options3d[e.target.id] = parseFloat(e.target.value);
        showValues();
        chart.redraw(false);
    })
);

showValues();

<div id="sliders">
    <label>Alpha: <span id="alpha-value"></span></label>
    <input id="alpha" type="range" min="0" max="45" value="15" />
    
    <label>Beta: <span id="beta-value"></span></label>
    <input id="beta" type="range" min="-45" max="45" value="15" />
    
    <label>Depth: <span id="depth-value"></span></label>
    <input id="depth" type="range" min="20" max="100" value="50" />
</div>

3D Options Reference

alpha

The vertical rotation angle in degrees.

Type: Number
Range: 0-90
Default: 0

Controls the tilt of the chart from top to bottom.

beta

The horizontal rotation angle in degrees.

Type: Number
Range: -180 to 180
Default: 0

Controls the rotation of the chart from left to right.

depth

The total depth of the chart.

Type: Number
Default: 100

Defines how “deep” the 3D effect appears.

viewDistance

Defines how far the viewer is from the chart.

Type: Number
Default: 25

A smaller value creates a more pronounced 3D effect.

Custom Event Handlers

Create rich interactions with custom event handlers.

Click Events

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        events: {
            click: function (e) {
                // Chart click event
                const x = Math.round(e.xAxis[0].value);
                const y = Math.round(e.yAxis[0].value);
                
                console.log('Clicked at:', x, y);
                this.series[0].addPoint([x, y]);
            }
        }
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        // Point click event
                        console.log('Point clicked:', this.category, this.y);
                        
                        if (this.series.data.length > 1) {
                            this.remove();
                        }
                    },
                    mouseOver: function () {
                        // Point hover event
                        this.update({
                            marker: {
                                radius: 8
                            }
                        });
                    },
                    mouseOut: function () {
                        // Point mouse leave event
                        this.update({
                            marker: {
                                radius: 4
                            }
                        });
                    }
                }
            }
        }
    },
    series: [{
        data: [[20, 20], [80, 80]]
    }]
});

Custom Plugins

Extend Highcharts functionality with custom plugins.

Pulsating Marker Plugin

// Plugin to add a pulsating marker on add point
Highcharts.addEvent(Highcharts.Series, 'addPoint', e => {
    const point = e.point,
        series = e.target;

    if (!series.pulse) {
        series.pulse = series.chart.renderer.circle()
            .add(series.markerGroup);
    }

    setTimeout(() => {
        series.pulse
            .attr({
                x: series.xAxis.toPixels(point.x, true),
                y: series.yAxis.toPixels(point.y, true),
                r: series.options.marker.radius,
                opacity: 1,
                fill: series.color
            })
            .animate({
                r: 20,
                opacity: 0
            }, {
                duration: 1000
            });
    }, 1);
});

This plugin creates a pulsating animation whenever a new point is added to any series, providing immediate visual feedback to users.

Performance Optimization

Boost Module

Use the boost module for charts with thousands of data points.

<script src="https://code.highcharts.com/modules/boost.js"></script>

Turbo Threshold

Adjust the turboThreshold for better performance with large datasets.

plotOptions: {
    series: {
        turboThreshold: 5000
    }
}

Lazy Loading

Load data asynchronously to improve initial page load times.

async function loadData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    chart.series[0].setData(data);
}

Disable Animations

Disable animations for better performance in production.

plotOptions: {
    series: {
        animation: false
    }
}

Advanced Modules

Exporting
Drilldown
Accessibility
Data Tools

Enable chart export functionality:

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

Users can export charts as PNG, JPEG, PDF, SVG, or CSV.

Create hierarchical charts with drilldown:

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

Enable users to drill down into data categories for more detail.

Ensure charts are accessible to all users:

<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Provides keyboard navigation, screen reader support, and WCAG compliance.

Enable data manipulation tools:

<script src="https://code.highcharts.com/modules/data.js"></script>

Load data from CSV, HTML tables, or Google Spreadsheets.

Best Practices

Performance Considerations:

Limit the number of annotations on a single chart
Use the boost module for large datasets (>1000 points)
Disable animations for charts that update frequently
Consider lazy loading data for complex dashboards

Accessibility Tips:

Always include meaningful titles and descriptions
Use the accessibility module for keyboard navigation
Provide text alternatives for visual information
Test with screen readers

Next Steps

Framework Integrations

Learn how to integrate Highcharts with React, Vue, and Angular

API Reference

Explore the complete API documentation

Examples

Documentation Index

​Overview

​Annotations

​3D Charts

​Interactive 3D Column Chart

​3D Options Reference

​Custom Event Handlers

​Click Events

​Custom Plugins

​Pulsating Marker Plugin

​Performance Optimization

Boost Module

Turbo Threshold

Lazy Loading

Disable Animations

​Advanced Modules

​Best Practices

​Next Steps

Framework Integrations

API Reference

Overview

Annotations

3D Charts

Interactive 3D Column Chart

3D Options Reference

Custom Event Handlers

Click Events

Custom Plugins

Pulsating Marker Plugin

Performance Optimization

Advanced Modules

Best Practices

Next Steps