Getting Started with Highcharts in React: A Comprehensive Guide 

Introduction

Data drives growth only when it delivers actionable insights—and data visualization is the key. It breaks down complex data into easily digestible parts, reveals patterns and trends, accelerates decision-making, and ultimately boosts productivity. As a front-end developer, I always look for ready-to-use, customizable charts without heavy coding. I’ve tested Chart.js, D3.js, and Google Charts, but for me, Highcharts stands out—especially when working with React.

Charts are essential in web development, and having a solid hands-on understanding is always an advantage. In this blog, I’ll focus specifically on Highcharts and how you can quickly set it up for your next React project. I’ll also explore some advanced customizations that give this library an edge over its competitors. But before diving in, let’s start with a quick overview.

What is Highcharts?

Highcharts is a powerful JavaScript charting library used to create interactive, responsive, and visually appealing charts in web applications—helping make data more accessible to end users.

A common misconception is that Highcharts is only for JavaScript and HTML-based projects. However, with careful state and lifecycle management, it can be seamlessly integrated into React-based applications as well.

Advantages of Using Highcharts

1. It is feature-rich

Highcharts offers 20+ chart types, including Bar, Line, Pie, and Gauge charts. This makes it easier to visualize the same data in different formats. It also provides custom click handlers to trigger specific functions when users interact with chart elements. Built-in responsive support ensures usability across devices. Exporting charts as .pdf, .png, or .svg files is just a click away.

2. It performs well under pressure

With the Boost module, Highcharts handles millions of data points efficiently. It also supports animations, making visualizations more engaging.

3. Charts can be customized

Highcharts allows for custom styling via the options object or CSS selectors. The options object is highly flexible, offering significant control over the final look and feel of your charts.

Highcharts Installation Prerequisites

Before you decide to go ahead with the installation, you must ensure you have-

• Node.js 14.0.0 or higher (LTS version recommended)
• npm (version 6.0.0 or higher) or Yarn (version 1.22.0 or higher)
• React 17.0.2 or higher
• React DOM 17.0.2 or higher
• Typescript support
• Modern build tools (Vite recommended)

Getting Started

Installation

To install Highcharts, you have to install Highcharts and Highcharts-react-official as npm dependencies

# Highcharts dependencies


# npm command
npm install highcharts highcharts-react-official


# yarn command
yarn add highcharts highcharts-react-official

Basic Implementation

After installing Highcharts, use it to render line chart. The following code will get you up and running with line chart

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';


export function LineChart() {
const option: Highcharts.Options = {
chart: {
type: 'line'
},
title: {
text: 'Profit and Loss'
},
xAxis: {
title: {
text: 'Year'
},
categories: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010']
},
yAxis: {
title: {
text: 'Amount'
}
},
series: [
{
type: 'line',
name: 'Profit Amount',
data: [1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500]
},
{
type: 'line',
name: 'Loss Amount',
data: [2334, 1233, 123, 9876, 1234, 1234, 1234, 1234, 1234, 1234]
}
]
};


return <HighchartsReact highcharts={Highcharts} options={option} />;
}

And the Line Chart will look like

Advanced Customization Options There are certain settings and customization options you should be aware of when using Highcharts.

Global Settings with Highcharts.setOptions()
Sometimes, you may need to apply global settings to all chart types rendered in your React application. This can be done using Highcharts.setOptions().

This approach is particularly useful for maintaining consistency across visualizations and minimizing code duplication.

You can use Highcharts.setOptions() to set default fonts, apply consistent styling (such as margins and padding), and configure common behaviors across different chart types.

For chart-specific configurations, use individual chart options to override the global defaults.

The following example demonstrates a basic use case where a common font family is set for all charts rendered within a React application.

// Basic Usage
import Highcharts from 'highcharts';


Highcharts.setOptions({
// Global options that apply to all charts
chart: {
style: {
fontFamily: '"Arial", sans-serif'
}
},
credits: {
enabled: false
}
});

You can also consider using default configurations based on chart types. I did the same for Pie and Gauge charts so that every Pie and Gauge chart maintains style consistency (unless overridden by an individual chart).

