Creating a React Dashboard with SciChart.js, SciChart-React and Deepseek AI

In this tutorial, we'll walk through creating a fully interactive, dynamic dashboard in React with SciChart.js in 20 minutes, coding almost entirely with AI. The dashboard features five chart types: a React Line Chart, React Scatter Chart, React Stacked Column Chart, React Mountain Chart and React Pie Chart, arranged in a grid layout. We'll cover how to integrate SciChart.js into a React dashboard using scichart-react, apply a custom theme and position the charts in a consistent layout. By the end, you'll have a fully functional React dashboard you can customise for data visualisation in any domain.

Introduction

Data visualisation is a critical part of modern web applications, helping users understand complex data at a glance. With a powerful React chart library like SciChart.js, developers can create stunning, high-performance visualisations with ease. Combined with React, a popular JavaScript library for building user interfaces and interactive dashboards, the possibilities are endless.

In this tutorial, we'll build a dynamic dashboard that showcases five chart types in a single view. The dashboard is interactive, with tooltips, legends, and zooming and panning so you can inspect data on the fly. We'll also apply SciChart.js's Navy theme for a sleek, professional look.

We'll show the power of generative AI for building this React dashboard layout using Deepseek R1, an open-source competitor to ChatGPT, including the prompts we used and the changes needed to get the dashboard working. The whole tutorial is coded in CodeSandbox.

Key Takeaways

How to integrate SciChart.js into a React application
Creating and customising five chart types: React Line Chart, React Scatter Chart, React Stacked Column Chart, React Mountain Chart and React Pie Chart
Applying a custom theme (Navy theme) to all charts for a cohesive look
Adding legends, zooming, panning and tooltips
The limitations, pros and cons of using AI such as ChatGPT or Deepseek to create React dashboards, and where this technology could go next

Who Is This For?

Frontend developers looking to improve their data visualisation skills
React developers interested in integrating advanced charting libraries
Data enthusiasts who want to build interactive dashboards for data analysis

Getting Started

Creating the Input Prompt

We start by using Deepseek, an open-source competitor to ChatGPT that scores highly in coding benchmarks and runs at a fraction of the cost of OpenAI's solutions.

Here's our first prompt:

Create a dashboard in react with 5 charts using SciChart.js and scichart-react. Each chart should be hosted in a <SciChartReact/> component. initChart should not be inline but be a separate function.

The charts should be arranged in two rows. The first row should have two charts: a line chart (top left) and a scatter chart (top right).

The second row should have three charts: A stacked column chart (bottom left), a Mountain chart (bottom middle) and a pie chart (bottom right). Create some dummy data to upload to the charts and create the dashboard.

Choose the theme SciChartJsNavyTheme to apply to each chart. Do not set any Series Colors or Fill/Stroke on the chart series, as these will be applied automatically by the theme.

Ensure all SciChart type imports are import { A, B, C } from 'scichart'

Deepseek gets straight to work, correctly recommending npm install scichart scichart-react. It then provides JSX output to include in your application.

The first output from Deepseek was good, but slightly incorrect. We'll correct it later. Here's the initial draft of dashboard.jsx in full:

dashboard.jsx version #1 (with errors)

