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 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};
564Angular 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 (41 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.
Angular Parallel Coordinate Plot
Create a high performance Angular 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.