// Advanced Usage
import Highcharts from 'highcharts';


function setHighchartsDefaults() {
Highcharts.setOptions({
// Chart defaults
chart: {
style: {
fontFamily: '"Benton Sans", Arial, sans-serif'
},
marginTop: 20
},
// Legend configuration
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
padding: 40
},
// Disable credits
credits: {
enabled: false
},
// Plot options for specific chart types
plotOptions: {
pie: {
cursor: 'pointer',
showInLegend: true,
borderWidth: 0
},
gauge: {
dataLabels: {
align: 'center',
enabled: true,
style: { color: '#131517' }
}
}
}
});
}


setHighchartsDefaults();

Chart Types

Highcharts offers a wide range of chart types, each with its own set of options. Understanding these options is crucial for creating visually appealing and informative charts.

Grouped Bar Chart:

In this chart, multiple bars are displayed at a single point on the x-axis. The following code renders a grouped bar chart.

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';


export function BarChart() {
const option: Highcharts.Options = {
chart: {
type: 'column'
},
title: {
text: 'Corn vs wheat estimated production for 2023'
},
xAxis: {
categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India']
},
yAxis: {
title: {
text: '1000 metric tons (MT)'
}
},
series: [
{
type: 'column',
name: 'Corn',
data: [387749, 280000, 129000, 64300, 54000, 34300]
},
{ type: 'column', name: 'Wheat', data: [45321, 140000, 10000, 140500, 19500, 113500] }
]
};


return <HighchartsReact highcharts={Highcharts} options={option} />;
}

Pie Chart: This is a very common type of chart. I used the following code to set pie chart.

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';


export function PieChart() {
const option: Highcharts.Options = {
chart: {
type: 'pie'
},
title: {
text: 'Egg Yolk Composition'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y:.1f}%'
}
}
},
series: [
{
type: 'pie',
name: 'Percentage',
data: [
{
name: 'Water',
y: 55.02
},
{
name: 'Fat',
sliced: true,
selected: true,
y: 26.71
},
{
name: 'Carbohydrates',
y: 1.09
},
{
name: 'Protein',
y: 15.5
},
{
name: 'Ash',
y: 1.68
}
]
}
]
};


return <HighchartsReact highcharts={Highcharts} options={option} />;
}

Interactive Features

It is easy to enhance user experience and data exploration with the rich interactive features of Highcharts.

Its key interactive features includes

• Click and hover events: In some cases, we want to execute some custom functionalities when user clicks or hover over the charts. Highcharts has built-in support for these type of custom handlers
• Dynamic data updates: Highcharts allows you to dynamically update and add data to your charts by using  chart.update and chart.series APIs

Sample options object to handle click and mouse over event

const options = {
chart: {
events: {
load: function() {
// Chart loaded callback
console.log('Chart loaded');
},
redraw: function() {
// Chart redrawn callback
console.log('Chart redrawn');
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
// Handle point click
console.log('Point clicked:', this.category);
},
mouseOver: function() {
// Handle mouse over
this.update({
color: '#ff0000'
});
}
}
}
}
}
};

Responsive Design

Highcharts’ powerful responsive features ensure your charts look great on any device or screen size. It supports breakpoint-based layouts. This allows us to apply a certain set of rules when a particular condition is met. I have added a code example where I have added some customizations on legends when chart width is less that 500-

Sample options object to add responsive conditions

const options1 = {
responsive: {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
}
}
}
}
]
}
};

Accessibility Features

Highcharts makes charts accessible to all users, including those using screen readers or keyboard navigation. Its accessibility features include-

• Screen reader optimization
• Keyboard navigation
• High-contrast modes
• Descriptive announcements

Here is the code to include accessibility module

import AccessibilityModule from 'highcharts/modules/accessibility';
AccessibilityModule(Highcharts);


const options = {
accessibility: {
description: 'Chart showing sales trends over time',
announceNewData: {
enabled: true,
announcementFormatter: function (allSeries, newSeries, newPoint) {
if (newPoint) {
return 'New point added: ' + newPoint.category;
}
return false;
}
}
}
};

