How to Create a Line Chart in React with SciChart

When building a line chart, your brief may require more than just conveying the information in a graphical format. There may be a requirement for the data to be displayed with custom colours, as part of a dashboard or to ensure dynamic rendering to keep up with the input of a 24/7 data source.

We’ll guide you through the process of creating dynamic and insightful line charts using React and SciChart. Learn how to set up, customize and add interactivity to your charts for a richer user experience that helps users effortlessly acquire the insights they’re searching for.

Why a React Line Chart?

From prices to vital signs, line charts make visualizing trends across time series and sequential data accessible for many sectors and use cases.

Financial dashboards commonly use React-powered line charts to plot time-series market data and performance metrics.

In the oil and gas industry, React line charts support the monitoring of well data, process variables, and IoT sensor streams. It’s not uncommon for a React-based Oil & Gas Explorer demo to display multiple line charts of well log curves (gamma-ray, resistivity, porosity logs, etc.) in a synchronized dashboard.

Line charts are also at the forefront of healthcare. As an example, line charts in hospital analytics dashboards are an effective way to communicate daily hospital admissions over time and clearly display changes in demands for hospital beds. Thinking about the rise of wearable tech, fitness app users want to view their step count or heart rate over a period of time.

This information has many applications, such as improving patient experiences in hospitals and making health conditions easier to manage.

Setting Up Your Project

Your true north should always be to read the documentation first. However, if you prefer to get started with visual support, we recommend looking at the examples and demos.

Whichever sector you’re building your React line chart for, we’ll show you how to set up a project with SciChart-React. This sets the foundation for building your chart—from there, you can add the more fun elements that make the look and feel of the chart both fully customized and high-performance.

Initialising an npm project


> npm install --save-dev webpack
> npm install --save-dev webpack-dev-server
> npm install --save-dev webpack-cli
> npm install --save-dev copy-webpack-plugin

Creating a Line Chart with SciChart

Use the SciChart component to render your first chart. The provided code demonstrates how to create a line chart using the createChart function. This function initializes a SciChart surface, sets up X and Y axes, generates sample data, and associates it with a line series. The chart is then added to the SciChart surface. As your first port of call, we recommend reading through Tutorial 01 and Tutorial 02 (linked below) as these show you how to get set up and add your data.

Useful Resources:

• Tutorial 01: Setting Up HTML Page with SciChart CDN
• Tutorial 02: Adding Series and Data
• Tutorial: Setting up a Project with SciChart, npm and webpack
• Building a React Chart from Scratch
• Getting-Started with SciChart.js
• GitHub SciChart React
• SciChart.js User Manual
• Builder API

Available modifications of line charts include:

• Digital line chart
• Dashed lines
• Hovering/selecting lines
• Line annotations
• Per-point coloring of line segments
• Spline line chart

What Language Should You Use to Build Your React Line Chart? 

Our top tip for building React line charts is to use TypeScript rather than JavaScript. For example, when setting a property on an X axis using the code editor, TypeScript support makes it easier to see documentation and typos. With JavaScript, typos may not be noticed until much later. This makes it more difficult to maintain the project and might take more time to get over the line.

If you want to create a simple chart, you can use JSON using our Builder API. This is similar to other JavaScript chart libraries meaning if you’re new to SciChart, the learning curve will be negligible.

SciChart React Line Chart Demo

Useful Resources: 

• Tutorial 02: Creating a Line Chart in React with SciChart.js
• GitHub Tutorial Creating Charts with scichart-react and initChart

Customizing Your React Line Chart

When creating a line chart, there are several API documentation you should refer to, including the Axis API, Annotations API and ChartModifier API. The latter is required to add interactions. In GitHub, you can easily work your way down the list of properties, including everything from styling and theming  to accessibility which shows you how to add voiceovers, keyboard accessibility and color contrast. See what is possible to achieve with the SciChart React charts by exploring our APIs.

SciChart supports an abundance of customizations with tens of thousands of properties. These support visual design elements as well as the ability to add interactivity and annotations to help end users engage more with the finished React line chart. We’ll guide you on some of the more common customizations, including adding multiple axes and applying zooming and panning.

Multi-Axis Line Chart

Supporting unlimited axes opens up plenty of possibilities. The procedure to add a second axis to a SciChartSurface is pretty much the same as with one axis, with one difference. You must assign a unique string ID to all axes via the axis.id property if there is more than one. In version 4, this behavior changes, and IDs are auto-generated. After adding an axis you can use the axis.id to set it for series, annotations and chart modifiers. To see the axis appear on either side of a chart, you set the axis. axisAlignment to EAxisAlignment.

View The tutorial

Zooming and Panning

In SciChart, chart interactions are defined by ChartModifiers. In addition to the SciChart modifiers you can write custom modifiers or extend existing ones.

The provided modifiers include RubberBandXyZoomModifier, ZoomPanModifier, ZoomExtentsModifier, MouseWheelZoomModifier and more.

Tooltips and Hover Effects

Tooltips and hover effects offer a better user experience. Discover how to add them by watching the step-by-step video tutorial. Annotation possibilities include an onHover callback and a hover modifier. This opens up the doors to adding tooltips or getting notified when a user hovers over an annotation. This helps your organization better understand how the end user interacts with your data visualization and see what interests them vs. what gets ignored. Try it for yourself with our Hover Annotations Documentation.

Reliable Performance for Large Datasets

Line charts are not complex. But the problem comes when you’re trying to draw 100,000 or 1 million lines—that makes it much more difficult. Most libraries without hardware acceleration will fail to support this many lines.

For smoother performance, we also recommend using WebGL rendering, as opposed to 2D canvas rendering . The beauty of WebGL is that computational intensive tasks, such as rendering 3D charts or matrix transformations, are processed on GPU instead of CPU which is much faster because of parallel computing.

The ultimate result is a more performant and reliable React line chart visualization. You’ll also want to ensure automatic updates, and with a responsive GPU-based React chart library, you can achieve exactly that. Data populates in real-time, ensuring the end user has the most up-to-date information at the click of a button. It does this automatically, whenever the data source collects new material.

A cross-platform chart library can also ensure that charts work across platforms and devices without lag or slow down—useful for organizations that increasingly rely on multiple devices to communicate the same information. It ensures a consistent experience and reduces user experience frustration.

Getting the Support You Need as Quickly as Possible

Building basic line charts shouldn’t require much of a learning curve. However, if you encounter an obstacle with your chart creation or data rendering performance, you’ll want to know how to get the support you need as quickly as possible.

SciChart offers a responsive support service, however, there are ways to boost the response time and ability to secure a solution to your roadblock faster. By creating a minimal project showcasing the problem  first and sharing it with our developer team, this will make the response time to your query much quicker and you will likely not need to do as many iterations. It’s better for our team to have a runnable source code or Codepen example to look at than random bits of code — this will provide a quicker diagnostic time.

Next Steps for Building High-Performance Line Charts

scichart-react is a free, open-source React Chart component for use with scichart.js. This simplifies the development of React Charts by handling initialisation, deletion and lifecycle of the chart and allows multiple options for creating simple to advanced options.

Unlock the power of data visualization in your React applications with SciChart, a high-performance charting library. For further customization, we recommend exploring our documentation.