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 EAnimationType,
4 EAxisAlignment,
5 ECoordinateMode,
6 EDataLabelSkipMode,
7 ELabelPlacement,
8 ELineDrawMode,
9 EllipsePointMarker,
10 EStrokePaletteMode,
11 EVerticalTextPosition,
12 FastLineRenderableSeries,
13 GradientParams,
14 HorizontalLineAnnotation,
15 IPointMetadata,
16 IRenderableSeries,
17 IStrokePaletteProvider,
18 NumberRange,
19 NumericAxis,
20 PaletteFactory,
21 parseColorToUIntArgb,
22 Point,
23 RolloverModifier,
24 SciChartSurface,
25 SeriesSelectionModifier,
26 Thickness,
27 VerticalSliceModifier,
28 XyDataSeries,
29} from "scichart";
30import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
31import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
32import { appTheme } from "../../../theme";
33
34export const getChartsInitializationAPI = () => {
35 const createChartCommon = async (divId: string | HTMLDivElement, title: string, isVertical: boolean = false) => {
36 // Create a SciChartSurface
37 const { sciChartSurface, wasmContext } = await SciChartSurface.create(divId, {
38 theme: appTheme.SciChartJsTheme,
39 padding: new Thickness(5, 5, 5, 5),
40 title,
41 disableAspect: true,
42 titleStyle: {
43 placeWithinChart: true,
44 fontSize: 16,
45 },
46 });
47
48 const xAxis = new NumericAxis(wasmContext, { maxAutoTicks: 5 });
49 sciChartSurface.xAxes.add(xAxis);
50
51 const yAxis = new NumericAxis(wasmContext, { maxAutoTicks: 5, growBy: new NumberRange(0.05, 0.25) });
52 sciChartSurface.yAxes.add(yAxis);
53
54 xAxis.isVisible = false;
55 yAxis.isVisible = false;
56
57 if (isVertical) {
58 // We also want our padding on the xaxis at the start for vertical
59 sciChartSurface.xAxes.get(0).growBy = new NumberRange(0.2, 0.05);
60 }
61 return { sciChartSurface, wasmContext };
62 };
63
64 const createLineData = (whichSeries: number) => {
65 const data = ExampleDataProvider.getFourierSeriesZoomed(1.0, 0.1, 5.0, 5.15);
66
67 return {
68 xValues: data.xValues,
69 yValues: data.yValues.map((y) => (whichSeries === 0 ? y : whichSeries === 1 ? y * 1.1 : y * 1.5)),
70 };
71 };
72
73 const initJustLineCharts = async (rootElement: string | HTMLDivElement) => {
74 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Simple Line Chart");
75
76 let data = createLineData(2);
77
78 // Create and add a line series to the chart
79 sciChartSurface.renderableSeries.add(
80 new FastLineRenderableSeries(wasmContext, {
81 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
82 stroke: appTheme.VividOrange,
83 strokeThickness: 3,
84 opacity: 1,
85 animation: {
86 type: EAnimationType.Sweep,
87 options: { duration: 500 },
88 },
89 })
90 );
91
92 data = createLineData(0);
93
94 // Create and add a line series to the chart
95 sciChartSurface.renderableSeries.add(
96 new FastLineRenderableSeries(wasmContext, {
97 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
98 stroke: appTheme.VividTeal,
99 strokeThickness: 3,
100 opacity: 1,
101 animation: {
102 type: EAnimationType.Sweep,
103 options: { duration: 500 },
104 },
105 })
106 );
107
108 return { sciChartSurface, wasmContext };
109 };
110
111 const initDigitalLineCharts = async (rootElement: string | HTMLDivElement) => {
112 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Digital (Step) Line Charts");
113
114 const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
115 const yValues = [1, 2, 3, 2, 0.5, 1, 2.5, 1, 1];
116
117 // Create the Digital Line chart
118 sciChartSurface.renderableSeries.add(
119 new FastLineRenderableSeries(wasmContext, {
120 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
121 stroke: appTheme.VividOrange,
122 strokeThickness: 3,
123 // Digital (step) lines are enabled by setting isDigitalLine: true
124 isDigitalLine: true,
125 // Optional pointmarkers may be added via this property.
126 pointMarker: new EllipsePointMarker(wasmContext, {
127 width: 9,
128 height: 9,
129 fill: appTheme.ForegroundColor,
130 strokeThickness: 0,
131 }),
132 animation: {
133 type: EAnimationType.Wave,
134 options: { duration: 500, delay: 200 },
135 },
136 // Optional DataLabels may be added via this property.
137 dataLabels: {
138 style: { fontFamily: "Arial", fontSize: 11, padding: new Thickness(5, 5, 5, 5) },
139 color: appTheme.ForegroundColor,
140 aboveBelow: false,
141 verticalTextPosition: EVerticalTextPosition.Above,
142 },
143 })
144 );
145
146 return { sciChartSurface, wasmContext };
147 };
148
149 const initTooltipsOnLineCharts = async (rootElement: string | HTMLDivElement) => {
150 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Tooltips on Line Charts");
151
152 const { xValues, yValues } = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(25);
153
154 sciChartSurface.renderableSeries.add(
155 new FastLineRenderableSeries(wasmContext, {
156 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
157 stroke: appTheme.VividOrange,
158 strokeThickness: 3,
159 animation: {
160 type: EAnimationType.Wave,
161 options: { duration: 500, delay: 200 },
162 },
163 })
164 );
165
166 // The RolloverModifier adds tooltip behaviour to the chart
167 sciChartSurface.chartModifiers.add(
168 new RolloverModifier({
169 rolloverLineStroke: appTheme.VividOrange,
170 rolloverLineStrokeThickness: 2,
171 rolloverLineStrokeDashArray: [2, 2],
172 }),
173 new VerticalSliceModifier({
174 rolloverLineStroke: appTheme.VividOrange,
175 rolloverLineStrokeThickness: 2,
176 xCoordinateMode: ECoordinateMode.DataValue,
177 x1: 15,
178 })
179 );
180
181 return { sciChartSurface, wasmContext };
182 };
183
184 const initDashedLineCharts = async (rootElement: string | HTMLDivElement) => {
185 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Dashed Line Charts");
186
187 // Create some xValues, yValues arrays
188 let data = createLineData(0);
189
190 // Create and add a line series to the chart
191 sciChartSurface.renderableSeries.add(
192 new FastLineRenderableSeries(wasmContext, {
193 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
194 stroke: appTheme.VividOrange,
195 strokeThickness: 3,
196 // Dashed line charts are enabled by setting the StrokeDashArray property. The array defines draw & gap pixel length
197 strokeDashArray: [2, 2],
198 animation: {
199 type: EAnimationType.Sweep,
200 options: { duration: 750 },
201 },
202 })
203 );
204
205 data = createLineData(1);
206
207 // Create and add a line series to the chart
208 sciChartSurface.renderableSeries.add(
209 new FastLineRenderableSeries(wasmContext, {
210 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
211 stroke: appTheme.VividOrange,
212 strokeThickness: 3,
213 opacity: 0.77,
214 strokeDashArray: [3, 3],
215 animation: {
216 type: EAnimationType.Sweep,
217 options: { duration: 500 },
218 },
219 })
220 );
221
222 data = createLineData(2);
223
224 // Create and add a line series to the chart
225 sciChartSurface.renderableSeries.add(
226 new FastLineRenderableSeries(wasmContext, {
227 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
228 stroke: appTheme.VividOrange,
229 strokeThickness: 3,
230 opacity: 0.55,
231 strokeDashArray: [10, 5],
232 animation: {
233 type: EAnimationType.Sweep,
234 options: { duration: 500 },
235 },
236 })
237 );
238
239 return { sciChartSurface, wasmContext };
240 };
241
242 const initPalettedLineCharts = async (rootElement: string | HTMLDivElement) => {
243 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Gradient Line Charts");
244
245 const data = createLineData(3);
246
247 // Returns IStrokePaletteProvider, preconfigured to colour each point with a gradient
248 // Can be fully customised to execute any rule on x,y,index or metadata per-point to colour the series
249 // See PaletteProvider documentation for more details
250 const xGradientPalette = PaletteFactory.createGradient(
251 wasmContext,
252 new GradientParams(new Point(0, 0), new Point(1, 1), [
253 { offset: 0, color: appTheme.VividOrange },
254 { offset: 0.5, color: appTheme.VividTeal },
255 { offset: 1.0, color: appTheme.VividSkyBlue },
256 ])
257 );
258
259 // Y gradient
260 const yGradientPalette = PaletteFactory.createYGradient(
261 wasmContext,
262 new GradientParams(new Point(0, 0), new Point(1, 1), [
263 { offset: 0, color: appTheme.VividOrange },
264 { offset: 0.5, color: appTheme.VividSkyBlue },
265 { offset: 1, color: appTheme.VividTeal },
266 ]),
267 new NumberRange(2, 4) // the range of y-values to apply the gradient to
268 );
269
270 // decresing Sine wave
271 var yValues = [];
272 for (var i = 0; i < 75; i++) {
273 yValues.push(3 + Math.sin((i * Math.PI) / 16) * (2 - i / 50));
274 }
275
276 sciChartSurface.renderableSeries.add(
277 new FastLineRenderableSeries(wasmContext, {
278 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
279 paletteProvider: xGradientPalette,
280 strokeThickness: 5,
281 animation: {
282 type: EAnimationType.Sweep,
283 options: { duration: 500 },
284 },
285 }),
286
287 new FastLineRenderableSeries(wasmContext, {
288 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: yValues }),
289 paletteProvider: yGradientPalette,
290 strokeThickness: 5,
291 animation: {
292 type: EAnimationType.Sweep,
293 options: { duration: 500 },
294 },
295 })
296 );
297
298 return { sciChartSurface, wasmContext };
299 };
300
301 const initHoveredLineCharts = async (rootElement: string | HTMLDivElement) => {
302 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Hover/Select Line Charts");
303
304 // Create some xValues, yValues arrays
305 let data = createLineData(0);
306
307 const onHoveredChanged = (series: IRenderableSeries, isHovered: boolean) => {
308 series.opacity = isHovered ? 1.0 : 0.7;
309 series.strokeThickness = isHovered ? 4 : 3;
310 };
311
312 const onSelectedChanged = (series: IRenderableSeries, isSelected: boolean) => {
313 series.strokeThickness = isSelected ? 5 : 3;
314 series.stroke = isSelected ? appTheme.VividSkyBlue : appTheme.VividOrange;
315 };
316
317 // Create and add a line series to the chart
318 sciChartSurface.renderableSeries.add(
319 new FastLineRenderableSeries(wasmContext, {
320 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
321 stroke: appTheme.VividOrange,
322 strokeThickness: 3,
323 opacity: 0.7,
324 onHoveredChanged,
325 onSelectedChanged,
326 animation: {
327 type: EAnimationType.Sweep,
328 options: { duration: 750 },
329 },
330 })
331 );
332
333 data = createLineData(1);
334
335 // Create and add a line series to the chart
336 sciChartSurface.renderableSeries.add(
337 new FastLineRenderableSeries(wasmContext, {
338 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
339 stroke: appTheme.VividOrange,
340 strokeThickness: 3,
341 opacity: 0.7,
342 onHoveredChanged,
343 onSelectedChanged,
344 animation: {
345 type: EAnimationType.Sweep,
346 options: { duration: 500 },
347 },
348 })
349 );
350
351 data = createLineData(2);
352
353 // Create and add a line series to the chart
354 sciChartSurface.renderableSeries.add(
355 new FastLineRenderableSeries(wasmContext, {
356 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
357 stroke: appTheme.VividOrange,
358 strokeThickness: 3,
359 opacity: 0.7,
360 onHoveredChanged,
361 onSelectedChanged,
362 animation: {
363 type: EAnimationType.Sweep,
364 options: { duration: 500 },
365 },
366 })
367 );
368
369 // SeriesSelectionModifier adds the hover/select behaviour to the chart
370 // This has a global hovered/selected callback and there are also callbacks per-series (see above)
371 sciChartSurface.chartModifiers.add(new SeriesSelectionModifier({ enableHover: true, enableSelection: true }));
372
373 sciChartSurface.renderableSeries.get(2).isSelected = true;
374
375 return { sciChartSurface, wasmContext };
376 };
377
378 const initVerticalLineCharts = async (rootElement: string | HTMLDivElement) => {
379 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Vertical Line Charts", true);
380
381 // Setting xAxis.alignment = left/right and yAxis.alignemnt = top/bottom
382 // is all that's required to rotate a chart, including all drawing and interactions in scichart
383 sciChartSurface.xAxes.get(0).axisAlignment = EAxisAlignment.Right;
384 sciChartSurface.yAxes.get(0).axisAlignment = EAxisAlignment.Bottom;
385
386 let data = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(50);
387
388 sciChartSurface.renderableSeries.add(
389 new FastLineRenderableSeries(wasmContext, {
390 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
391 strokeThickness: 3,
392 stroke: appTheme.VividOrange,
393 pointMarker: new EllipsePointMarker(wasmContext, {
394 width: 5,
395 height: 5,
396 fill: appTheme.VividOrange,
397 strokeThickness: 0,
398 }),
399 animation: {
400 type: EAnimationType.Sweep,
401 options: { duration: 400, delay: 250 },
402 },
403 })
404 );
405
406 data = new RandomWalkGenerator().Seed(12345).getRandomWalkSeries(50);
407
408 sciChartSurface.renderableSeries.add(
409 new FastLineRenderableSeries(wasmContext, {
410 dataSeries: new XyDataSeries(wasmContext, { xValues: data.xValues, yValues: data.yValues }),
411 strokeThickness: 3,
412 stroke: appTheme.VividTeal,
413 pointMarker: new EllipsePointMarker(wasmContext, {
414 width: 5,
415 height: 5,
416 fill: appTheme.VividTeal,
417 strokeThickness: 0,
418 }),
419 animation: {
420 type: EAnimationType.Sweep,
421 options: { duration: 400, delay: 250 },
422 },
423 })
424 );
425
426 return { sciChartSurface, wasmContext };
427 };
428
429 const initGapsInLineCharts = async (rootElement: string | HTMLDivElement) => {
430 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Gaps in Line Charts");
431
432 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];
433
434 // When yValues has NaN in it, LineSeries.drawNaNAs can draw them as gaps or closed lines
435 const yValues = [
436 0.3933834,
437 -0.0493884,
438 0.4083136,
439 -0.0458077,
440 -0.5242618,
441 -0.9631066,
442 -0.6873195,
443 NaN,
444 -0.1682597,
445 0.1255406,
446 -0.0313127,
447 -0.3261995,
448 -0.5490017,
449 -0.2462973,
450 0.2475873,
451 0.15,
452 -0.2443795,
453 -0.7002707,
454 NaN,
455 -1.24664,
456 -0.8722853,
457 -1.1531512,
458 -0.7264951,
459 -0.9779677,
460 -0.5377044,
461 ];
462
463 sciChartSurface.renderableSeries.add(
464 new FastLineRenderableSeries(wasmContext, {
465 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
466 strokeThickness: 3,
467 stroke: appTheme.VividTeal,
468 drawNaNAs: ELineDrawMode.DiscontinuousLine,
469 pointMarker: new EllipsePointMarker(wasmContext, {
470 width: 5,
471 height: 5,
472 fill: appTheme.VividTeal,
473 strokeThickness: 0,
474 }),
475 animation: {
476 type: EAnimationType.Fade,
477 options: {
478 duration: 400,
479 delay: 250,
480 onCompleted: () => {
481 // Highlight the gaps with annotations stretched vertically
482 sciChartSurface.annotations.add(
483 new BoxAnnotation({
484 x1: 6,
485 x2: 8,
486 y1: 0.1,
487 y2: 1.0,
488 yCoordinateMode: ECoordinateMode.Relative,
489 fill: appTheme.MutedTeal + "33",
490 strokeThickness: 0,
491 }),
492 new BoxAnnotation({
493 x1: 17,
494 x2: 19,
495 y1: 0.1,
496 y2: 1,
497 yCoordinateMode: ECoordinateMode.Relative,
498 fill: appTheme.MutedTeal + "33",
499 strokeThickness: 0,
500 })
501 );
502 },
503 },
504 },
505 })
506 );
507
508 return { sciChartSurface, wasmContext };
509 };
510
511 const initThresholdedLineCharts = async (rootElement: string | HTMLDivElement) => {
512 const { sciChartSurface, wasmContext } = await createChartCommon(rootElement, "Thresholded Line Charts");
513
514 const { xValues, yValues } = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(50);
515
516 const THRESHOLD_HIGH_LEVEL = 0;
517 const THRESHOLD_LOW_LEVEL = -2;
518 const THRESHOLD_LOW_COLOR_ARGB = parseColorToUIntArgb(appTheme.VividPink);
519 const THRESHOLD_HIGH_COLOR_ARGB = parseColorToUIntArgb(appTheme.VividTeal);
520
521 // PaletteProvider API allows for per-point colouring, filling of points based on a rule
522 // see PaletteProvider API for more details
523 const paletteProvider: IStrokePaletteProvider = {
524 strokePaletteMode: EStrokePaletteMode.GRADIENT,
525 onAttached(parentSeries: IRenderableSeries): void {},
526 onDetached(): void {},
527 // This function called once per data-point. Colors returned must be in ARGB format (uint) e.g. 0xFF0000FF is Red
528 overrideStrokeArgb(
529 xValue: number,
530 yValue: number,
531 index: number,
532 opacity?: number,
533 metadata?: IPointMetadata
534 ): number {
535 if (yValue < THRESHOLD_LOW_LEVEL) {
536 return THRESHOLD_LOW_COLOR_ARGB;
537 }
538 if (yValue > THRESHOLD_HIGH_LEVEL) {
539 return THRESHOLD_HIGH_COLOR_ARGB;
540 }
541 // Undefined means use default series stroke on this data-point
542 return undefined;
543 },
544 };
545
546 // Create a line series with threshold palette provider
547 sciChartSurface.renderableSeries.add(
548 new FastLineRenderableSeries(wasmContext, {
549 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
550 strokeThickness: 3,
551 stroke: appTheme.VividOrange,
552 // paletteprovider allows per-point colouring
553 paletteProvider,
554 // Datalabels may be shown using this property
555 dataLabels: {
556 style: { fontFamily: "Arial", fontSize: 8 },
557 color: appTheme.PaleSkyBlue,
558 skipMode: EDataLabelSkipMode.SkipIfOverlapPrevious,
559 },
560 animation: {
561 type: EAnimationType.Wave,
562 options: {
563 duration: 400,
564 delay: 250,
565 onCompleted: () => {
566 // Add annotations to show the thresholds
567 sciChartSurface.annotations.add(
568 new HorizontalLineAnnotation({
569 stroke: appTheme.VividTeal,
570 strokeDashArray: [2, 2],
571 y1: THRESHOLD_HIGH_LEVEL,
572 labelPlacement: ELabelPlacement.TopRight,
573 labelValue: "High warning",
574 axisLabelFill: appTheme.VividTeal,
575 showLabel: true,
576 })
577 );
578 sciChartSurface.annotations.add(
579 new HorizontalLineAnnotation({
580 stroke: appTheme.VividPink,
581 strokeDashArray: [2, 2],
582 labelPlacement: ELabelPlacement.BottomLeft,
583 y1: THRESHOLD_LOW_LEVEL,
584 labelValue: "Low warning",
585 axisLabelFill: appTheme.VividPink,
586 showLabel: true,
587 })
588 );
589 },
590 },
591 },
592 })
593 );
594
595 return { sciChartSurface, wasmContext };
596 };
597
598 return {
599 initJustLineCharts,
600 initDigitalLineCharts,
601 initTooltipsOnLineCharts,
602 initDashedLineCharts,
603 initPalettedLineCharts,
604 initHoveredLineCharts,
605 initGapsInLineCharts,
606 initVerticalLineCharts,
607 initThresholdedLineCharts,
608 };
609};
610React 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 (40 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.