JavaScript 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.html
vanilla.ts
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};
610Line Chart - JavaScript
Overview
This example demonstrates various permutations of a SciChart.js line chart implemented in JavaScript. It showcases multiple variations such as simple line charts, digital (step) line charts, charts with tooltips, dashed lines, gradient and paletted line charts, hover/select enabled charts, vertical charts, charts with data gaps, and thresholded line charts. The example emphasizes high performance and advanced customization using asynchronous chart initialization.
Technical Implementation
The charts are created by asynchronously initializing a SciChartSurface with an API call that returns both the surface and the underlying WebAssembly context. This method, which you can explore further in the Tutorial 01 - Including SciChart.js in an HTML Page using CDN, leverages JavaScript’s async/await pattern to handle initialization tasks. Each line series is configured using the FastLineRenderableSeries along with the XyDataSeries for data binding as described in the Tutorial 02 - Adding Series and Data to an HTML Page - SciChart. Animations such as sweep, wave, and fade effects are applied to enhance visual rendering, following guidelines from the Series Startup Animations | JavaScript Chart Documentation - SciChart.
Features and Capabilities
Real-time Updates and Advanced Customizations: The example demonstrates dynamic data updates and advanced configurations including digital (step) line charts, which are enabled by setting the isDigitalLine property as detailed in The Digital (Step) Line Series | JavaScript Chart Documentation. Additional features include per-point styling using palette providers for gradient and threshold-based coloring, as well as handling data gaps with discontinuous line rendering. Interactive tooltips are enabled using modifiers such as the RolloverModifier, which you can learn more about from the Rollover Modifier | JavaScript Chart Documentation - SciChart.
Integration and Best Practices
The example adheres to best practices by decoupling the chart creation logic into modular asynchronous functions for improved maintainability and performance. Developers are encouraged to follow efficient error handling and resource management guidelines to optimize WebGL and WebAssembly performance. With an emphasis on responsive design using CSS Flexbox for layout management, this example serves as a robust reference for integrating SciChart.js in standalone JavaScript projects. For more details on performance and advanced customization, review the official SciChart documentation linked throughout this overview.
javascript Chart Examples & Demos
See Also: JavaScript Chart Types (39 Demos)
JavaScript Spline Line Chart
Discover how to create a JavaScript Spline Line Chart with SciChart. Demo includes algorithm for smoother lines. Get your free trial now.
JavaScript Digital Line Chart
Discover how to create a JavaScript Digital Line Chart with SciChart - your feature-rich JavaScript Chart Library. Get your free demo now.
JavaScript Band Chart
Easily create a JavaScript Band Chart or High-Low Fill with SciChart - high performance JavaScript Chart Library. Get your free trial now.
JavaScript Spline Band Chart
SciChart's JavaScript Spline Band Chart makes it easy to draw thresholds or fills between two lines on a chart. Get your free demo today.
JavaScript Digital Band Chart
Learn how to create a JavaScript Digital Band Chart or High-Low Fill Chart with SciChart's easy-to-follow demos. Get your free trial today.
JavaScript Bubble Chart
Create a high performance JavaScript Bubble Chart with Sci-Chart. Demo shows how to draw point-markers at X,Y locations. Get your free demo now.
JavaScript Candlestick Chart
Discover how to create a JavaScript Candlestick Chart or Stock Chart using SciChart.js. For high Performance JavaScript Charts, get your free demo now.
JavaScript Column Chart
JavaScript Column Chart demo by SciChart supports gradient fill and paletteproviders for more custom coloring options. Get your free demo now.
JavaScript Population Pyramid
Population Pyramid of Europe and Africa
JavaScript Error Bars Chart
Create JavaScript Error Bars Chart using high performance SciChart.js. Display uncertainty or statistical confidence of a data-point. Get free demo now.
JavaScript Impulse Chart
Easily create JavaScript Impulse Chart or Stem Chart using SciChart.js - our own high performance JavaScript Chart Library. Get your free trial now.
JavaScript Text Chart
Create JavaScript Text Chart with high performance SciChart.js.
JavaScript Fan Chart
Discover how to create JavaScript Fan Chart with SciChart. Zoom in to see the detail you can go to using our JavaScript Charts. Get your free demo today.
JavaScript Heatmap Chart
Easily create a high performance JavaScript Heatmap Chart with SciChart. Get your free trial of our 5-star rated JavaScript Chart Component today.
JavaScript Non Uniform Heatmap Chart
Create JavaScript Non Uniform Chart using high performance SciChart.js. Display Heatmap with variable cell sizes. Get free demo now.
JavaScript Heatmap Chart With Contours Example
Design a highly dynamic JavaScript Heatmap Chart With Contours with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
JavaScript Map Chart with Heatmap overlay
Design a highly dynamic JavaScript Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
JavaScript Mountain Chart
Create JavaScript 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.
JavaScript Spline Mountain Chart
JavaScript Spline Mountain Chart design made easy. Use SciChart.js' JavaScript Charts for high performance, feature-rich designs. Get free demo now.
JavaScript Digital Mountain Chart
Create JavaScript Digital Mountain Chart with a stepped-line visual effect. Get your free trial of SciChart's 5-star rated JavaScript Chart Component now.
JavaScript Realtime Mountain Chart
JavaScript Realtime Mountain Chart made easy. Add animated, real-time updates with SciChart.js - high performance JavaScript Charts. Get free trial now.
JavaScript Scatter Chart
Create JavaScript Scatter Chart with high performance SciChart.js. Easily render pre-defined point types. Supports custom shapes. Get your free trial now.
JavaScript Stacked Column Chart
Discover how to create a JavaScript Stacked Column Chart using our feature-rich JavaScript Chart Library, SciChart.js. Get your free demo today!
JavaScript Stacked Column Side by Side
Design JavaScript Stacked Group Column Chart side-by-side using our 5-star rated JavaScript Chart Framework, SciChart.js. Get your free demo now.
JavaScript Stacked Mountain Chart
Design a high performance JavaScript Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
JavaScript Smooth Stacked Mountain Chart
Design a high performance JavaScript Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
JavaScript Pie Chart
Easily create and customise a high performance JavaScript Pie Chart with 5-star rated SciChart.js. Get your free trial now to access the whole library.
JavaScript Donut Chart
Create JavaScript Donut Chart with 5-star rated SciChart.js chart library. Supports legends, text labels, animated updates and more. Get free trial now.
JavaScript Linear Gauges Example
View the JavaScript Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
JavaScript Quadrant Chart using Background Annotations
Demonstrates how to color areas of the chart surface using background Annotations using SciChart.js Annotations API
JavaScript Histogram Chart
Create a JavaScript Histogram Chart with custom texture fills and patterns. Try the SciChart.js library for seamless integration today.
JavaScript Gantt Chart Example
Build a JavaScript Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
JavaScript Choropleth Map Example
Create a JavaScript Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
JavaScript Multi-Layer Map Example
Create a JavaScript Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
JavaScript Vector Field Plot
View the JavaScript Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
JavaScript Waterfall Chart | Bridge Chart
Build a JavaScript Waterfall Chart with dynamic coloring, multi-line data labels and responsive design. Try SciChart.js for seamless integration today.
JavaScript Box Plot Chart
Try the JavaScript Box-Plot Chart examples with developer-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling.
JavaScript Triangle Series | Triangle Mesh Chart
Create JavaScript Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
JavaScript Treemap Chart
Create a JavaScript Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.