How to implement a line chart in React
In this article, we will explain to you how to implement a line chart in React. We’ll use the Highcharts package to build a line chart with ReactJS, just as we did in the previous post.
Checkout more articles on ReactJS
Demo Application
Let’s take a simple example to create a line chart with minimum configuration.
Implement a line chart in React
1. Create a react application
First, we’ll use the create-react-app
npm package to construct a react application. To build a react application, use the command below.
1 | npx create-react-app line-chart-react |
2. Add highcharts npm package
We’ll use the Highcharts npm package to make a line chart in this step. To add the dependency in the application, use the following command.
1 | npm i highcharts |
3. Create a line chart
Now we will use the chart
method of the highcharts package with minimum configuration to create a line chart. Use the following options to create a chart.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | { chart: { type: 'line' }, // type of the chart title: { text: 'Line Chart Title' }, // title of the chart subtitle: { text: 'Lorem Ipsum is simply dummy text' }, // subtitle of the chart yAxis: { title: { text: 'Y Axis Title' }, // the title of the Y Axis }, xAxis: { min: 0.4, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], title: { text: 'X Axis Title' } // the title of the X Axis }, tooltip: { headerFormat: '<span style="font-size:13px;font-weight:bold;">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, // tooltip appears when hovering over a point credits: { enabled: false }, series: dataSource // set of the data } |
Check out this link for more information about the options.
Let’s pretend we’re getting the data source through the API response. To simulate the scenario, we’ll set the dataSource
after 2 seconds using the setTimeout
function.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import React, { useEffect, useRef, useState } from 'react'; import Highcharts from 'highcharts'; function App() { const refContainer = useRef(null); const [dataSource, setDataSource] = useState([]); useEffect(() => { const chart = Highcharts.chart(refContainer.current, { chart: { type: 'line' }, // type of the chart title: { text: 'Line Chart Title' }, // title of the chart subtitle: { text: 'Lorem Ipsum is simply dummy text' }, // subtitle of the chart yAxis: { title: { text: 'Y Axis Title' }, // the title of the Y Axis }, xAxis: { min: 0.4, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], title: { text: 'X Axis Title' } // the title of the X Axis }, tooltip: { headerFormat: '<span style="font-size:13px;font-weight:bold;">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, // tooltip appears when hovering over a point credits: { enabled: false }, series: dataSource // set of the data }); if (dataSource.length > 0) { chart.hideLoading(); } else { chart.showLoading(); } }, [dataSource]); useEffect(() => { setTimeout(() => { setDataSource([{ name: 'Japan', data: [10, 14, 18, 61, 65, 72, 74, 79, 87, 89, 92, 93] }, { name: 'Germany', data: [3, 9, 13, 20, 25, 38, 40, 53, 55, 69, 70, 78] }, { name: 'London', data: [9, 15, 31, 50, 56, 60, 64, 67, 79, 82, 95, 97] }, { name: 'Canada', data: [4, 12, 22, 36, 42, 46, 58, 63, 71, 82, 84, 86] }]); }, 2000); }, []); return ( <div className="App"> <h3>Line chart in React - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div ref={refContainer} /> </div> ); } export default App; |
The chart was loaded in the div element using the refs
.
4. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!