import React from "react"; import { SciChartSurface, NumericAxis, FastLineRenderableSeries, XyDataSeries, EllipsePointMarker, FastScatterRenderableSeries, StackedColumnCollection, StackedColumnRenderableSeries, FastMountainRenderableSeries, PieChart, PieSegment, SciChartJsNavyTheme, } from "scichart"; import { SciChartReact } from "scichart-react"; // Initialize the line chart const initLineChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const xAxis = new NumericAxis(wasmContext); const yAxis = new NumericAxis(wasmContext); sciChartSurface.xAxes.add(xAxis); sciChartSurface.yAxes.add(yAxis); const lineSeries = new FastLineRenderableSeries(wasmContext, { dataSeries: new XyDataSeries(wasmContext, { xValues: [1, 2, 3, 4, 5], yValues: [2, 4, 6, 8, 10], }), }); sciChartSurface.renderableSeries.add(lineSeries); return sciChartSurface; }; // Initialize the scatter chart const initScatterChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const xAxis = new NumericAxis(wasmContext); const yAxis = new NumericAxis(wasmContext); sciChartSurface.xAxes.add(xAxis); sciChartSurface.yAxes.add(yAxis); const scatterSeries = new FastScatterRenderableSeries(wasmContext, { dataSeries: new XyDataSeries(wasmContext, { xValues: [1, 2, 3, 4, 5], yValues: [3, 5, 7, 9, 11], }), pointMarker: new EllipsePointMarker(wasmContext, { width: 10, height: 10 }), }); sciChartSurface.renderableSeries.add(scatterSeries); return sciChartSurface; }; // Initialize the stacked column chart const initStackedColumnChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const xAxis = new NumericAxis(wasmContext); const yAxis = new NumericAxis(wasmContext); sciChartSurface.xAxes.add(xAxis); sciChartSurface.yAxes.add(yAxis); const stackedColumnCollection = new StackedColumnCollection(wasmContext); const series1 = new StackedColumnRenderableSeries(wasmContext, { dataSeries: new XyDataSeries(wasmContext, { xValues: [1, 2, 3, 4, 5], yValues: [2, 3, 4, 5, 6], }), }); const series2 = new StackedColumnRenderableSeries(wasmContext, { dataSeries: new XyDataSeries(wasmContext, { xValues: [1, 2, 3, 4, 5], yValues: [1, 2, 3, 4, 5], }), }); stackedColumnCollection.add(series1, series2); sciChartSurface.renderableSeries.add(stackedColumnCollection); return sciChartSurface; }; // Initialize the mountain chart const initMountainChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const xAxis = new NumericAxis(wasmContext); const yAxis = new NumericAxis(wasmContext); sciChartSurface.xAxes.add(xAxis); sciChartSurface.yAxes.add(yAxis); const mountainSeries = new FastMountainRenderableSeries(wasmContext, { dataSeries: new XyDataSeries(wasmContext, { xValues: [1, 2, 3, 4, 5], yValues: [5, 4, 3, 2, 1], }), }); sciChartSurface.renderableSeries.add(mountainSeries); return sciChartSurface; }; // Initialize the pie chart const initPieChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const pieChart = new PieChart(wasmContext, { segments: [ new PieSegment({ value: 30, title: "Segment 1" }), new PieSegment({ value: 20, title: "Segment 2" }), new PieSegment({ value: 50, title: "Segment 3" }), ], }); sciChartSurface.renderableSeries.add(pieChart); return sciChartSurface; }; // Dashboard component const Dashboard = () => { return ( <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}> {/* First row */} <div style={{ display: "flex", gap: "20px" }}> <div style={{ flex: 1 }}> <SciChartReact initChart={initLineChart} style={{ width: "100%", height: "400px" }} /> </div> <div style={{ flex: 1 }}> <SciChartReact initChart={initScatterChart} style={{ width: "100%", height: "400px" }} /> </div> </div> {/* Second row */} <div style={{ display: "flex", gap: "20px" }}> <div style={{ flex: 1 }}> <SciChartReact initChart={initStackedColumnChart} style={{ width: "100%", height: "400px" }} /> </div> <div style={{ flex: 1 }}> <SciChartReact initChart={initMountainChart} style={{ width: "100%", height: "400px" }} /> </div> <div style={{ flex: 1 }}> <SciChartReact initChart={initPieChart} style={{ width: "100%", height: "400px" }} /> </div> </div> </div> ); }; export default Dashboard;

Creating a Project in CodeSandbox

Let's move this into an IDE. For this tutorial we'll use CodeSandbox, which provides a ready-made in-browser IDE with full npm, JavaScript and React support.

On the CodeSandbox homepage, click Create to create a new sandbox.

Choose React (TS) as the template. This creates a new React project with npm and TypeScript or JavaScript support.

In the dependencies section, add scichart and scichart-react. This is equivalent to running npm install scichart scichart-react in your IDE. Your package.json should update as follows:

Next, create a file called dashboard.jsx and paste in the code from the prompt above. Note that the code is incorrect, as AI isn't perfect yet, but we'll make some minor changes to get it compiling.

Now, modify the default App.tsx to contain a <Dashboard/> component:

