Aaron King

Posted on Jan 19

Getting Started with React Highcharts: Creating Interactive Charts in React

#react #webdev #tutorial #beginners

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-highcharts and highcharts. 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 colors array for custom color schemes.
Responsive not working: Charts are responsive by default. Use chart.width and chart.height for fixed dimensions.
Events not working: Use chart.events or series.point.events in 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

DEV Community