Angular 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
angular.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};
610Angular Line Chart - Angular Integration
Overview
This example demonstrates various permutations of a SciChart.js line chart implemented within an Angular standalone component. It showcases multiple chart variations including simple line charts, digital (step) charts, charts with tooltips, dashed lines, gradient and paletted lines, as well as hover/select enabled charts, vertical charts, charts with gaps, and thresholded line charts.
Technical Implementation
The implementation leverages Angular's component-based architecture using the scichart-angular package. Each chart is asynchronously initialized via ngOnInit where initialization callbacks are assigned as @Input() functions to the ScichartAngularComponent, ensuring a clear separation of concerns. This approach follows best practices outlined in Getting Started with SciChart JS and the Tutorial 01 - Setting up a npm Project with SciChart.js guide. Custom animations such as sweep, wave, and fade are applied to enhance rendering, while interactive modifiers including tooltips, rollover, and slice modifiers provide dynamic feedback during user interaction.
Features and Capabilities
The example includes several advanced features: real-time data updates, configurable styling options like gradient and dashed line effects, and interactivity such as hover and selection callbacks that adjust series properties dynamically. The demonstration also incorporates responsive design using CSS Flexbox, ensuring optimal layout across device sizes. Developers can explore performance optimization techniques for multi-chart rendering as discussed in the Performance Optimisation of JavaScript Applications & Charts article.
Integration and Best Practices
By decoupling chart initialization logic from component templates and using asynchronous lifecycle hooks, the example adheres to Angular best practices for component communication and performance. Effective use of @Input() functions to pass initialization callbacks facilitates modularity and maintainability. For more details on managing asynchronous initialization in Angular, refer to the async/await in Angular ngOnInit discussion. Additionally, further memory and rendering best practices can be found in the SciChart Memory Best Practices guide.
This comprehensive example serves as a robust reference for developers looking to integrate SciChart.js with Angular, demonstrating advanced chart customization, interactive features, and optimal performance in a scalable architectural design.
angular Chart Examples & Demos
See Also: JavaScript Chart Types (40 Demos)
Angular Spline Line Chart
Discover how to create a Angular Spline Line Chart with SciChart. Demo includes algorithm for smoother lines. Get your free trial now.
Angular Digital Line Chart
Discover how to create a Angular Digital Line Chart with SciChart - your feature-rich JavaScript Chart Library. Get your free demo now.
Angular Band Chart
Easily create a Angular Band Chart or High-Low Fill with SciChart - high performance JavaScript Chart Library. Get your free trial now.
Angular Spline Band Chart
SciChart's Angular Spline Band Chart makes it easy to draw thresholds or fills between two lines on a chart. Get your free demo today.
Angular Digital Band Chart
Learn how to create a Angular Digital Band Chart or High-Low Fill Chart with SciChart's easy-to-follow demos. Get your free trial today.
Angular Bubble Chart
Create a high performance Angular Bubble Chart with Sci-Chart. Demo shows how to draw point-markers at X,Y locations. Get your free demo now.
Angular Candlestick Chart
Discover how to create a Angular Candlestick Chart or Stock Chart using SciChart.js. For high Performance JavaScript Charts, get your free demo now.
Angular Column Chart
Angular Column Chart demo by SciChart supports gradient fill and paletteproviders for more custom coloring options. Get your free demo now.
Angular Population Pyramid
Population Pyramid of Europe and Africa
Angular Error Bars Chart
Create Angular Error Bars Chart using high performance SciChart.js. Display uncertainty or statistical confidence of a data-point. Get free demo now.
Angular Impulse Chart
Easily create Angular Impulse Chart or Stem Chart using SciChart.js - our own high performance JavaScript Chart Library. Get your free trial now.
Angular Text Chart
Create Angular Text Chart with high performance SciChart.js.
Angular Fan Chart
Discover how to create Angular Fan Chart with SciChart. Zoom in to see the detail you can go to using our JavaScript Charts. Get your free demo today.
Angular Heatmap Chart
Easily create a high performance Angular Heatmap Chart with SciChart. Get your free trial of our 5-star rated JavaScript Chart Component today.
Angular Non Uniform Heatmap Chart
Create Angular Non Uniform Chart using high performance SciChart.js. Display Heatmap with variable cell sizes. Get free demo now.
Angular Heatmap Chart With Contours Example
Design a highly dynamic Angular Heatmap Chart With Contours with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Angular Map Chart with Heatmap overlay
Design a highly dynamic Angular Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Angular Mountain Chart
Create Angular 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.
Angular Spline Mountain Chart
Angular Spline Mountain Chart design made easy. Use SciChart.js' JavaScript Charts for high performance, feature-rich designs. Get free demo now.
Angular Digital Mountain Chart
Create Angular Digital Mountain Chart with a stepped-line visual effect. Get your free trial of SciChart's 5-star rated JavaScript Chart Component now.
Angular Realtime Mountain Chart
Angular Realtime Mountain Chart made easy. Add animated, real-time updates with SciChart.js - high performance JavaScript Charts. Get free trial now.
Angular Scatter Chart
Create Angular Scatter Chart with high performance SciChart.js. Easily render pre-defined point types. Supports custom shapes. Get your free trial now.
Angular Stacked Column Chart
Discover how to create a Angular Stacked Column Chart using our feature-rich JavaScript Chart Library, SciChart.js. Get your free demo today!
Angular Stacked Column Side by Side
Design Angular Stacked Group Column Chart side-by-side using our 5-star rated JavaScript Chart Framework, SciChart.js. Get your free demo now.
Angular Stacked Mountain Chart
Design a high performance Angular Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
Angular Smooth Stacked Mountain Chart
Design a high performance Angular Stacked Mountain Chart with SciChart.js - your one-stop JavaScript chart library. Get free demo now to get started.
Angular Pie Chart
Easily create and customise a high performance Angular Pie Chart with 5-star rated SciChart.js. Get your free trial now to access the whole library.
Angular Donut Chart
Create Angular Donut Chart with 5-star rated SciChart.js chart library. Supports legends, text labels, animated updates and more. Get free trial now.
Angular Linear Gauges Example
View the Angular Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
Angular Quadrant Chart using Background Annotations
Demonstrates how to color areas of the chart surface using background Annotations using SciChart.js Annotations API
Angular Histogram Chart
Create an Angular Histogram Chart with custom texture fills and patterns. Try the SciChartAngular wrapper component for seamless Angular integration today.
Angular Gantt Chart Example
Build an Angular Gantt Chart with SciChart. View the demo for horizontal bars, rounded corners and data labels to show project timelines and task completion.
Angular Choropleth Map Example
Create an Angular Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
Angular Multi-Layer Map Example
Create a Angular Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
Angular Vector Field Plot
View the Angular Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
Angular Waterfall Chart | Bridge Chart
Build an Angular Waterfall Chart with dynamic coloring, multi-line data labels & responsive design, using ScichartAngular component for seamless integration
Angular Box Plot Chart
Try the Angular Box Plot Chart example for Angular-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
Angular Triangle Series | Triangle Mesh Chart
Create Angular Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
Angular Treemap Chart
Create an Angular Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
Angular Force Directed Graph
Angular Force Directed Graph demo by SciChart.js. Visualize network graphs with physics simulation, interactive node dragging, and hover tooltips.