Exporting Capabilities

There can be a few business cases with a requirement to export the chart visualization in PDF or Image format. You can do this with Highcharts export module. All you need to do is to include the export module in Highcharts.

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';


import ExportModule from 'highcharts/modules/exporting';


ExportModule(Highcharts);

With is simple configuration, you will get below exporting options on all your charts

Custom Renderers

Rendering custom SVGshapes like circles, rectangles, path and texts directly inside your chart is easy with Highchart renderers. Each chart instance has its own reference to a renderer. This can be accessed by drawing shapes directly onto the chart’s SVG.

Let me elaborate this with a use case. Think of a situation where you have to add a custom label text below the pie chart. The label should appear as an integral part of the pie chart and should adjust as per the screen size.

Below code renders the Pie chart-

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';


export function SamplePieChart() {
const option: Highcharts.Options = {
chart: {
type: 'pie',
// extra margin to fit the labels below the chart
marginBottom: 100,
// drawing custom labels on load and each redraw
events: {
load: renderLabelsForPieChart,
redraw: renderLabelsForPieChart
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: ${point.y}'
}
}
},


series: [
{
type: 'pie',
name: 'Profit - Loss',
data: [
{
name: 'Profit',
y: 700
},
{
name: 'Loss',
y: 300
}
]
}
]
};


return <HighchartsReact highcharts={Highcharts} options={option} />;

Now let’s see the implementation of renderLabelsForPieChart plot the labels below the chart

function renderLabelsForPieChart(
this: Highcharts.Chart & { customLabelTitle?: Highcharts.SVGElement; customLabelSubtitle?: Highcharts.SVGElement }
) {
// Destroy exsiting labels if present
if (this.customLabelTitle) {
this.customLabelSubtitle.destroy();
}


if (this.customLabelSubtitle) {
this.customLabelSubtitle.destroy();
}


// Draw new labels and position them at the center of the chart so that they are not overlapping with the chart
this.customLabelTitle = this.renderer
.text('Title', this.plotLeft + this.plotWidth / 2, this.plotTop + this.plotHeight + 20)
.attr({
align: 'center'
})
.css({
fontSize: '18px',
fontWeight: 'bold'
})
.add();


this.customLabelSubtitle = this.renderer
.text('Subtitle', this.plotLeft + this.plotWidth / 2, this.plotTop + this.plotHeight + 40)
.attr({
align: 'center'
})
.css({
fontSize: '12px'
})
.add();
}

With this code, our Pie chart will look something like the following-

Comparison with Other Libraries

Feature	Highcharts	Chart.js	D3.js	Recharts
Ease of use	Easy	Easy	Complex (Low-level)	Very Easy
Performance	Excellent	Good	Excellent	Moderate
React Support	Official wrapper (highcharts-react-official)	Community wrapper (react-chartjs-2)	Manual integration only	Built-in
Interactivity	Rich built-in (zoom, tooltips, drilldowns)	Basic (hover, click)	🔧Custom (manual implementation)	Good (limited advanced features)
Customization	High ( themes,plugins, configs)	Moderate	Very High (full control)	Limited
License	Free for non-commercial, Paid for commercial	MIT	BSD	MIT
Documentation	Extensive, professional-grade	Good	Comprehensive but technical	Beginner-friendly
Best For	Dashboards, reporting, enterprise apps	Simple charts, hobby projects	Custom visualizations, academic use	Quick charts in React apps

Conclusion

Highcharts is an excellent choice for React applications requiring sophisticated data visualization. However, it comes with a commercial license cost, which may become a hurdle for a lot of startup companies. But when compared against its rich feature set, extensive documentation, and robust community support, it can be deemed as a valuable investment for professional applications.

Additional Resources

• Highcharts Official Documentation
• Highcharts React Wrapper
• Highcharts API Reference
• Highcharts Example Gallery

This comprehensive guide should help you get started with Highcharts in your React applications and provide you with some customizations that you must know before getting on with it.