Share
Highcharts is a well-known JavaScript library that enables the development of dynamic charts and graphs. Below is a guide on integrating Highcharts into your React project.
To begin, you need to install the Highcharts React wrapper, which enables Highcharts to be used within a React component. You may utilize npm to install it by executing the subsequent command:
npm install highcharts
npm install highcharts-react-official
To import Highcharts and the Highcharts React wrapper into your component, follow these steps after installing the wrapper:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
Here's an example of creating a basic bar chart using the Highcharts library:
import React, { useState } from 'react'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; function BarChart() { const [options, setOptions] = useState({ chart: { type: 'bar' }, title: { text: 'Monthly Sales' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Revenue' } }, series: [ { name: 'Sales', data: [15000, 23000, 20000, 17000, 22000, 25000, 18000, 19000, 21000, 24000, 28000, 32000] } ] }); return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); } export default BarChart;
In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. Finally, the HighchartsReact component is used to render the chart on the page.
Here's an example of creating a basic line chart using the Highcharts library:
import React, { useState } from 'react'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; function LineChart() { const [options, setOptions] = useState({ chart: { type: 'line' }, title: { text: 'Daily Temperatures' }, xAxis: { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] }, yAxis: { title: { text: 'Temperature (°C)' } }, series: [ { name: 'High', data: [5, 4, 6, 8, 7, 9, 10] }, { name: 'Low', data: [2, 1, 3, 5, 4, 6, 7] } ] }); return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); } export default LineChart;
In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. In this case, the series property contains two objects, each representing a line on the chart. Finally, the HighchartsReact component is used to render the chart on the page.
Here's an example of creating an area chart using the Highcharts library:
import React, { useState } from 'react'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; function AreaChart() { const [options, setOptions] = useState({ chart: { type: 'area' }, title: { text: 'Sales by Region' }, xAxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: { title: { text: 'Sales ($)' } }, series: [ { name: 'North America', data: [50000, 70000, 90000, 110000] }, { name: 'Europe', data: [40000, 60000, 80000, 100000] }, { name: 'Asia', data: [30000, 50000, 70000, 90000] } ] }); return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); } export default AreaChart;
In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. In this case, the series property contains three objects, each representing a region's sales data. The type property of the chart object is set to 'area' to create an area chart. Finally, the HighchartsReact component is used to render the chart on the page.
Also, read: React Performance Optimization: Enhance speed and user experience
Share
Looking for
Solutions?
Yaani PatelJuly 22, 2022
Aashish Kasma & Vedika PandeySep 14, 2022
Learning comes not only with training but it comes as we facilitate the learning of the organization as well as individuals and the clients continuously refurbishing ourselves.
We believe in Innovation and have started our company based on that concept. When you don't transform you become stagnant.
Innovation Transformation
Growth.
We work efficiently as a team. We self-monitor. We deliver results efficiently with the help of multiple perspectives and skill sets. We form strong working relationships as we communicate well with each other.
Lucent Innovation, © 2023. All rights reserved.Privacy policy