React Line Chart
Demonstrates all the permutations of JavaScript Line Chart using SciChart.js, including Digital Line chart, Tooltips, Dashed lines, Gradient lines, Hovering/selecting lines, vertical lines and paletted lines.
drawExample.ts
index.tsx
ExampleDataProvider.ts
RandomWalkGenerator.ts
theme.ts
1import {
2 BoxAnnotation,
3 EAxisAlignment,
4 ECoordinateMode,
5 EDataLabelSkipMode,
6 ELabelPlacement,
7 ELineDrawMode,
8 EllipsePointMarker,
9 EStrokePaletteMode,
10 EVerticalTextPosition,
11 FastLineRenderableSeries,
12 GradientParams,
13 HorizontalLineAnnotation,
14 IPointMetadata,
15 IRenderableSeries,
16 IStrokePaletteProvider,
17 NumberRange,
18 NumericAxis,
19 PaletteFactory,
20 parseColorToUIntArgb,
21 Point,
22 RolloverModifier,
23 SciChartSurface,
24 SeriesSelectionModifier,
25 Thickness,
26 VerticalSliceModifier,
27 XyDataSeries,
28 FadeAnimation,
29 SweepAnimation,
30 WaveAnimation,
31} from "scichart";
32import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
33import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
34import { appTheme } from "../../../theme";
35
36export const getChartsInitializationAPI = () => {
37 const createChartCommon = async (divId: string | HTMLDivElement, title: string, isVertical: boolean = false) => {
38 // Create a SciChartSurface
39 const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId, {
40 theme: appTheme.SciChartJsTheme,
41 padding: new Thickness(5, 5, 5, 5),
42 title,
43 disableAspect: true,
44 titleStyle: {
45 placeWithinChart: true,
46 fontSize: 16,
47 },
48 });
49
50 const xAxis = new NumericAxis(wasmContext, { maxAutoTicks: 5 });
51 sciChartSurface.xAxes.add(xAxis);
52
53 const yAxis = new NumericAxis(wasmContext, { maxAutoTicks: 5, growBy: new NumberRange(0.05, 0.25) });
54 sciChartSurface.yAxes.add(yAxis);
55
56 xAxis.isVisible = false;
57 yAxis.isVisible = false;
58
59 if (isVertical) {
60 // We also want our padding on the xaxis at the start for vertical
61 sciChartSurface.xAxes.get(0).growBy = new NumberRange(0.2, 0.05);
62 }
63 return { sciChartSurface, wasmContext };
64 };
65
66 const createLineData = (whichSeries: number) => {
67 const data = ExampleDataProvider.getFourierSeriesZoomed(1.0, 0.1, 5.0, 5.15);
68
69 return {
70 xValues: data.xValues,
71 yValues: data.yValues.map((y) => (whichSeries === 0 ? y : whichSeries === 1 ? y * 1.1 : y * 1.5)),
72 };
73 };
74
75 const initJustLineCharts = async (rootElement: string | HTMLDivElement) => {
76 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Simple Line Chart");
77
78 let data = createLineData(2);
79
80 // Create and add a line series to the chart
81 sciChartSurface.renderableSeries.add(
82 new FastLineRenderableSeries(wasmContext, {
83 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
84 stroke: appTheme.VividOrange,
85 strokeThickness: 3,
86 opacity: 1,
87 animation: new SweepAnimation({ duration: 500 }),
88 })
89 );
90
91 data = createLineData(0);
92
93 // Create and add a line series to the chart
94 sciChartSurface.renderableSeries.add(
95 new FastLineRenderableSeries(wasmContext, {
96 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
97 stroke: appTheme.VividTeal,
98 strokeThickness: 3,
99 opacity: 1,
100 animation: new SweepAnimation({ duration: 500 }),
101 })
102 );
103
104 return { sciChartSurface, wasmContext };
105 };
106
107 const initDigitalLineCharts = async (rootElement: string | HTMLDivElement) => {
108 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Digital (Step) Line Charts");
109
110 const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
111 const yValues = [1, 2, 3, 2, 0.5, 1, 2.5, 1, 1];
112
113 // Create the Digital Line chart
114 sciChartSurface.renderableSeries.add(
115 new FastLineRenderableSeries(wasmContext, {
116 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
117 stroke: appTheme.VividOrange,
118 strokeThickness: 3,
119 // Digital (step) lines are enabled by setting isDigitalLine: true
120 isDigitalLine: true,
121 // Optional pointmarkers may be added via this property.
122 pointMarker: new EllipsePointMarker(wasmContext, {
123 width: 9,
124 height: 9,
125 fill: appTheme.ForegroundColor,
126 strokeThickness: 0,
127 }),
128 animation: new WaveAnimation({ duration: 500, delay: 200 }),
129 // Optional DataLabels may be added via this property.
130 dataLabels: {
131 style: { fontFamily: "Arial", fontSize: 11, padding: new Thickness(5, 5, 5, 5) },
132 color: appTheme.ForegroundColor,
133 aboveBelow: false,
134 verticalTextPosition: EVerticalTextPosition.Above,
135 },
136 })
137 );
138
139 return { sciChartSurface, wasmContext };
140 };
141
142 const initTooltipsOnLineCharts = async (rootElement: string | HTMLDivElement) => {
143 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Tooltips on Line Charts");
144
145 const { xValues, yValues } = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(25);
146
147 sciChartSurface.renderableSeries.add(
148 new FastLineRenderableSeries(wasmContext, {
149 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
150 stroke: appTheme.VividOrange,
151 strokeThickness: 3,
152 animation: new WaveAnimation({ duration: 500, delay: 200 }),
153 })
154 );
155
156 // The RolloverModifier adds tooltip behaviour to the chart
157 sciChartSurface.chartModifiers.add(
158 new RolloverModifier({
159 rolloverLineStroke: appTheme.VividOrange,
160 rolloverLineStrokeThickness: 2,
161 rolloverLineStrokeDashArray: [2, 2],
162 }),
163 new VerticalSliceModifier({
164 rolloverLineStroke: appTheme.VividOrange,
165 rolloverLineStrokeThickness: 2,
166 xCoordinateMode: ECoordinateMode.DataValue,
167 x1: 15,
168 })
169 );
170
171 return { sciChartSurface, wasmContext };
172 };
173
174 const initDashedLineCharts = async (rootElement: string | HTMLDivElement) => {
175 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Dashed Line Charts");
176
177 // Create some xValues, yValues arrays
178 let data = createLineData(0);
179
180 // Create and add a line series to the chart
181 sciChartSurface.renderableSeries.add(
182 new FastLineRenderableSeries(wasmContext, {
183 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
184 stroke: appTheme.VividOrange,
185 strokeThickness: 3,
186 // Dashed line charts are enabled by setting the StrokeDashArray property. The array defines draw & gap pixel length
187 strokeDashArray: [2, 2],
188 animation: new SweepAnimation({ duration: 750 }),
189 })
190 );
191
192 data = createLineData(1);
193
194 // Create and add a line series to the chart
195 sciChartSurface.renderableSeries.add(
196 new FastLineRenderableSeries(wasmContext, {
197 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
198 stroke: appTheme.VividOrange,
199 strokeThickness: 3,
200 opacity: 0.77,
201 strokeDashArray: [3, 3],
202 animation: new SweepAnimation({ duration: 500 }),
203 })
204 );
205
206 data = createLineData(2);
207
208 // Create and add a line series to the chart
209 sciChartSurface.renderableSeries.add(
210 new FastLineRenderableSeries(wasmContext, {
211 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
212 stroke: appTheme.VividOrange,
213 strokeThickness: 3,
214 opacity: 0.55,
215 strokeDashArray: [10, 5],
216 animation: new SweepAnimation({ duration: 500 }),
217 })
218 );
219
220 return { sciChartSurface, wasmContext };
221 };
222
223 const initPalettedLineCharts = async (rootElement: string | HTMLDivElement) => {
224 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Gradient Line Charts");
225
226 const data = createLineData(3);
227
228 // Returns IStrokePaletteProvider, preconfigured to colour each point with a gradient
229 // Can be fully customised to execute any rule on x,y,index or metadata per-point to colour the series
230 // See PaletteProvider documentation for more details
231 const xGradientPalette = PaletteFactory.createGradient(
232 wasmContext,
233 new GradientParams(new Point(0, 0), new Point(1, 1), [
234 { offset: 0, color: appTheme.VividOrange },
235 { offset: 0.5, color: appTheme.VividTeal },
236 { offset: 1.0, color: appTheme.VividSkyBlue },
237 ])
238 );
239
240 // Y gradient
241 const yGradientPalette = PaletteFactory.createYGradient(
242 wasmContext,
243 new GradientParams(new Point(0, 0), new Point(1, 1), [
244 { offset: 0, color: appTheme.VividOrange },
245 { offset: 0.5, color: appTheme.VividSkyBlue },
246 { offset: 1, color: appTheme.VividTeal },
247 ]),
248 new NumberRange(2, 4) // the range of y-values to apply the gradient to
249 );
250
251 // decresing Sine wave
252 var yValues = [];
253 for (var i = 0; i < 75; i++) {
254 yValues.push(3 + Math.sin((i * Math.PI) / 16) * (2 - i / 50));
255 }
256
257 sciChartSurface.renderableSeries.add(
258 new FastLineRenderableSeries(wasmContext, {
259 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
260 paletteProvider: xGradientPalette,
261 strokeThickness: 5,
262 animation: new SweepAnimation({ duration: 500 }),
263 }),
264
265 new FastLineRenderableSeries(wasmContext, {
266 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: yValues }),
267 paletteProvider: yGradientPalette,
268 strokeThickness: 5,
269 animation: new SweepAnimation({ duration: 500 }),
270 })
271 );
272
273 return { sciChartSurface, wasmContext };
274 };
275
276 const initHoveredLineCharts = async (rootElement: string | HTMLDivElement) => {
277 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Hover/Select Line Charts");
278
279 // Create some xValues, yValues arrays
280 let data = createLineData(0);
281
282 const onHoveredChanged = (series: IRenderableSeries, isHovered: boolean) => {
283 series.opacity = isHovered ? 1.0 : 0.7;
284 series.strokeThickness = isHovered ? 4 : 3;
285 };
286
287 const onSelectedChanged = (series: IRenderableSeries, isSelected: boolean) => {
288 series.strokeThickness = isSelected ? 5 : 3;
289 series.stroke = isSelected ? appTheme.VividSkyBlue : appTheme.VividOrange;
290 };
291
292 // Create and add a line series to the chart
293 sciChartSurface.renderableSeries.add(
294 new FastLineRenderableSeries(wasmContext, {
295 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
296 stroke: appTheme.VividOrange,
297 strokeThickness: 3,
298 opacity: 0.7,
299 onHoveredChanged,
300 onSelectedChanged,
301 animation: new SweepAnimation({ duration: 750 }),
302 })
303 );
304
305 data = createLineData(1);
306
307 // Create and add a line series to the chart
308 sciChartSurface.renderableSeries.add(
309 new FastLineRenderableSeries(wasmContext, {
310 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
311 stroke: appTheme.VividOrange,
312 strokeThickness: 3,
313 opacity: 0.7,
314 onHoveredChanged,
315 onSelectedChanged,
316 animation: new SweepAnimation({ duration: 500 }),
317 })
318 );
319
320 data = createLineData(2);
321
322 // Create and add a line series to the chart
323 sciChartSurface.renderableSeries.add(
324 new FastLineRenderableSeries(wasmContext, {
325 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
326 stroke: appTheme.VividOrange,
327 strokeThickness: 3,
328 opacity: 0.7,
329 onHoveredChanged,
330 onSelectedChanged,
331 animation: new SweepAnimation({ duration: 500 }),
332 })
333 );
334
335 // SeriesSelectionModifier adds the hover/select behaviour to the chart
336 // This has a global hovered/selected callback and there are also callbacks per-series (see above)
337 sciChartSurface.chartModifiers.add(new SeriesSelectionModifier({ enableHover: true, enableSelection: true }));
338
339 sciChartSurface.renderableSeries.get(2).isSelected = true;
340
341 return { sciChartSurface, wasmContext };
342 };
343
344 const initVerticalLineCharts = async (rootElement: string | HTMLDivElement) => {
345 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Vertical Line Charts", true);
346
347 // Setting xAxis.alignment = left/right and yAxis.alignemnt = top/bottom
348 // is all that's required to rotate a chart, including all drawing and interactions in scichart
349 sciChartSurface.xAxes.get(0).axisAlignment = EAxisAlignment.Right;
350 sciChartSurface.yAxes.get(0).axisAlignment = EAxisAlignment.Bottom;
351
352 let data = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(50);
353
354 sciChartSurface.renderableSeries.add(
355 new FastLineRenderableSeries(wasmContext, {
356 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
357 strokeThickness: 3,
358 stroke: appTheme.VividOrange,
359 pointMarker: new EllipsePointMarker(wasmContext, {
360 width: 5,
361 height: 5,
362 fill: appTheme.VividOrange,
363 strokeThickness: 0,
364 }),
365 animation: new SweepAnimation({ duration: 400, delay: 250 }),
366 })
367 );
368
369 data = new RandomWalkGenerator().Seed(12345).getRandomWalkSeries(50);
370
371 sciChartSurface.renderableSeries.add(
372 new FastLineRenderableSeries(wasmContext, {
373 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
374 strokeThickness: 3,
375 stroke: appTheme.VividTeal,
376 pointMarker: new EllipsePointMarker(wasmContext, {
377 width: 5,
378 height: 5,
379 fill: appTheme.VividTeal,
380 strokeThickness: 0,
381 }),
382 animation: new SweepAnimation({ duration: 400, delay: 250 }),
383 })
384 );
385
386 return { sciChartSurface, wasmContext };
387 };
388
389 const initGapsInLineCharts = async (rootElement: string | HTMLDivElement) => {
390 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Gaps in Line Charts");
391
392 const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
393
394 // When yValues has NaN in it, LineSeries.drawNaNAs can draw them as gaps or closed lines
395 const yValues = [
396 0.3933834,
397 -0.0493884,
398 0.4083136,
399 -0.0458077,
400 -0.5242618,
401 -0.9631066,
402 -0.6873195,
403 NaN,
404 -0.1682597,
405 0.1255406,
406 -0.0313127,
407 -0.3261995,
408 -0.5490017,
409 -0.2462973,
410 0.2475873,
411 0.15,
412 -0.2443795,
413 -0.7002707,
414 NaN,
415 -1.24664,
416 -0.8722853,
417 -1.1531512,
418 -0.7264951,
419 -0.9779677,
420 -0.5377044,
421 ];
422
423 sciChartSurface.renderableSeries.add(
424 new FastLineRenderableSeries(wasmContext, {
425 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
426 strokeThickness: 3,
427 stroke: appTheme.VividTeal,
428 drawNaNAs: ELineDrawMode.DiscontinuousLine,
429 pointMarker: new EllipsePointMarker(wasmContext, {
430 width: 5,
431 height: 5,
432 fill: appTheme.VividTeal,
433 strokeThickness: 0,
434 }),
435 animation: new FadeAnimation({
436 duration: 400,
437 delay: 250,
438 onCompleted: () => {
439 // Highlight the gaps with annotations stretched vertically
440 sciChartSurface.annotations.add(
441 new BoxAnnotation({
442 x1: 6,
443 x2: 8,
444 y1: 0.1,
445 y2: 1.0,
446 yCoordinateMode: ECoordinateMode.Relative,
447 fill: appTheme.MutedTeal + "33",
448 strokeThickness: 0,
449 }),
450 new BoxAnnotation({
451 x1: 17,
452 x2: 19,
453 y1: 0.1,
454 y2: 1,
455 yCoordinateMode: ECoordinateMode.Relative,
456 fill: appTheme.MutedTeal + "33",
457 strokeThickness: 0,
458 })
459 );
460 },
461 }),
462 })
463 );
464
465 return { sciChartSurface, wasmContext };
466 };
467
468 const initThresholdedLineCharts = async (rootElement: string | HTMLDivElement) => {
469 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Thresholded Line Charts");
470
471 const { xValues, yValues } = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(50);
472
473 const THRESHOLD_HIGH_LEVEL = 0;
474 const THRESHOLD_LOW_LEVEL = -2;
475 const THRESHOLD_LOW_COLOR_ARGB = parseColorToUIntArgb(appTheme.VividPink);
476 const THRESHOLD_HIGH_COLOR_ARGB = parseColorToUIntArgb(appTheme.VividTeal);
477
478 // PaletteProvider API allows for per-point colouring, filling of points based on a rule
479 // see PaletteProvider API for more details
480 const paletteProvider: IStrokePaletteProvider = {
481 strokePaletteMode: EStrokePaletteMode.GRADIENT,
482 onAttached(parentSeries: IRenderableSeries): void {},
483 onDetached(): void {},
484 // This function called once per data-point. Colors returned must be in ARGB format (uint) e.g. 0xFF0000FF is Red
485 overrideStrokeArgb(
486 xValue: number,
487 yValue: number,
488 index: number,
489 opacity?: number,
490 metadata?: IPointMetadata
491 ): number {
492 if (yValue < THRESHOLD_LOW_LEVEL) {
493 return THRESHOLD_LOW_COLOR_ARGB;
494 }
495 if (yValue > THRESHOLD_HIGH_LEVEL) {
496 return THRESHOLD_HIGH_COLOR_ARGB;
497 }
498 // Undefined means use default series stroke on this data-point
499 return undefined;
500 },
501 };
502
503 // Create a line series with threshold palette provider
504 sciChartSurface.renderableSeries.add(
505 new FastLineRenderableSeries(wasmContext, {
506 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
507 strokeThickness: 3,
508 stroke: appTheme.VividOrange,
509 // paletteprovider allows per-point colouring
510 paletteProvider,
511 // Datalabels may be shown using this property
512 dataLabels: {
513 style: { fontFamily: "Arial", fontSize: 8 },
514 color: appTheme.PaleSkyBlue,
515 skipMode: EDataLabelSkipMode.SkipIfOverlapPrevious,
516 },
517 animation: new WaveAnimation({
518 duration: 400,
519 delay: 250,
520 onCompleted: () => {
521 // Add annotations to show the thresholds
522 sciChartSurface.annotations.add(
523 new HorizontalLineAnnotation({
524 stroke: appTheme.VividTeal,
525 strokeDashArray: [2, 2],
526 y1: THRESHOLD_HIGH_LEVEL,
527 labelPlacement: ELabelPlacement.TopRight,
528 labelValue: "High warning",
529 axisLabelFill: appTheme.VividTeal,
530 showLabel: true,
531 })
532 );
533 sciChartSurface.annotations.add(
534 new HorizontalLineAnnotation({
535 stroke: appTheme.VividPink,
536 strokeDashArray: [2, 2],
537 labelPlacement: ELabelPlacement.BottomLeft,
538 y1: THRESHOLD_LOW_LEVEL,
539 labelValue: "Low warning",
540 axisLabelFill: appTheme.VividPink,
541 showLabel: true,
542 })
543 );
544 },
545 }),
546 })
547 );
548
549 return { sciChartSurface, wasmContext };
550 };
551
552 return {
553 initJustLineCharts,
554 initDigitalLineCharts,
555 initTooltipsOnLineCharts,
556 initDashedLineCharts,
557 initPalettedLineCharts,
558 initHoveredLineCharts,
559 initGapsInLineCharts,
560 initVerticalLineCharts,
561 initThresholdedLineCharts,
562 };
563};
564React Line Chart Example - SciChart.js
Overview
This example demonstrates a comprehensive set of SciChart.js line chart variations implemented in React. It showcases multiple chart types including digital (step) line charts, charts with tooltips, dashed line charts, gradient and paletted line charts, hover/select enabled charts, vertical orientation charts, charts with gaps, and thresholded line charts.
Technical Implementation
The implementation utilizes the <SciChartReact/> component to encapsulate each chart’s lifecycle and rendering logic. Initialization functions are passed as React props to the <SciChartReact/> component, following best practices for component composition in React. For an in-depth guide on integrating SciChart with React, developers are encouraged to review the React Charts with SciChart.js: Introducing “SciChart React” article. The approach also leverages React hooks for state management and lifecycle control, as outlined in Creating a SciChart React Component from the Ground Up.
Features and Capabilities
The example illustrates several advanced features and customizations. Each chart uses animations such as sweep, wave, and fade effects for smooth rendering, while interactive modifiers like rollover tooltips and selection behaviors enhance user interaction. Developers can see these interactive elements in action in charts that leverage tooltips and hover effects, as detailed in the Using Rollover Modifier Tooltips - SciChart.js Demo documentation. Custom theming is applied via an app-specific theme configuration, ensuring a consistent and modern look.
Integration and Best Practices
With React’s component-based architecture, this example demonstrates effective integration strategies with SciChart.js. The use of functional React components and hooks not only simplifies code management but also optimizes performance when rendering multiple charts in a grid. Best practices for React props and state management play a key role, as seen by passing initialization functions directly to the <SciChartReact/> component. For more insight into performance optimization and custom theming in React applications, refer to Create a Custom Theme for React Chart | SciChart.js Demo. By following these techniques, developers can build scalable, interactive, and visually compelling data visualization dashboards using SciChart.js with React.
react Chart Examples & Demos
See Also: JavaScript Chart Types (41 Demos)
React Spline Line Chart
Discover how to create a React Spline Line Chart with SciChart. Demo includes algorithm for smoother lines. Get your free trial now.
React Digital Line Chart
Discover how to create a React Digital Line Chart with SciChart - your feature-rich JavaScript Chart Library. Get your free demo now.
React Band Chart
Easily create a React Band Chart or High-Low Fill with SciChart - high performance JavaScript Chart Library. Get your free trial now.
React Spline Band Chart
SciChart's React Spline Band Chart makes it easy to draw thresholds or fills between two lines on a chart. Get your free demo today.
React Digital Band Chart
Learn how to create a React Digital Band Chart or High-Low Fill Chart with SciChart's easy-to-follow demos. Get your free trial today.
React Bubble Chart
Create a high performance React Bubble Chart with Sci-Chart. Demo shows how to draw point-markers at X,Y locations. Get your free demo now.
React Candlestick Chart
Discover how to create a React Candlestick Chart or Stock Chart using SciChart.js. For high Performance JavaScript Charts, get your free demo now.
React Column Chart
React Column Chart demo by SciChart supports gradient fill and paletteproviders for more custom coloring options. Get your free demo now.
React Population Pyramid
Population Pyramid of Europe and Africa
React Error Bars Chart
Create React Error Bars Chart using high performance SciChart.js. Display uncertainty or statistical confidence of a data-point. Get free demo now.
React Impulse Chart
Easily create React Impulse Chart or Stem Chart using SciChart.js - our own high performance JavaScript Chart Library. Get your free trial now.
React Text Chart
Create React Text Chart with high performance SciChart.js.
React Fan Chart
Discover how to create React Fan Chart with SciChart. Zoom in to see the detail you can go to using our JavaScript Charts. Get your free demo today.
React Heatmap Chart
Easily create a high performance React Heatmap Chart with SciChart. Get your free trial of our 5-star rated JavaScript Chart Component today.
React Non Uniform Heatmap Chart
Create React Non Uniform Chart using high performance SciChart.js. Display Heatmap with variable cell sizes. Get free demo now.
React Heatmap Chart With Contours Example
Design a highly dynamic React Heatmap Chart With Contours with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
React Map Chart with Heatmap overlay
Design a highly dynamic React Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
React Mountain Chart
Create React Mountain Chart with SciChart.js. Zero line can be zero or a specific value. Fill color can be solid or gradient as well. Get a free demo now.
React Spline Mountain Chart
React Spline Mountain Chart design made easy. Use SciChart.js' JavaScript Charts for high performance, feature-rich designs. Get free demo now.
React Digital Mountain Chart
Create React Digital Mountain Chart with a stepped-line visual effect. Get your free trial of SciChart's 5-star rated JavaScript Chart Component now.
React Realtime Mountain Chart
React Realtime Mountain Chart made easy. Add animated, real-time updates with SciChart.js - high performance JavaScript Charts. Get free trial now.
React Scatter Chart
Create React Scatter Chart with high performance SciChart.js. Easily render pre-defined point types. Supports custom shapes. Get your free trial now.
React Stacked Column Chart
Discover how to create a React Stacked Column Chart using our feature-rich JavaScript Chart Library, SciChart.js. Get your free demo today!
React Stacked Column Side by Side
Design React Stacked Group Column Chart side-by-side using our 5-star rated JavaScript Chart Framework, SciChart.js. Get your free demo now.
React Stacked Mountain Chart
Design a high performance React Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
React Smooth Stacked Mountain Chart
Design a high performance React Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
React Pie Chart
Easily create and customise a high performance React Pie Chart with 5-star rated SciChart.js. Get your free trial now to access the whole library.
React Donut Chart
Create React Donut Chart with 5-star rated SciChart.js chart library. Supports legends, text labels, animated updates and more. Get free trial now.
React Linear Gauges Example
View the React Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
React Quadrant Chart using Background Annotations
Demonstrates how to color areas of the chart surface using background Annotations using SciChart.js Annotations API
React Histogram Chart
Create a React Histogram Chart with custom texture fills and patterns. Try the SciChartReact wrapper component for seamless React integration today.
React Gantt Chart Example
Build a React Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
React Choropleth Map Example
Create a React Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
React Multi-Layer Map Example
Create a React Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
React Vector Field Plot
View the React Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
React Waterfall Chart | Bridge Chart
Build a React Waterfall Chart with dynamic coloring, multi-line data labels and responsive design, using the SciChartReact component for seamless integration.
React Box Plot Chart
Try the React Box Plot Chart example for React-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
React Triangle Series | Triangle Mesh Chart
Create React Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
React Treemap Chart
Create a React Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
React Force Directed Graph
React Force Directed Graph demo by SciChart.js. Visualize network graphs with physics simulation, interactive node dragging, and hover tooltips.
React Parallel Coordinate Plot
Create a high performance React Parallel Coordinate Plot with SciChart.js. Visualise multivariate data with one axis per dimension, reorder axes, highlight ranges and select records, with up to 100,000 records on screen.