Skip to content

Commit 07959f5

Browse files
Merge pull request #246 from gowthamanthavasiyappan/SEO-2884-angular-grid-charts-external-links
SEO-2884-angular-grid-charts-external-links
2 parents 06cb1d6 + 494cae7 commit 07959f5

File tree

2 files changed

+82
-78
lines changed

2 files changed

+82
-78
lines changed

components/charts/README.md

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# 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).
44

55
![Chart](https://ej2.syncfusion.com/products/images/chart/readme.gif)
66

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)
88
99

1010
## Setup
@@ -33,72 +33,74 @@ Following list of components are available in the package
3333
## Supported frameworks
3434
`Chart` components are available in following list of
3535

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)
4140

4241
## Showcase samples
4342

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))
4746

4847

4948
## Key Features
5049

5150
### Chart
5251
* **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.
5453
* **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.
7271

7372
### Accumulation Chart
7473
* **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.
8180

8281
### Range Navigator
8382
* **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.
8786
* **Axis Types** - Supports multiple axis and series types to plot the data.
8887

8988
## Support
9089
Product support is available for through following mediums.
9190

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).
9493
* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
9594

9695
## License
9796

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)
9998

10099
## Changelog
101100

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)
103102

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

Comments
 (0)