import "./styles.css"; import Dashboard from "./dashboard"; export default function App() { return ( <div className="App"> <Dashboard /> </div> ); }

You should see something like this. Promising, but not quite working yet. In the next section we'll work through the errors to get a working React dashboard.

Getting the Dashboard Working

Let's work through the errors.

Error #1: Check types are correct

AI tools such as ChatGPT or Deepseek often make subtle syntax errors. They're trained on the whole internet but may not have specific knowledge of a particular library like SciChart. These are easily fixed with a little knowledge of the library and the SciChart.js documentation.

For example, in dashboard.jsx, FastScatterRenderableSeries is incorrect and should be XyScatterRenderableSeries. Check for other badly imported types or type errors. CodeSandbox highlights syntax errors and offers autocomplete (IntelliSense) for types in the SciChart library.

Error #2: Could not load SciChart WebAssembly module

Could not load SciChart WebAssembly module. Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

This error occurs because you need to either package the wasm and data files or load them from a CDN. You can find out how in the documentation on deploying Wasm and data files.

Add a call to SciChartSurface.loadWasmFromCDN() at the start of your Dashboard React component:

// Dashboard component const Dashboard = () => { SciChartSurface.loadWasmFromCDN(); // Add this call return ( <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}> {/* First row */} <div style={{ display: "flex", gap: "20px" }}> <div style={{ flex: 1 }}> ...

Error #3: _scichart.PieChart is not a constructor

Deepseek got this one completely wrong, but no worries. We can find the real syntax for creating a pie chart in the SciChart JavaScript Pie Chart demo.

Here's the incorrect code from the AI:

// Initialize the pie chart const initPieChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create( rootElement, { theme: new SciChartJsNavyTheme(), } ); const pieChart = new PieChart(wasmContext, { segments: [ new PieSegment({ value: 30, title: "Segment 1" }), new PieSegment({ value: 20, title: "Segment 2" }), new PieSegment({ value: 50, title: "Segment 3" }), ], }); sciChartSurface.renderableSeries.add(pieChart); return sciChartSurface; };

And here's the correct code:

const initPieChart = async (rootElement) => { const sciChartSurface = await SciChartPieSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const pieChartData = [ { value: 40, text: "Segment 1" }, { value: 30, text: "Segment 2" }, { value: 20, text: "Segment 3" }, { value: 10, text: "Segment 4" }, ]; pieChartData.forEach((segment) => sciChartSurface.pieSegments.add(new PieSegment(segment)) ); return sciChartSurface; };

Error #4: "initChart" function should resolve to an object with "sciChartSurface" property ({ sciChartSurface })

This error relates to scichart-react, which expects an initialisation function <SciChartReact initChart={function}/> that returns { sciChartSurface }.

Here's the incorrect code the AI generated for each chart:

// Initialize the line chart const initLineChart = async (rootElement) => { const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, { theme: new SciChartJsNavyTheme(), }); const xAxis = new NumericAxis(Source：https://dev.to/andyb1979/creating-a-react-dashboard-with-scichartjs-scichart-react-and-deepseek-ai-3jijMy favorites

PreviousFinding the difficulty cliff: 20,000 simulated weeks of a two-minute horror gameNextNode 26 Ships Temporal by Default. A Carbon User's Guide to Dates in TypeScript

`Related posts`


What a forward deployed AI engineer actually does
Not a solutions engineer, not a researcher. A working definition of the forward deployed AI engineer role, drawn from do
0dev.to
How to Get Your First Freelance Client When You Have No Experience
A digital marketing learner from Kerala on the practical steps between “I have skills” and “someone is paying me.” Every
0dev.to
Best shadcn registries for ready-made blocks in 2026
Checked against official sites on November 2, 2026. You need a pricing section, a hero and a footer. The useful question
0dev.to
How we score an election forecast (and what the score does not measure)
How we score an election forecast (and what the score does not measure) TL;DR: We score the reasoning before the outcome
0dev.to
Handling Failures as Values in Agent-Generated Code
I am Jake Burwick, a high school student, and I built Vow, an open source programming language under the MIT license des
0dev.to
My Favourite Laptop
Article URL: https://blog.jsbarretto.com/post/laptop Comments URL: https://news.ycombinator.com/item?id=50339815 Points:
0Hacker News