Performance Optimization

Performance is critical when working with large datasets or multiple charts. Highcharts provides several optimization techniques to ensure smooth rendering and interaction.

Performance Bottlenecks

Understand common performance issues:

Large datasets - Thousands of data points
Multiple series - Many series in one chart
Complex calculations - Heavy data processing
Frequent updates - Real-time data streaming
Animations - Complex animation effects
Markers and labels - Too many visual elements

Boost Module

The Boost module dramatically improves performance for large datasets by using WebGL rendering.

Installation

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

import Highcharts from 'highcharts';
import boost from 'highcharts/modules/boost';

boost(Highcharts);

import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';
import 'highcharts/es-modules/masters/modules/boost.src.js';

Configuration

Highcharts.chart('container', {
    boost: {
        useGPUTranslations: true,
        usePreallocated: true,
        seriesThreshold: 1,      // Enable for >= 1 series
        pixelRatio: 1            // Adjust for high DPI displays
    },
    plotOptions: {
        series: {
            boostThreshold: 5000,    // Enable boost at 5000 points
            turboThreshold: 0        // Disable turbo mode
        }
    },
    series: [{
        data: largeDataArray      // Can handle millions of points
    }]
});

When to Use Boost

Use the Boost module when you have:

More than 5,000 data points per series
Multiple series with thousands of points each
Real-time data streaming
Performance issues with standard rendering

Boost Limitations

The Boost module has some limitations:

No support for markers (they’re hidden automatically)
Limited animation support
Some interactive features may be reduced
Not compatible with all series types

Data Grouping

Data grouping reduces the number of points by combining them into groups.

Highcharts.stockChart('container', {
    plotOptions: {
        series: {
            dataGrouping: {
                enabled: true,
                approximation: 'average',  // or 'sum', 'open', 'high', 'low', 'close'
                groupPixelWidth: 10,       // Target pixel width
                units: [
                    ['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
                    ['second', [1, 2, 5, 10, 15, 30]],
                    ['minute', [1, 2, 5, 10, 15, 30]],
                    ['hour', [1, 2, 3, 4, 6, 8, 12]],
                    ['day', [1]],
                    ['week', [1]],
                    ['month', [1, 3, 6]],
                    ['year', null]
                ]
            }
        }
    },
    series: [{
        data: timeSeriesData
    }]
});

Turbo Mode

Turbo mode skips expensive calculations for very large datasets:

Highcharts.chart('container', {
    plotOptions: {
        series: {
            turboThreshold: 1000  // Enable turbo at 1000 points
        }
    }
});

Turbo mode disables some data validation and extremes calculation. Set to 0 to disable for critical applications.

Disable Animations

Animations consume CPU cycles:

Highcharts.chart('container', {
    chart: {
        animation: false
    },
    plotOptions: {
        series: {
            animation: false,
            states: {
                hover: {
                    animation: false
                }
            }
        }
    },
    tooltip: {
        animation: false
    }
});

Optimize Markers

Disable Markers

plotOptions: {
    series: {
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: true,
                    radius: 3
                }
            }
        }
    }
}

Use Smaller Markers

marker: {
    radius: 2,           // Smaller radius
    symbol: 'circle'     // Simple shape
}

Reduce Shadow Effects

Shadows are expensive to render:

plotOptions: {
    series: {
        shadow: false
    },
    column: {
        shadow: false
    }
}

Optimize Tooltips

Shared Tooltips

tooltip: {
    shared: true,         // One tooltip for all series
    crosshairs: true,
    animation: false,
    useHTML: false,       // SVG is faster than HTML
    hideDelay: 0
}

(function (H) {
    let tooltipTimeout;
    
    H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, point) {
        clearTimeout(tooltipTimeout);
        
        tooltipTimeout = setTimeout(() => {
            proceed.call(this, point);
        }, 50);  // 50ms throttle
    });
}(Highcharts));

Efficient Data Updates

Update Single Points

// Efficient - update one point
chart.series[0].points[10].update(newValue, false);
chart.redraw();

// Inefficient - updates entire series
chart.series[0].setData(newData);

Batch Updates

// Disable redraw during updates
chart.series.forEach((series, i) => {
    series.setData(newDataArray[i], false);
});

// Redraw once
chart.redraw();

Streaming Data

// Add point without redrawing
series.addPoint([x, y], false, true);

// Redraw every 10 points
if (pointCount % 10 === 0) {
    chart.redraw();
}

Memory Management

Destroy Unused Charts

if (chart) {
    chart.destroy();
    chart = null;
}

Clean Up Event Listeners

const eventHandler = function() { /* ... */ };

// Add event
const unbind = Highcharts.addEvent(chart, 'redraw', eventHandler);

// Remove event later
unbind();

Limit Chart History

series.addPoint([x, y], true, data.length > 1000);

Reduce Reflows

Minimize DOM Access

// Bad - multiple reflows
chart.setTitle({ text: 'New Title' });
chart.setSize(800, 600);
chart.redraw();

