Create Charts in React Easily with the react-jsx-highcharts Library

The react-jsx-highcharts library provides us with a flexible way to create charts in our React apps.

In this article, we’ll look at how to add charts with this library.

Installation

We can install the library by running:

npm i react-jsx-highcharts

We also need to install the Highcharts package by running:

npm i highcharts@^8.0.0

Then we can use it by writing:

import React from "react";
import {
  HighchartsChart,
  Chart,
  Title,
  XAxis,
  YAxis,
  LineSeries,
  withHighcharts,
  Subtitle,
  Legend
} from "react-jsx-highcharts";
import Highcharts from "highcharts";

let Charts = () => {
  return (
    <HighchartsChart>
      <Chart />
      <Title>fruit sales, 2010-2014</Title>
      <Subtitle>Source</Subtitle>
      <Legend layout="vertical" align="right" verticalAlign="middle" />
      <XAxis>
        <XAxis.Title>Time</XAxis.Title>
      </XAxis>
      <YAxis>
        <YAxis.Title>sales</YAxis.Title>
        <LineSeries name="apple" data={[100, 200, 500, 300, 200]} />
        <LineSeries name="orange" data={[200, 300, 349, 193, 483]} />
        <LineSeries name="grape" data={[158, 582, 482, 486, 192]} />
      </YAxis>
    </HighchartsChart>
  );
};

Charts = withHighcharts(Charts, Highcharts);

export default function App() {
  return (
    <div className="App">
      <Charts />
    </div>
  );
}

We use the withHighcharts higher-order component so that we get access to the Highcharts object for rendering the chart.

In the Charts component, we create the chart by using the HighchartsChart as the wrapper.

Chart creates the chart.

Title has the title.

Subtitle has the subtitle.

Legend has the chart legend.

XAxis has the x-axis label.

YAxis has the y-axis values.

LineSeries has the lines we want to add to the chart.

name has the name of the line.

data has the y-axis values.

We can add categories to the x-axis by adding the categories prop:

import React from "react";
import {
  HighchartsChart,
  Chart,
  Title,
  XAxis,
  YAxis,
  LineSeries,
  withHighcharts,
  Subtitle,
  Legend
} from "react-jsx-highcharts";
import Highcharts from "highcharts";

let Charts = () => {
  return (
    <HighchartsChart>
      <Chart />
      <Title>friut sales, 2010-2014</Title>
      <Subtitle>Source</Subtitle>
      <Legend layout="vertical" align="right" verticalAlign="middle" />
      <XAxis categories={[2010, 2011, 2012, 2013, 2014]}>
        <XAxis.Title>Time</XAxis.Title>
      </XAxis>
      <YAxis>
        <YAxis.Title>sales</YAxis.Title>
        <LineSeries name="apple" data={[100, 200, 500, 300, 200]} />
        <LineSeries name="orange" data={[200, 300, 349, 193, 483]} />
        <LineSeries name="grape" data={[158, 582, 482, 486, 192]} />
      </YAxis>
    </HighchartsChart>
  );
};

Charts = withHighcharts(Charts, Highcharts);

export default function App() {
  return (
    <div className="App">
      <Charts />
    </div>
  );
}

Now we see the x-axis ticks with the labels listed in catergories .

We can have multiple kinds of graphs in one chart.

For example, we can write:

import React from "react";
import {
  HighchartsChart,
  Chart,
  Title,
  XAxis,
  YAxis,
  ColumnSeries,
  withHighcharts,
  PieSeries,
  SplineSeries,
  Legend
} from "react-jsx-highcharts";
import Highcharts from "highcharts";

const pieData = [
  {
    name: "Jane",
    y: 13
  },
  {
    name: "John",
    y: 23
  },
  {
    name: "Joe",
    y: 19
  }
];

let Charts = () => {
  return (
    <HighchartsChart>
      <Chart />
      <Title>Combination chart</Title>
      <Legend />
      <XAxis categories={["Apples", "Oranges", "Pears", "Bananas", "Plums"]} />
      <YAxis>
        <ColumnSeries name="Jane" data={[3, 2, 1, 3, 4]} />
        <ColumnSeries name="John" data={[2, 3, 5, 7, 6]} />
        <ColumnSeries name="Joe" data={[4, 3, 3, 9, 0]} />
        <SplineSeries name="Average" data={[3, 2.67, 3, 6.33, 3.33]} />
        <PieSeries
          name="Total consumption"
          data={pieData}
          center={[100, 80]}
          size={100}
          showInLegend={false}
        />
      </YAxis>
    </HighchartsChart>
  );
};

Charts = withHighcharts(Charts, Highcharts);

export default function App() {
  return (
    <div className="App">
      <Charts />
    </div>
  );
}

We add the ColumnSeries component to add a bar chart.

PieSeries adds a pie chart.

SplineSeries adds a line chart.

The charts are very dynamic because we define the x and y axes separately.

Conclusion

The react-jsx-highcharts library is one of the most flexible charting libraries for React.