In this tutorial, you will learn how to create a basic line chart component in React using functional or stateless component, Apexcharts, and Bootstrap packages.
A functional component is a basic JavaScript function and mainly used in React js environment.
Functional components are also known as “stateless” components thats because functional component by default doesn’t have its own state.
Bootstrap offers ready-made HTML, CSS, and JavaScript components that can be easily customized and styled to match the design of your website or application.
We will use bootstrap library to design the grid or layout whereas use ApexCharts package to create the line chart in react.
ApexCharts is an open-source JavaScript charting library that permits front-end developers to build interactive graphs and charts
in web and mobile apps.
ApexCharts supports a wide variety of chart types including line, area, bar, column, scatter, heatmap, and many more.
It is developed using top-notch data visualization library, D3.js, and offers handy and useful APIs for developing charts.
Not only but it also provides a wide range of customization options such as colors, gradients, labels, tooltips, and animations,
React Js Apex Line Chart Examples
You have to follow the given steps to integrate custom ApexCharts’ line chart in React app.
- Step 1: Setup React Application
- Step 2: Create Function Component
- Step 3: Basic Line Chart
- Step 4: Line Chart with Data Labels
- Step 5: Stepline Graph Chart
- Step 6: Line Chart with Gradient Line
- Step 7: Update App Js
- Step 8: Test App on Browser
Setup React Application
In order to understand this guide fully, you have to first set up the node and npm on your system.
You can download the tools from here: https://nodejs.org/en/.
Open your terminal, type the given command on the command-prompt and press enter.
npx create-react-app my-react-appAfter the installation process is over, make sure to enter inside the app folder.
cd my-react-appIt’s time to install apexcharts and bootstrap libraries. You can do it through npm or yarn package manager.
npm i react-apexcharts apexcharts bootstrap --legacy-peer-depsCreate Function Component
In this example, we create a functional component called ApexLineChart that can take a props object as a parameter and returns JSX code.
You have to create the components/ folder along with the ApexLineChart.js file.
Define the function, also import the Chart from ‘react-apexcharts’ package.
import React from 'react'
import Chart from 'react-apexcharts'
function ApexLineChart() {
return (
<div>
</div>
)
}
export default ApexLineChartBasic Line Chart
To create a basic line chart in React, you have to define the data.
You can use the define the const outside the function and pass the data into the Chart component.
Make sure to update the given code in the components/ApexLineChart.js file.
import React from "react";
import Chart from "react-apexcharts";
const data = {
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
options: {
chart: {
height: 350,
type: "line",
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Product Trends by Month",
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
},
},
};
function ApexLineChart() {
return (
<div>
<Chart
options={data.options}
series={data.series}
type="line"
height={350}
/>
</div>
);
}
export default ApexLineChart;Line Chart with Data Labels
You can add data labels in line chart, you need to define the data label in data variable.
import React from "react";
import Chart from "react-apexcharts";
const data = {
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33],
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13],
},
],
options: {
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2,
},
toolbar: {
show: false,
},
},
colors: ["#77B6EA", "#545454"],
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
},
title: {
text: "Average High & Low Temperature",
align: "left",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
markers: {
size: 1,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
title: {
text: "Month",
},
},
yaxis: {
title: {
text: "Temperature",
},
min: 5,
max: 40,
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5,
},
},
};
function ApexLineChart() {
return (
<div>
<Chart
options={data.options}
series={data.series}
type="line"
height={350}
/>
</div>
);
}
export default ApexLineChart;Stepline Graph Chart
A step line chart is a typical line chart that helps in joining the data points using horizontal and vertical lines.
It formulates a step-like pattern. It is also known as a step chart or a staircase chart.
You have to define the chart tag and demo data to build the step line chart in React.
import React from "react";
import Chart from "react-apexcharts";
const data = {
series: [
{
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58],
},
],
options: {
chart: {
type: "line",
height: 350,
},
stroke: {
curve: "stepline",
},
dataLabels: {
enabled: false,
},
title: {
text: "Stepline Chart",
align: "left",
},
markers: {
hover: {
sizeOffset: 4,
},
},
},
};
function ApexLineChart() {
return (
<div>
<Chart
options={data.options}
series={data.series}
type="area"
height={350}
/>
</div>
);
}
export default ApexLineChart;Line Chart with Gradient Line
In this step, we will learn how to add gradient in line chart’s line.
The following code will show you the easiest way to create a line chart with gradient line.
import React from "react";
import Chart from "react-apexcharts";
const data = {
series: [
{
name: "Sales",
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
},
],
options: {
chart: {
height: 350,
type: "line",
},
forecastDataPoints: {
count: 7,
},
stroke: {
width: 5,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
"8/11/2000",
"9/11/2000",
"10/11/2000",
"11/11/2000",
"12/11/2000",
"1/11/2001",
"2/11/2001",
"3/11/2001",
"4/11/2001",
"5/11/2001",
"6/11/2001",
],
tickAmount: 10,
labels: {
formatter: function (value, timestamp, opts) {
return opts.dateFormatter(new Date(timestamp), "dd MMM");
},
},
},
title: {
text: "Forecast",
align: "left",
style: {
fontSize: "16px",
color: "#666",
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#FDD835"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100],
},
},
yaxis: {
min: -10,
max: 40,
},
},
};
function ApexLineChart() {
return (
<div>
<Chart
options={data.options}
series={data.series}
type="area"
height={350}
/>
</div>
);
}
export default ApexLineChart;Update Main Entry
To render the chart UI component on the browser, we have to include or import the ApexLineChart component inside the App.js file.
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexLineChart from "./components/ApexLineChart";
function App() {
return (
<div className="container mt-3">
<h2 className="mb-3">
React Apexcharts Line Charts Customization Example
</h2>
<ApexLineChart />
</div>
);
}
export default App;Run App on Browser
Open the command-prompt one more time, run the command to evoke the development server:
npm startOnce the React server is started, It will open the app on the browser on:
http://localhost:3000Once the server is invoked, your react app will render the following chart:
Conclusion
ApexCharts is a powerful and flexible charting library that makes it easy to create beautiful, dynamic and interactive charts for React web applications.
In this tutorial we learned how to implement line chart in React js application using ApexCharts library.
Not only but also we have understood how to build line chart data labels in React, stepline chart in React, and gradient line chart in React.