@syncfusion/ej2-angular-charts 34.2.6 → 34.2.8-ngcc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@syncfusion/ej2-angular-charts.es5.js +5388 -0
- package/@syncfusion/ej2-angular-charts.es5.js.map +1 -0
- package/@syncfusion/ej2-angular-charts.js +5087 -0
- package/@syncfusion/ej2-angular-charts.js.map +1 -0
- package/LICENSE +10 -0
- package/README.md +100 -151
- package/dist/ej2-angular-charts.umd.js +6123 -0
- package/dist/ej2-angular-charts.umd.js.map +1 -0
- package/dist/ej2-angular-charts.umd.min.js +11 -0
- package/dist/ej2-angular-charts.umd.min.js.map +1 -0
- package/ej2-angular-charts.d.ts +14 -0
- package/ej2-angular-charts.metadata.json +1 -0
- package/package.json +10 -23
- package/public_api.d.ts +1 -1
- package/schematics/utils/lib-details.js +2 -2
- package/schematics/utils/lib-details.ts +2 -2
- package/src/accumulation-chart/accumulationchart-all.module.d.ts +15 -21
- package/src/accumulation-chart/accumulationchart.component.d.ts +59 -62
- package/src/accumulation-chart/accumulationchart.module.d.ts +5 -13
- package/src/accumulation-chart/annotations.directive.d.ts +80 -85
- package/src/accumulation-chart/series.directive.d.ts +257 -262
- package/src/bullet-chart/bulletchart-all.module.d.ts +8 -14
- package/src/bullet-chart/bulletchart.component.d.ts +38 -41
- package/src/bullet-chart/bulletchart.module.d.ts +5 -12
- package/src/bullet-chart/ranges.directive.d.ts +68 -73
- package/src/chart/annotations.directive.d.ts +96 -101
- package/src/chart/axes.directive.d.ts +404 -411
- package/src/chart/categories.directive.d.ts +69 -74
- package/src/chart/chart-all.module.d.ts +67 -73
- package/src/chart/chart.component.d.ts +88 -91
- package/src/chart/chart.module.d.ts +5 -24
- package/src/chart/columns.directive.d.ts +30 -35
- package/src/chart/indicators.directive.d.ts +260 -265
- package/src/chart/multilevellabels.directive.d.ts +57 -62
- package/src/chart/rangecolorsettings.directive.d.ts +36 -41
- package/src/chart/rows.directive.d.ts +30 -35
- package/src/chart/segments.directive.d.ts +41 -46
- package/src/chart/selecteddataindexes.directive.d.ts +32 -37
- package/src/chart/series.directive.d.ts +500 -505
- package/src/chart/striplines.directive.d.ts +166 -171
- package/src/chart/trendlines.directive.d.ts +122 -127
- package/src/chart3d/axes.directive.d.ts +266 -271
- package/src/chart3d/chart3d-all.module.d.ts +20 -26
- package/src/chart3d/chart3d.component.d.ts +62 -65
- package/src/chart3d/chart3d.module.d.ts +5 -16
- package/src/chart3d/columns.directive.d.ts +26 -31
- package/src/chart3d/rows.directive.d.ts +26 -31
- package/src/chart3d/selecteddataindexes.directive.d.ts +32 -37
- package/src/chart3d/series.directive.d.ts +172 -177
- package/src/circularchart3d/circularchart3d-all.module.d.ts +13 -19
- package/src/circularchart3d/circularchart3d.component.d.ts +55 -58
- package/src/circularchart3d/circularchart3d.module.d.ts +5 -13
- package/src/circularchart3d/selecteddataindexes.directive.d.ts +32 -37
- package/src/circularchart3d/series.directive.d.ts +142 -147
- package/src/index.d.ts +68 -68
- package/src/range-navigator/rangenavigator-all.module.d.ts +8 -14
- package/src/range-navigator/rangenavigator.component.d.ts +41 -44
- package/src/range-navigator/rangenavigator.module.d.ts +5 -12
- package/src/range-navigator/series.directive.d.ts +78 -83
- package/src/sankey/links.directive.d.ts +41 -46
- package/src/sankey/nodes.directive.d.ts +44 -49
- package/src/sankey/sankey-all.module.d.ts +10 -16
- package/src/sankey/sankey.component.d.ts +53 -56
- package/src/sankey/sankey.module.d.ts +5 -13
- package/src/smithchart/series.directive.d.ts +88 -93
- package/src/smithchart/smithchart-all.module.d.ts +8 -14
- package/src/smithchart/smithchart.component.d.ts +41 -44
- package/src/smithchart/smithchart.module.d.ts +5 -12
- package/src/sparkline/rangebandsettings.directive.d.ts +33 -38
- package/src/sparkline/sparkline-all.module.d.ts +7 -13
- package/src/sparkline/sparkline.component.d.ts +43 -46
- package/src/sparkline/sparkline.module.d.ts +5 -12
- package/src/stock-chart/annotations.directive.d.ts +84 -89
- package/src/stock-chart/axes.directive.d.ts +286 -291
- package/src/stock-chart/indicators.directive.d.ts +221 -226
- package/src/stock-chart/periods.directive.d.ts +42 -47
- package/src/stock-chart/rows.directive.d.ts +30 -35
- package/src/stock-chart/selecteddataindexes.directive.d.ts +32 -37
- package/src/stock-chart/series.directive.d.ts +259 -264
- package/src/stock-chart/stockchart-all.module.d.ts +7 -13
- package/src/stock-chart/stockchart.component.d.ts +69 -72
- package/src/stock-chart/stockchart.module.d.ts +5 -20
- package/src/stock-chart/stockevents.directive.d.ts +83 -88
- package/src/stock-chart/trendlines.directive.d.ts +123 -128
- package/CHANGELOG.md +0 -3929
- package/esm2020/public_api.mjs +0 -2
- package/esm2020/src/accumulation-chart/accumulationchart-all.module.mjs +0 -53
- package/esm2020/src/accumulation-chart/accumulationchart.component.mjs +0 -152
- package/esm2020/src/accumulation-chart/accumulationchart.module.mjs +0 -43
- package/esm2020/src/accumulation-chart/annotations.directive.mjs +0 -62
- package/esm2020/src/accumulation-chart/series.directive.mjs +0 -62
- package/esm2020/src/bullet-chart/bulletchart-all.module.mjs +0 -32
- package/esm2020/src/bullet-chart/bulletchart.component.mjs +0 -85
- package/esm2020/src/bullet-chart/bulletchart.module.mjs +0 -34
- package/esm2020/src/bullet-chart/ranges.directive.mjs +0 -54
- package/esm2020/src/chart/annotations.directive.mjs +0 -60
- package/esm2020/src/chart/axes.directive.mjs +0 -58
- package/esm2020/src/chart/categories.directive.mjs +0 -59
- package/esm2020/src/chart/chart-all.module.mjs +0 -209
- package/esm2020/src/chart/chart.component.mjs +0 -538
- package/esm2020/src/chart/chart.module.mjs +0 -142
- package/esm2020/src/chart/columns.directive.mjs +0 -52
- package/esm2020/src/chart/indicators.directive.mjs +0 -54
- package/esm2020/src/chart/multilevellabels.directive.mjs +0 -60
- package/esm2020/src/chart/rangecolorsettings.directive.mjs +0 -52
- package/esm2020/src/chart/rows.directive.mjs +0 -52
- package/esm2020/src/chart/segments.directive.mjs +0 -58
- package/esm2020/src/chart/selecteddataindexes.directive.mjs +0 -52
- package/esm2020/src/chart/series.directive.mjs +0 -68
- package/esm2020/src/chart/striplines.directive.mjs +0 -56
- package/esm2020/src/chart/trendlines.directive.mjs +0 -58
- package/esm2020/src/chart3d/axes.directive.mjs +0 -52
- package/esm2020/src/chart3d/chart3d-all.module.mjs +0 -68
- package/esm2020/src/chart3d/chart3d.component.mjs +0 -189
- package/esm2020/src/chart3d/chart3d.module.mjs +0 -70
- package/esm2020/src/chart3d/columns.directive.mjs +0 -52
- package/esm2020/src/chart3d/rows.directive.mjs +0 -52
- package/esm2020/src/chart3d/selecteddataindexes.directive.mjs +0 -52
- package/esm2020/src/chart3d/series.directive.mjs +0 -62
- package/esm2020/src/circularchart3d/circularchart3d-all.module.mjs +0 -47
- package/esm2020/src/circularchart3d/circularchart3d.component.mjs +0 -125
- package/esm2020/src/circularchart3d/circularchart3d.module.mjs +0 -43
- package/esm2020/src/circularchart3d/selecteddataindexes.directive.mjs +0 -52
- package/esm2020/src/circularchart3d/series.directive.mjs +0 -62
- package/esm2020/src/index.mjs +0 -69
- package/esm2020/src/range-navigator/rangenavigator-all.module.mjs +0 -32
- package/esm2020/src/range-navigator/rangenavigator.component.mjs +0 -127
- package/esm2020/src/range-navigator/rangenavigator.module.mjs +0 -34
- package/esm2020/src/range-navigator/series.directive.mjs +0 -54
- package/esm2020/src/sankey/links.directive.mjs +0 -54
- package/esm2020/src/sankey/nodes.directive.mjs +0 -54
- package/esm2020/src/sankey/sankey-all.module.mjs +0 -38
- package/esm2020/src/sankey/sankey.component.mjs +0 -110
- package/esm2020/src/sankey/sankey.module.mjs +0 -43
- package/esm2020/src/smithchart/series.directive.mjs +0 -46
- package/esm2020/src/smithchart/smithchart-all.module.mjs +0 -32
- package/esm2020/src/smithchart/smithchart.component.mjs +0 -78
- package/esm2020/src/smithchart/smithchart.module.mjs +0 -34
- package/esm2020/src/sparkline/rangebandsettings.directive.mjs +0 -46
- package/esm2020/src/sparkline/sparkline-all.module.mjs +0 -29
- package/esm2020/src/sparkline/sparkline.component.mjs +0 -71
- package/esm2020/src/sparkline/sparkline.module.mjs +0 -34
- package/esm2020/src/stock-chart/annotations.directive.mjs +0 -60
- package/esm2020/src/stock-chart/axes.directive.mjs +0 -52
- package/esm2020/src/stock-chart/indicators.directive.mjs +0 -54
- package/esm2020/src/stock-chart/periods.directive.mjs +0 -54
- package/esm2020/src/stock-chart/rows.directive.mjs +0 -52
- package/esm2020/src/stock-chart/selecteddataindexes.directive.mjs +0 -52
- package/esm2020/src/stock-chart/series.directive.mjs +0 -58
- package/esm2020/src/stock-chart/stockchart-all.module.mjs +0 -29
- package/esm2020/src/stock-chart/stockchart.component.mjs +0 -350
- package/esm2020/src/stock-chart/stockchart.module.mjs +0 -106
- package/esm2020/src/stock-chart/stockevents.directive.mjs +0 -54
- package/esm2020/src/stock-chart/trendlines.directive.mjs +0 -59
- package/esm2020/syncfusion-ej2-angular-charts.mjs +0 -5
- package/fesm2015/syncfusion-ej2-angular-charts.mjs +0 -4684
- package/fesm2015/syncfusion-ej2-angular-charts.mjs.map +0 -1
- package/fesm2020/syncfusion-ej2-angular-charts.mjs +0 -4684
- package/fesm2020/syncfusion-ej2-angular-charts.mjs.map +0 -1
- package/syncfusion-ej2-angular-charts.d.ts +0 -5
package/LICENSE
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
|
2
|
+
|
|
3
|
+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
|
4
|
+
|
|
5
|
+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
|
6
|
+
|
|
7
|
+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
|
8
|
+
|
|
9
|
+
The Syncfusion license that contains the terms and conditions can be found at
|
|
10
|
+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
package/README.md
CHANGED
|
@@ -1,17 +1,7 @@
|
|
|
1
1
|
# Angular Charts Components
|
|
2
2
|
|
|
3
|
-
The [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) component is a well-crafted charting component for visualizing data with
|
|
4
|
-
|
|
5
|
-
> **Using this package with an AI coding agent**
|
|
6
|
-
>
|
|
7
|
-
> Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
|
|
8
|
-
>
|
|
9
|
-
> ```text
|
|
10
|
-
> Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com/agent-setup/prompt.md, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
|
|
11
|
-
> ```
|
|
12
|
-
> The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.
|
|
13
|
-
>
|
|
14
|
-
> **Platform reference:** [https://ai.syncfusion.com/angular/llms.txt](https://ai.syncfusion.com/angular/llms.txt)
|
|
3
|
+
The [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) component is a well-crafted charting component for visualizing data with 50+ charts and graphs, ranging from line to financial types. It can bind data from datasource such as array of JSON objects, `OData web services` or [DataManager](https://ej2.syncfusion.com/angular/documentation/data/data-binding/). All chart elements are rendered using Scalable Vector Graphics (SVG).
|
|
4
|
+
|
|
15
5
|
|
|
16
6
|
## What's Included in the Angular Charts Package
|
|
17
7
|
|
|
@@ -19,11 +9,11 @@ The [Angular Charts](https://www.syncfusion.com/angular-components/angular-chart
|
|
|
19
9
|
|
|
20
10
|
### Angular Chart
|
|
21
11
|
|
|
22
|
-
The [Angular Chart Component](https://www.syncfusion.com/angular-components/angular-charts
|
|
12
|
+
The [Angular Chart Component](https://www.syncfusion.com/angular-components/angular-charts) is a feature-rich chart component with built-in support for over 50 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
|
|
23
13
|
|
|
24
14
|
<p align="center">
|
|
25
|
-
<a href="https://
|
|
26
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
15
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
16
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/chart/overview-chart">Online demos</a> .
|
|
27
17
|
<a href="https://www.syncfusion.com/angular-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
28
18
|
</p>
|
|
29
19
|
|
|
@@ -33,42 +23,42 @@ The [Angular Chart Component](https://www.syncfusion.com/angular-components/angu
|
|
|
33
23
|
|
|
34
24
|
#### Key features
|
|
35
25
|
|
|
36
|
-
* Chart types: Supports
|
|
37
|
-
* [Angular Area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
38
|
-
* [Angular Bar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
39
|
-
* [Angular Line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
40
|
-
* [Angular Spline Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
41
|
-
* [Angular Bubble Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
42
|
-
* [Angular Scatter Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
43
|
-
* [Angular Step Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
44
|
-
* [Angular Polar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
45
|
-
* [Angular Radar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
46
|
-
* [Angular Range Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
47
|
-
* [Angular Stacked Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
26
|
+
* Chart types: Supports 50+ interactive chart types starting from line to financial chart. Few chart types include:
|
|
27
|
+
* [Angular Area Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-area-charts-npm)
|
|
28
|
+
* [Angular Bar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-bar-charts-npm)
|
|
29
|
+
* [Angular Line Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-line-charts-npm)
|
|
30
|
+
* [Angular Spline Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-spline-charts-npm)
|
|
31
|
+
* [Angular Bubble Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-bubble-charts-npm)
|
|
32
|
+
* [Angular Scatter Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-scatter-charts-npm)
|
|
33
|
+
* [Angular Step Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-step-charts-npm)
|
|
34
|
+
* [Angular Polar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-polar-charts-npm)
|
|
35
|
+
* [Angular Radar Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-radar-charts-npm)
|
|
36
|
+
* [Angular Range Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-range-charts-npm)
|
|
37
|
+
* [Angular Stacked Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-stacked-charts-npm)
|
|
48
38
|
* [Angular Box Plot Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/box-and-whisker-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
49
39
|
* [Angular Histogram Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/histogram-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
50
|
-
* [Angular Financial Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
51
|
-
* [Data binding](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
52
|
-
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
53
|
-
* [Rendering modes](https://
|
|
54
|
-
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
55
|
-
* [Annotation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
56
|
-
* [Zooming and panning](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
57
|
-
* [Crosshair & trackball](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
58
|
-
* [Selection](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
59
|
-
* [Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
60
|
-
* [RTL support](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
61
|
-
* [Appearance](https://
|
|
62
|
-
* [Accessibility](https://
|
|
63
|
-
* [Localization](https://
|
|
40
|
+
* [Angular Financial Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-financial-charts-npm)
|
|
41
|
+
* [Data binding](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/local-data): Bind the Chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data.
|
|
42
|
+
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/numeric): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
43
|
+
* [Rendering modes](https://ej2.syncfusion.com/angular/documentation/chart/render-methods/): Supports two type of rendering: SVG and Canvas. By default chart rendered in SVG, You can easily switch between the two simple configuration.
|
|
44
|
+
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/data-label-template): Supports data label to annotate points with label to improve the readability of data.
|
|
45
|
+
* [Annotation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-annotation): Provides support to mark any specific area of interest by adding custom element.
|
|
46
|
+
* [Zooming and panning](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zooming): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
|
|
47
|
+
* [Crosshair & trackball](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/cross-hair): Provides options to track data points closer to the mouse position or touch action.
|
|
48
|
+
* [Selection](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/range-selection): Allows you to select any data point or subset of points using selection feature.
|
|
49
|
+
* [Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats.
|
|
50
|
+
* [RTL support](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/rtl): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left.
|
|
51
|
+
* [Appearance](https://ej2.syncfusion.com/angular/documentation/chart/chart-appearance/): Colors for the charts are picked by the built-in theme, but each element of the chart can be customized by simple configuration options.
|
|
52
|
+
* [Accessibility](https://ej2.syncfusion.com/angular/documentation/chart/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=angular-chart-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the chart can be effectively used with assistive technologies such as screen readers.
|
|
53
|
+
* [Localization](https://ej2.syncfusion.com/angular/documentation/chart/localization/?utm_source=npm&utm_medium=listing&utm_campaign=angular-chart-npm#localization): The Localization library enables you to adapt the default text content of the chart to fit the language and cultural preferences of your target audience.
|
|
64
54
|
|
|
65
55
|
### Angular Accumulation Charts
|
|
66
56
|
|
|
67
57
|
Built-in support for pie, doughnut, pyramid and funnel chart types, to show the proportions and percentages between the categories.
|
|
68
58
|
|
|
69
59
|
<p align="center">
|
|
70
|
-
<a href="https://
|
|
71
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
60
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/accumulation-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
61
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/chart/default-pie">Online demos</a> .
|
|
72
62
|
<a href="https://www.syncfusion.com/angular-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
73
63
|
</p>
|
|
74
64
|
|
|
@@ -78,23 +68,23 @@ Built-in support for pie, doughnut, pyramid and funnel chart types, to show the
|
|
|
78
68
|
#### Key features
|
|
79
69
|
|
|
80
70
|
* Chart types: Supports Pie, Doughnut, Pyramid and Funnel charts.
|
|
81
|
-
* [Angular Pie Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
82
|
-
* [Angular Doughnut Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
83
|
-
* [Angular Pyramid Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart
|
|
84
|
-
* [Angular Funnel Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
85
|
-
* [Smart labels](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
86
|
-
* [Grouping](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
87
|
-
* [Semi-pie](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
88
|
-
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
89
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
71
|
+
* [Angular Pie Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-pie-charts-npm)
|
|
72
|
+
* [Angular Doughnut Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-doughnut-charts-npm)
|
|
73
|
+
* [Angular Pyramid Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/pyramid-chart)
|
|
74
|
+
* [Angular Funnel Chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-funnel-charts-npm)
|
|
75
|
+
* [Smart labels](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smart-labels): Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
|
|
76
|
+
* [Grouping](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/grouping): Supports grouping of data points based on value and point count.
|
|
77
|
+
* [Semi-pie](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/semi-pie): Provides options to customize the start and end angle of the pie chart.
|
|
78
|
+
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-legend): Provides options to display additional information about the points with the help of legend.
|
|
79
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/donut): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection.
|
|
90
80
|
|
|
91
81
|
### Angular Stock Chart
|
|
92
82
|
|
|
93
|
-
The [Angular Stock Chart](https://www.syncfusion.com/angular-components/angular-stock-chart
|
|
83
|
+
The [Angular Stock Chart](https://www.syncfusion.com/angular-components/angular-stock-chart) Component is a well-crafted, easy-to-use financial charting package to track and visualize stock price of any company over a specific period using charting and range tools.
|
|
94
84
|
|
|
95
85
|
<p align="center">
|
|
96
|
-
<a href="https://
|
|
97
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
86
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
87
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/stock-chart/default">Online demos</a> .
|
|
98
88
|
<a href="https://www.syncfusion.com/angular-components/angular-stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
99
89
|
</p>
|
|
100
90
|
|
|
@@ -104,23 +94,23 @@ The [Angular Stock Chart](https://www.syncfusion.com/angular-components/angular-
|
|
|
104
94
|
|
|
105
95
|
#### Key features
|
|
106
96
|
|
|
107
|
-
* [Data binding](https://
|
|
108
|
-
* [Range selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
109
|
-
* [Period selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
110
|
-
* [Technical indicators](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
111
|
-
* [Trendlines](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
112
|
-
* [Stock events](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
113
|
-
* [Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
114
|
-
* [Appearance](https://
|
|
115
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
97
|
+
* [Data binding](https://ej2.syncfusion.com/angular/documentation/stock-chart/working-with-data/): Bind the stock chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data.
|
|
98
|
+
* [Range selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/disabled-period): Supports range selector to filter a date range for data that needs to be visualized.
|
|
99
|
+
* [Period selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click.
|
|
100
|
+
* [Technical indicators](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest.
|
|
101
|
+
* [Trendlines](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Predicts the future trends with predetermined data for any measurements.
|
|
102
|
+
* [Stock events](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/stock-events): Supports stock events to show different kinds of market events on the chart.
|
|
103
|
+
* [Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/multi-pane): Provides the options to Export the stock chart to PDF, SVG and CSV formats.
|
|
104
|
+
* [Appearance](https://ej2.syncfusion.com/angular/documentation/stock-chart/appearance/): Colors for the stock chart are picked by the built-in theme, but each element of the stock chart can be customized by simple configuration options.
|
|
105
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/multi-pane): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball.
|
|
116
106
|
|
|
117
107
|
### Angular Range Navigator
|
|
118
108
|
|
|
119
|
-
The [Angular Range Navigator Component](https://www.syncfusion.com/angular-components/angular-range-selector
|
|
109
|
+
The [Angular Range Navigator Component](https://www.syncfusion.com/angular-components/angular-range-selector) is an interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.
|
|
120
110
|
|
|
121
111
|
<p align="center">
|
|
122
|
-
<a href="https://
|
|
123
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
112
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/range-navigator/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
113
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/range-navigator/default">Online demos</a> .
|
|
124
114
|
<a href="https://www.syncfusion.com/angular-components/angular-range-selector?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
125
115
|
</p>
|
|
126
116
|
|
|
@@ -130,19 +120,19 @@ The [Angular Range Navigator Component](https://www.syncfusion.com/angular-compo
|
|
|
130
120
|
|
|
131
121
|
#### Key features
|
|
132
122
|
|
|
133
|
-
* [Data sources](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
134
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
135
|
-
* [Lightweight](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
136
|
-
* [Period selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
137
|
-
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
123
|
+
* [Data sources](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/stock-chart): Bind the range navigator component with an array of JSON objects or DataManager.
|
|
124
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and animation.
|
|
125
|
+
* [Lightweight](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device.
|
|
126
|
+
* [Period selector](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/period-default): Provides options to select the data over the custom period.
|
|
127
|
+
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
138
128
|
|
|
139
129
|
### Angular Sparkline
|
|
140
130
|
|
|
141
|
-
The [Angular Sparkline Component](https://www.syncfusion.com/angular-components/angular-sparkline
|
|
131
|
+
The [Angular Sparkline Component](https://www.syncfusion.com/angular-components/angular-sparkline) is a very small chart control drawn without axes or coordinates. The sparklines are easy to interpret and convey more information to users by visualizing data in a small amount of space.
|
|
142
132
|
|
|
143
133
|
<p align="center">
|
|
144
|
-
<a href="https://
|
|
145
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
134
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/sparkline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
135
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/sparkline/default">Online demos</a> .
|
|
146
136
|
<a href="https://www.syncfusion.com/angular-components/angular-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
147
137
|
</p>
|
|
148
138
|
|
|
@@ -152,19 +142,19 @@ The [Angular Sparkline Component](https://www.syncfusion.com/angular-components/
|
|
|
152
142
|
|
|
153
143
|
#### Key features
|
|
154
144
|
|
|
155
|
-
* [Series types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
156
|
-
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
157
|
-
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
158
|
-
* [Range band](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
159
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
145
|
+
* [Series types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/series-type): Supports five types of sparklines : line, area, column, win loss, and pie to show data trends.
|
|
146
|
+
* [Axis types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/axis-type): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
147
|
+
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/customization): Supports data label to annotate points with label to improve the readability of data.
|
|
148
|
+
* [Range band](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/range-band): Provides options to highlight specific range of values.
|
|
149
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball.
|
|
160
150
|
|
|
161
151
|
### Angular Bullet Chart
|
|
162
152
|
|
|
163
|
-
The [Angular Bullet Chart Component](https://www.syncfusion.com/angular-components/angular-bullet-chart
|
|
153
|
+
The [Angular Bullet Chart Component](https://www.syncfusion.com/angular-components/angular-bullet-chart) is a interface to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them with a target value.
|
|
164
154
|
|
|
165
155
|
<p align="center">
|
|
166
|
-
<a href="https://
|
|
167
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
156
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/bullet-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
157
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/bullet-chart/default">Online demos</a> .
|
|
168
158
|
<a href="https://www.syncfusion.com/angular-components/angular-bullet-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
169
159
|
</p>
|
|
170
160
|
|
|
@@ -174,18 +164,18 @@ The [Angular Bullet Chart Component](https://www.syncfusion.com/angular-componen
|
|
|
174
164
|
|
|
175
165
|
#### Key features
|
|
176
166
|
|
|
177
|
-
* [Multiple measures](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
178
|
-
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
179
|
-
* [RTL support](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
180
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
167
|
+
* [Multiple measures](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/bullet-chart/multiple-data): Provides options to render multiple measure bars as well as multiple target bars to allow comparison of several measures at once.
|
|
168
|
+
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar.
|
|
169
|
+
* [RTL support](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/rtl): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left.
|
|
170
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=stockchart#/material/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover.
|
|
181
171
|
|
|
182
172
|
### Angular Smith Chart
|
|
183
173
|
|
|
184
174
|
The [Angular Smith Chart Component](https://www.syncfusion.com/angular-components/angular-smith-chart) visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines.
|
|
185
175
|
|
|
186
176
|
<p align="center">
|
|
187
|
-
<a href="https://
|
|
188
|
-
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/
|
|
177
|
+
<a href="https://ej2.syncfusion.com/angular/documentation/smithchart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Getting started</a> .
|
|
178
|
+
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/bootstrap5/smith-chart/default">Online demos</a> .
|
|
189
179
|
<a href="https://www.syncfusion.com/angular-components/angular-smith-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm">Learn more</a>
|
|
190
180
|
</p>
|
|
191
181
|
|
|
@@ -195,10 +185,10 @@ The [Angular Smith Chart Component](https://www.syncfusion.com/angular-component
|
|
|
195
185
|
|
|
196
186
|
#### Key features
|
|
197
187
|
|
|
198
|
-
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
199
|
-
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
200
|
-
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
201
|
-
* [Print and Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&
|
|
188
|
+
* [Legend](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/default): Provides options to display additional information about the series.
|
|
189
|
+
* [Data label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Supports data label to annotate points with label to improve the readability of data.
|
|
190
|
+
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Provides options to display additional information about data points on mouse hover.
|
|
191
|
+
* [Print and Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/print-export): Provides support to print and export the rendered smith chart for future use.
|
|
202
192
|
|
|
203
193
|
## Setup
|
|
204
194
|
|
|
@@ -272,85 +262,44 @@ export class AppComponent implements OnInit {
|
|
|
272
262
|
|
|
273
263
|
Chart components are available in following list of frameworks.
|
|
274
264
|
|
|
275
|
-
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?
|
|
265
|
+
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/> [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
|
|
276
266
|
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
277
267
|
|
|
278
268
|
## Showcase samples
|
|
279
269
|
|
|
280
|
-
* Expense Tracker - [Source](https://github.com/syncfusion/ej2-
|
|
281
|
-
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-
|
|
282
|
-
* [Angular Stock Chart demo](https://ej2.syncfusion.com/showcase/angular/stockchart/#/stockChart
|
|
283
|
-
* Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-angular-health-tracker-dashboard-demo
|
|
270
|
+
* Expense Tracker - [Source](https://github.com/syncfusion/ej2-sample-ng-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/#/dashboard?utm_source=npm&utm_campaign=chart)
|
|
271
|
+
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ng-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_campaign=chart)
|
|
272
|
+
* [Angular Stock Chart demo](https://ej2.syncfusion.com/showcase/angular/stockchart/#/stockChart/?utm_source=npm&utm_campaign=chart)
|
|
273
|
+
* Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-angular-health-tracker-dashboard-demo), [Live Demo](https://ej2.syncfusion.com/showcase/angular/fitness-tracker-app/)
|
|
284
274
|
|
|
285
275
|
## Resources
|
|
286
276
|
|
|
287
|
-
* [Documentation](https://
|
|
288
|
-
* [Theme Studio](https://ej2.syncfusion.com/themestudio
|
|
289
|
-
* [What's New](https://www.syncfusion.com/products/whatsnew/angular?
|
|
290
|
-
* [Road Map](https://www.syncfusion.com/products/roadmap/angular
|
|
291
|
-
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=angular&type=all
|
|
277
|
+
* [Documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started)
|
|
278
|
+
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
|
|
279
|
+
* [What's New](https://www.syncfusion.com/products/whatsnew/angular?utm_medium=listing&utm_source=github)
|
|
280
|
+
* [Road Map](https://www.syncfusion.com/products/roadmap/angular)
|
|
281
|
+
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=angular&type=all)
|
|
292
282
|
|
|
293
283
|
## Support
|
|
294
284
|
|
|
295
285
|
Product support is available through the following mediums.
|
|
296
286
|
|
|
297
|
-
* [Support ticket](https://support.syncfusion.com/support/tickets/create
|
|
287
|
+
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
298
288
|
* [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
299
|
-
* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new
|
|
289
|
+
* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new)
|
|
300
290
|
* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)
|
|
301
291
|
* Live chat
|
|
302
292
|
|
|
303
|
-
## Other Popular Angular Components
|
|
304
|
-
|
|
305
|
-
Explore other popular Syncfusion<sup>®</sup> Angular components curated from UI components, standalone SDKs, and document solution suites.
|
|
306
|
-
|
|
307
|
-
<table>
|
|
308
|
-
<tr>
|
|
309
|
-
<td align="center">
|
|
310
|
-
<a href="https://www.syncfusion.com/angular-components/angular-data-grid">Angular DataGrid</a>
|
|
311
|
-
</td>
|
|
312
|
-
<td align="center">
|
|
313
|
-
<a href="https://www.syncfusion.com/scheduler-sdk/angular-scheduler">Angular Scheduler</a>
|
|
314
|
-
</td>
|
|
315
|
-
<td align="center">
|
|
316
|
-
<a href="https://www.syncfusion.com/angular-components/angular-file-manager">Angular File Manager</a>
|
|
317
|
-
</td>
|
|
318
|
-
<td align="center">
|
|
319
|
-
<a href="https://www.syncfusion.com/gantt-sdk/angular-gantt-chart">Angular Gantt Chart</a>
|
|
320
|
-
</td>
|
|
321
|
-
<td align="center">
|
|
322
|
-
<a href="https://www.syncfusion.com/diagram-sdk/angular-diagram">Angular Diagram</a>
|
|
323
|
-
</td>
|
|
324
|
-
</tr>
|
|
325
|
-
<tr>
|
|
326
|
-
<td align="center">
|
|
327
|
-
<a href="https://www.syncfusion.com/rich-text-editor-sdk/angular-rich-text-editor">Angular Rich Text Editor</a>
|
|
328
|
-
</td>
|
|
329
|
-
<td align="center">
|
|
330
|
-
<a href="https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor">Angular DOCX Editor</a>
|
|
331
|
-
</td>
|
|
332
|
-
<td align="center">
|
|
333
|
-
<a href="https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer">Angular PDF Viewer</a>
|
|
334
|
-
</td>
|
|
335
|
-
<td align="center">
|
|
336
|
-
<a href="https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor">Angular Spreadsheet Editor</a>
|
|
337
|
-
</td>
|
|
338
|
-
<td align="center">
|
|
339
|
-
<a href="https://www.syncfusion.com/angular-components/angular-maps-library">Angular Maps</a>
|
|
340
|
-
</td>
|
|
341
|
-
</tr>
|
|
342
|
-
</table>
|
|
343
|
-
|
|
344
293
|
## Changelog
|
|
345
294
|
|
|
346
|
-
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/charts/CHANGELOG.md
|
|
295
|
+
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/charts/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
|
347
296
|
|
|
348
297
|
## License and copyright
|
|
349
298
|
|
|
350
|
-
> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/
|
|
299
|
+
> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [Angular UI components](https://www.syncfusion.com/angular-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
|
|
351
300
|
|
|
352
|
-
> A free community [license](https://
|
|
301
|
+
> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
|
353
302
|
|
|
354
|
-
See [LICENSE FILE](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license
|
|
303
|
+
See [LICENSE FILE](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license) for more info.
|
|
355
304
|
|
|
356
|
-
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
|
305
|
+
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|