// Good - single reflow
chart.update({
    title: { text: 'New Title' },
    chart: { width: 800, height: 600 }
}, true, true);

Use `redraw: false`

chart.update(options, false);  // Don't redraw yet
chart.addSeries(series, false);
chart.redraw();  // Single redraw

Optimize CSS

Use Styled Mode

Highcharts.chart('container', {
    chart: {
        styledMode: true  // Use CSS instead of inline styles
    }
});

.highcharts-series-0 {
    stroke: #7cb5ec;
    fill: none;
}

.highcharts-marker {
    display: none;  /* Hide all markers */
}

Lazy Loading

Load chart modules only when needed:

// Load boost module on demand
function loadBoost() {
    return import('highcharts/modules/boost').then(boost => {
        boost.default(Highcharts);
    });
}

// Use when needed
if (dataPoints > 5000) {
    await loadBoost();
}

Web Workers

Offload data processing to web workers:

// worker.js
self.addEventListener('message', function(e) {
    const data = e.data;
    
    // Process data
    const processed = data.map(point => ({
        x: point.timestamp,
        y: point.value * 2
    }));
    
    self.postMessage(processed);
});

// main.js
const worker = new Worker('worker.js');

worker.addEventListener('message', function(e) {
    chart.series[0].setData(e.data);
});

worker.postMessage(rawData);

Performance Monitoring

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                console.time('chart-render');
            },
            render: function() {
                console.timeEnd('chart-render');
            }
        }
    }
});

Measure Redraw Time

const start = performance.now();
chart.redraw();
const duration = performance.now() - start;
console.log(`Redraw took ${duration}ms`);

Performance Checklist

Enable Boost Module

For datasets > 5,000 points:

boost: {
    useGPUTranslations: true,
    seriesThreshold: 1
}

Disable Unnecessary Features

animation: false,
marker: { enabled: false },
shadow: false

Use Data Grouping

For time series data:

dataGrouping: {
    enabled: true
}

Batch Updates

series.setData(newData, false);
chart.redraw();

Monitor Performance

console.time('operation');
// ... operation ...
console.timeEnd('operation');

Real-World Example

Optimized chart for 100,000 points:

Highcharts.chart('container', {
    boost: {
        useGPUTranslations: true,
        usePreallocated: true
    },
    chart: {
        animation: false,
        ignoreHiddenSeries: true
    },
    plotOptions: {
        series: {
            boostThreshold: 1,
            turboThreshold: 0,
            animation: false,
            marker: {
                enabled: false
            },
            shadow: false,
            states: {
                hover: {
                    animation: false,
                    lineWidthPlus: 0
                }
            }
        }
    },
    tooltip: {
        animation: false,
        hideDelay: 0,
        shared: true
    },
    series: [{
        data: largeDataset,  // 100,000 points
        lineWidth: 1
    }]
});

This configuration can handle 100,000+ points at 60 FPS on modern hardware.

Troubleshooting

Chart Freezes on Large Data

Enable Boost module
Increase boostThreshold
Use data grouping
Reduce point density

Slow Updates

Use setData(data, false) and manual redraw()
Update only changed points
Batch multiple updates
Disable animations

High Memory Usage

Destroy unused charts
Limit data history
Remove event listeners
Clear references

​Performance Bottlenecks

​Boost Module

​Installation

​Configuration

​When to Use Boost

​Boost Limitations

​Data Grouping

​Turbo Mode

​Disable Animations

​Optimize Markers

​Disable Markers

​Use Smaller Markers

​Reduce Shadow Effects

​Optimize Tooltips

​Shared Tooltips

​Throttle Tooltip Updates

​Efficient Data Updates

​Update Single Points

​Batch Updates

​Streaming Data

​Memory Management

​Destroy Unused Charts

​Clean Up Event Listeners

​Limit Chart History

​Reduce Reflows

​Minimize DOM Access

​Use redraw: false

​Optimize CSS

​Use Styled Mode

​Lazy Loading

​Web Workers

​Performance Monitoring

​Measure Redraw Time

​Performance Checklist

​Real-World Example

​Troubleshooting

​Chart Freezes on Large Data

​Slow Updates

​High Memory Usage

Performance Bottlenecks

Boost Module

Installation

Configuration

When to Use Boost

Boost Limitations

Data Grouping

Turbo Mode

Disable Animations

Optimize Markers

Disable Markers

Use Smaller Markers

Reduce Shadow Effects

Optimize Tooltips

Shared Tooltips

Throttle Tooltip Updates

Efficient Data Updates

Update Single Points

Batch Updates

Streaming Data

Memory Management

Destroy Unused Charts

Clean Up Event Listeners

Limit Chart History

Reduce Reflows

Minimize DOM Access

Use `redraw: false`

Optimize CSS

Use Styled Mode

Lazy Loading

Web Workers

Performance Monitoring

Measure Redraw Time

Performance Checklist

Real-World Example

Troubleshooting

Chart Freezes on Large Data

Slow Updates

High Memory Usage