|
1 | 1 | # ej2-angular-charts
|
2 |
| -The Chart control is used to visualize the data with user interactivity and provides customizing options to configure the data visually. It can bind data from datasource such as array of JSON objects , `OData web services` or |
3 |
| -[DataManager](http://ej2.syncfusion.com/angular/documentation/data?utm_source=npm&utm_campaign=chart). All chart elements are rendered using Scalable Vector Graphics (SVG). |
| 2 | +The [Angular Charts][https://www.syncfusion.com/angular-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm] control is used to visualize the data with user interactivity and provides customizing options to configure the data visually. It can bind data from datasource such as array of JSON objects , `OData web services` or |
| 3 | +[DataManager](http://ej2.syncfusion.com/angular/documentation/data?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm). All chart elements are rendered using Scalable Vector Graphics (SVG). |
4 | 4 |
|
5 | 5 | 
|
6 | 6 |
|
7 |
| -> Chart is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2?utm_source=npm&utm_campaign=chart) |
| 7 | +> Chart is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
8 | 8 |
|
9 | 9 |
|
10 | 10 | ## Setup
|
@@ -33,72 +33,74 @@ Following list of components are available in the package
|
33 | 33 | ## Supported frameworks
|
34 | 34 | `Chart` components are available in following list of
|
35 | 35 |
|
36 |
| - 1. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts?utm_source=npm&utm_campaign=chart) |
37 |
| - 2. [Vue.js](https://github.com/syncfusion/ej2-vue-ui-components/tree/master/components/charts?utm_source=npm&utm_campaign=chart) |
38 |
| - 3. [ASP.NET Core](https://aspdotnetcore.syncfusion.com/Chart/Line#/material) |
39 |
| - 4. [ASP.NET MVC](https://aspnetmvc.syncfusion.com/Chart/Line#/material) |
40 |
| - 5. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/charts) |
| 36 | + 1. [Blazor](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
| 37 | + 2. [React](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
| 38 | + 3. [Vue.js](https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
| 39 | + 4. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/charts?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
41 | 40 |
|
42 | 41 | ## Showcase samples
|
43 | 42 |
|
44 |
| -* Expanse 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)) |
45 |
| -* 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)) |
46 |
| -* Stock Chart ([Live Demo](https://ej2.syncfusion.com/showcase/angular/stockchart/#/stockChart/?utm_source=npm&utm_campaign=chart)) |
| 43 | +* Expanse Tracker ([Source](https://github.com/syncfusion/ej2-sample-ng-expensetracker?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/#/dashboard?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)) |
| 44 | +* Loan Calculator ([Source](https://github.com/syncfusion/ej2-sample-ng-loancalculator?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)) |
| 45 | +* Stock Chart ([Live Demo](https://ej2.syncfusion.com/showcase/angular/stockchart/#/stockChart/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm)) |
47 | 46 |
|
48 | 47 |
|
49 | 48 | ## Key Features
|
50 | 49 |
|
51 | 50 | ### Chart
|
52 | 51 | * **Chart Types** - Supports 25 interactive chart types starting from line to financial chart.
|
53 |
| - * [**Data sources**](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. |
| 52 | + * [**Data sources**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/local-data) - Bind the Chart component with an array of JSON objects or DataManager. |
54 | 53 | * **Axis Types** - Supports multiple axes, and able to plot data with different data types such as numbers, datetime, logarithmic and string.
|
55 |
| - * [**Multiple Pane**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/candle) - Provides the options to split the chart area into multiple pane. |
56 |
| - * [**Multilevel Labels**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/multi-level-label) - Organizes or groups data points in the chart based on different categories. |
57 |
| - * [**Axis Crossing**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/axes-crossing) - Provides the option to moves the origin of axis to any point within the chart area. |
58 |
| - * [**Smart Labels**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smart-axis-labels) - Avoids overlapping of axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows. |
59 |
| - * [**Stripline**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/stripline) - Provides options to highlight and annotate any region in chart. |
60 |
| - * [**DataLabel**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/datalabel-template) - Datalabel annotates data points with label to improve the readability of data. |
61 |
| - * [**Technical Indicators**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/adindicator) - Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest. |
62 |
| - * [**Trendlines**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/trend-lines) - Predicts the future trends with predetermined data for any measurements. |
63 |
| - * [**Error Bars**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/error-bar) - Provides options to handle any error or uncertainity in the measurements. |
64 |
| - * [**Empty Points**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/empty-point) - Provides options to handle missed data for the series elegantly with empty points. |
65 |
| - * [**Annotation**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/annotation) - Provides support to mark any specific area of interest by adding custom element. |
66 |
| - * [**Vertical Chart**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/vertical-chart) - Provides options to invert the chart. |
67 |
| - * [**Zooming**](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. |
68 |
| - * [**Crosshair & Trackball**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/crosshair) - Provides options to track data points closer to the mouse position or touch action. |
69 |
| - * [**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. |
70 |
| - * [**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. |
71 |
| - * [**RTL support**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/inversed) - Provides a full-fledged right-to-left mode which aligns axis in the chart control from right to left. |
| 54 | + * [**Multiple Pane**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/candle) - Provides the options to split the chart area into multiple pane. |
| 55 | + * [**Multilevel Labels**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/multi-level-label) - Organizes or groups data points in the chart based on different categories. |
| 56 | + * [**Axis Crossing**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/axes-crossing) - Provides the option to moves the origin of axis to any point within the chart area. |
| 57 | + * [**Smart Labels**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/smart-axis-labels) - Avoids overlapping of axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows. |
| 58 | + * [**Stripline**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/stripline) - Provides options to highlight and annotate any region in chart. |
| 59 | + * [**DataLabel**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/datalabel-template) - Datalabel annotates data points with label to improve the readability of data. |
| 60 | + * [**Technical Indicators**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/adindicator) - Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest. |
| 61 | + * [**Trendlines**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/trend-lines) - Predicts the future trends with predetermined data for any measurements. |
| 62 | + * [**Error Bars**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/error-bar) - Provides options to handle any error or uncertainity in the measurements. |
| 63 | + * [**Empty Points**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/empty-point) - Provides options to handle missed data for the series elegantly with empty points. |
| 64 | + * [**Annotation**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/annotation) - Provides support to mark any specific area of interest by adding custom element. |
| 65 | + * [**Vertical Chart**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/vertical-chart) - Provides options to invert the chart. |
| 66 | + * [**Zooming**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/zooming) - Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming. |
| 67 | + * [**Crosshair & Trackball**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/crosshair) - Provides options to track data points closer to the mouse position or touch action. |
| 68 | + * [**Selection**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/range-selection) - Allows you to select any data point or subset of points using selection feature. |
| 69 | + * [**Export**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/export) - Provides the options to Export the chart to PDF, SVG and CSV formats. |
| 70 | + * [**RTL support**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/inversed) - Provides a full-fledged right-to-left mode which aligns axis in the chart control from right to left. |
72 | 71 |
|
73 | 72 | ### Accumulation Chart
|
74 | 73 | * **Chart Types** - Supports Pie, Doughnut, Pyramid and Funnel.
|
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 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/default-doughnut) - 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/doughnut) - Supports interactive features like tooltip, selection and explode. |
80 |
| - * [**Empty Points**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-empty-point) - Provides options to handle missed data for the series elegantly with empty points. |
| 74 | + * [**Smart Labels**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/smart-labels) - Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range. |
| 75 | + * [**Grouping**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/grouping) - Supports grouping based on value and point count. |
| 76 | + * [**Semi-Pie**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/semi-pie) - Provides options to customize the start and end angle of the pie chart. |
| 77 | + * [**Legend**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/default-doughnut) - Provides options to display additional information about the points with the help of legend. |
| 78 | + * [**Tooltip**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/doughnut) - Supports interactive features like tooltip, selection and explode. |
| 79 | + * [**Empty Points**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/chart/pie-empty-point) - Provides options to handle missed data for the series elegantly with empty points. |
81 | 80 |
|
82 | 81 | ### Range Navigator
|
83 | 82 | * **Data sources** - Supports local binding and remote data source.
|
84 |
| - * [**Tooltip**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/default) - Supports interactive features such as tooltip and animation. |
85 |
| - * [**Lightweight**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/light-weight) - Supports light-weight Range navigator to load in mobile device. |
86 |
| - * [**Period Selector**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/period-default) - Provides options to select the data over the custom period. |
| 83 | + * [**Tooltip**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/rangenavigator/default) - Supports interactive features such as tooltip and animation. |
| 84 | + * [**Lightweight**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/rangenavigator/light-weight) - Supports light-weight Range navigator to load in mobile device. |
| 85 | + * [**Period Selector**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm#/material/rangenavigator/period-default) - Provides options to select the data over the custom period. |
87 | 86 | * **Axis Types** - Supports multiple axis and series types to plot the data.
|
88 | 87 |
|
89 | 88 | ## Support
|
90 | 89 | Product support is available for through following mediums.
|
91 | 90 |
|
92 |
| -* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=chart) support system or [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_campaign=chart). |
93 |
| -* New [GitHub issue](https://github.com/syncfusion/ej2-angular-ui-components/issues/new). |
| 91 | +* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) support system or [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm). |
| 92 | +* New [GitHub issue](https://github.com/syncfusion/ej2-angular-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm). |
94 | 93 | * Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
|
95 | 94 |
|
96 | 95 | ## License
|
97 | 96 |
|
98 |
| -Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license) |
| 97 | +Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
99 | 98 |
|
100 | 99 | ## Changelog
|
101 | 100 |
|
102 |
| -Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/charts/CHANGELOG.md) |
| 101 | +Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/charts/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) |
103 | 102 |
|
104 |
| -© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. |
| 103 | +© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. |
| 104 | + |
| 105 | +## About Syncfusion Angular UI Components |
| 106 | +Syncfusion's [Angular Components](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm) library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Grid, we provide popular Angular Components such as [Angular Grid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), [Angular Tree Grid](https://www.syncfusion.com/angular-components/angular-tree-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), [Angular ListView](https://www.syncfusion.com/angular-components/angular-listview?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), [Angular Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm), and [Angular PDF Viewer](https://www.syncfusion.com/angular-components/angular-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=angular-charts-npm). |
0 commit comments