React Highcharts is a React wrapper for Highcharts, a powerful charting library. It provides a React-friendly API for creating interactive, responsive charts with extensive customization options. This guide walks through setting up and creating charts using React Highcharts with React, from installation to a working implementation.
Prerequisites
Before you begin, make sure you have:
Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager- A React project (version 16.8 or higher) or create-react-app setup
- Basic knowledge of React components
- Familiarity with JavaScript/TypeScript
Installation
Install React Highcharts and Highcharts:
npm install react-highcharts highcharts
Or with yarn:
yarn add react-highcharts highcharts
Or with pnpm:
pnpm add react-highcharts highcharts
After installation, your package.json should include:
{
"dependencies": {
"react-highcharts": "^16.0.0",
"highcharts": "^11.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
Project Setup
React Highcharts requires minimal setup. Import the components and you're ready to use them.
First Example / Basic Usage
Let's create a simple line chart. Create a new file src/ChartExample.jsx:
// src/ChartExample.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';
function ChartExample() {
const config = {
chart: {
type: 'line'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [35, 28, 34, 32, 40, 32]
}]
};
return (
<div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
<h2>Basic Highcharts Example</h2>
<ReactHighcharts config={config} />
</div>
);
}
export default ChartExample;
Update your App.jsx:
// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';
function App() {
return (
<div className="App">
<ChartExample />
</div>
);
}
export default App;
This creates a basic line chart with monthly sales data.
Understanding the Basics
React Highcharts provides a React component:
ReactHighcharts component: Main chart component
config prop: Chart configuration object
Chart types: Line, Column, Bar, Pie, Area, etc.
Interactive features: Tooltips, zoom, drilldown, etc.
Responsive: Automatic responsive behavior
Key concepts:
Config object: Configure chart through config prop
Chart structure: chart, title, xAxis, yAxis, series
Series array: Define data series
Categories: X-axis labels
Data: Array of values for each series
Here's an example with multiple chart types:
// src/MultipleChartsExample.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';
function MultipleChartsExample() {
const lineConfig = {
chart: { type: 'line' },
title: { text: 'Line Chart' },
xAxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
yAxis: { title: { text: 'Value' } },
series: [{ name: 'Sales', data: [120, 132, 101, 134, 90] }]
};
const barConfig = {
chart: { type: 'column' },
title: { text: 'Bar Chart' },
xAxis: { categories: ['Product A', 'Product B', 'Product C'] },
yAxis: { title: { text: 'Value' } },
series: [{ name: 'Revenue', data: [120, 200, 150] }]
};
const pieConfig = {
chart: { type: 'pie' },
title: { text: 'Pie Chart' },
series: [{
name: 'Distribution',
data: [
['Chrome', 37],
['Safari', 19],
['Firefox', 18]
]
}]
};
return (
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
<h2>Multiple Charts Example</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
<ReactHighcharts config={lineConfig} />
<ReactHighcharts config={barConfig} />
<ReactHighcharts config={pieConfig} />
</div>
</div>
);
}
export default MultipleChartsExample;
Practical Example / Building Something Real
Let's build a comprehensive dashboard with multiple charts:
// src/DashboardCharts.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';
function DashboardCharts() {
const salesConfig = {
chart: {
type: 'line'
},
title: {
text: 'Sales vs Target'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [
{
name: 'Sales',
data: [35, 28, 34, 32, 40, 32]
},
{
name: 'Target',
data: [40, 35, 38, 36, 42, 38]
}
],
tooltip: {
shared: true
}
};
const revenueConfig = {
chart: {
type: 'column'
},
title: {
text: 'Quarterly Revenue'
},
xAxis: {
categories: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
title: {
text: 'Revenue'
}
},
series: [{
name: 'Revenue',
data: [12000, 15000, 18000, 20000]
}]
};
const categoryConfig = {
chart: {
type: 'pie'
},
title: {
text: 'Product Distribution'
},
series: [{
name: 'Products',
data: [
['Product A', 35],
['Product B', 28],
['Product C', 34],
['Product D', 32]
]
}]
};
return (
<div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
<h1>Sales Dashboard</h1>
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
<ReactHighcharts config={salesConfig} />
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
<ReactHighcharts config={revenueConfig} />
<ReactHighcharts config={categoryConfig} />
</div>
</div>
</div>
);
}
export default DashboardCharts;
Now create an interactive chart with events:
// src/InteractiveChart.jsx
import React, { useState } from 'react';
import ReactHighcharts from 'react-highcharts';
function InteractiveChart() {
const [selectedPoint, setSelectedPoint] = useState(null);
const config = {
chart: {
type: 'line',
events: {
click: function(e) {
console.log('Chart clicked', e);
}
}
},
title: {
text: 'Interactive Sales Chart'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [35, 28, 34, 32, 40, 32],
point: {
events: {
click: function() {
setSelectedPoint({
category: this.category,
value: this.y
});
}
}
}
}],
tooltip: {
enabled: true
}
};
return (
<div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
<h2>Interactive Chart</h2>
{selectedPoint && (
<div style={{
padding: '10px',
backgroundColor: '#f8f9fa',
borderRadius: '4px',
marginBottom: '20px'
}}>
Selected: {selectedPoint.category} - {selectedPoint.value}
</div>
)}
<ReactHighcharts config={config} />
</div>
);
}
export default InteractiveChart;
Update your App.jsx:
// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import InteractiveChart from './InteractiveChart';
import './App.css';
function App() {
return (
<div className="App">
<DashboardCharts />
<InteractiveChart />
</div>
);
}
export default App;
This example demonstrates:
- Multiple chart types
- Dashboard layout
- Multiple series
- Interactive features
- Event handling
- Custom styling
Common Issues / Troubleshooting
Chart not displaying: Make sure you've installed both
react-highchartsandhighcharts. The chart requires Highcharts core library.Config not working: Check that the config object follows Highcharts configuration format. Refer to Highcharts documentation for correct structure.
Data not showing: Ensure the series array contains data arrays. Check that categories match the data length.
Styling issues: Customize colors and styles in the config object. Use
colorsarray for custom color schemes.Responsive not working: Charts are responsive by default. Use
chart.widthandchart.heightfor fixed dimensions.Events not working: Use
chart.eventsorseries.point.eventsin the config to attach event handlers. Check Highcharts event documentation for available events.
Next Steps
Now that you have a basic understanding of React Highcharts:
- Explore all available chart types
- Learn about advanced configurations
- Implement custom tooltips
- Add animations and transitions
- Create real-time updating charts
- Learn about other chart libraries
- Check the official repository: https://github.com/kirjs/react-highcharts
Summary
You've successfully set up React Highcharts in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React Highcharts provides a powerful solution for creating interactive data visualizations with extensive customization options.
SEO Keywords
react-highcharts
React Highcharts
react-highcharts tutorial
React data visualization
react-highcharts installation
React chart library
react-highcharts example
React interactive charts
react-highcharts setup
React Highcharts dashboard
react-highcharts customization
React chart component
react-highcharts events
React chart visualization
react-highcharts getting started
SOCIAL SHARE CARD GENERATOR