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..!!
