@syncfusion/ej2-react-charts 20.3.60 → 20.4.38

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +25 -3
  2. package/README.md +260 -78
  3. package/dist/ej2-react-charts.min.js +1 -1
  4. package/dist/ej2-react-charts.umd.min.js +1 -1
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -4,11 +4,33 @@
4
4
 
5
5
  ### Chart
6
6
 
7
+ #### New Features
8
+
9
+ - `#I346292`, `#I347892` - Provided support to wrap data labels in the accumulation charts.
10
+ - `#I401851` - Provided support to rotate the axis title from 0 to 360 degree.
11
+ - Provided support for dashed legends for dashed line series.
12
+
13
+ #### Bug Fixes
14
+
15
+ - `#I420456` - Now cancel argument in legend click event working properly.
16
+ - `#I423376` - Console error thrown when rendering the tooltip in trendlines has been fixed.
17
+ - `#I422475` - Accumulation chart height is now proper with respect to its parent container.
18
+
19
+ ### Bullet Chart
20
+
21
+ #### Bug Fixes
22
+
23
+ - `#I422321` - Now label alignment property is working properly in bullet chart.
24
+
25
+ ## 20.3.60 (2022-12-06)
26
+
27
+ ### Chart
28
+
7
29
  #### Bug Fixes
8
30
 
9
- - `#I421349` - Now chart axis is removing properly on dynamic update.
10
- - `#I421251` - Now Pie chart render properly when the width is less than 20% for the parent div.
11
- - `#I421251` - Pie chart gets crashed when setting the datalabel has been fixed.
31
+ - `#I421349` - Now chart axis is removed properly on dynamic update.
32
+ - `#I421251` - Now Pie chart render When set the width to less than 20% for the parent div.
33
+ - `#I421251` - Pie chart gets crashed when setting the datalabel issue has been fixed.
12
34
 
13
35
  ### RangeNavigator
14
36
 
package/README.md CHANGED
@@ -1,97 +1,279 @@
1
- # ej2-react-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/react/documentation/data/?utm_source=npm&utm_campaign=chart). All chart elements are rendered using Scalable Vector Graphics (SVG).
1
+ # React Charts Components
4
2
 
5
- ![Chart](https://ej2.syncfusion.com/products/images/chart/readme.gif)
3
+ The [React Chart](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-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/react/documentation/data/data-binding/). All chart elements are rendered using Scalable Vector Graphics (SVG).
6
4
 
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)
5
+ ## What's Included in the React Charts Package
6
+
7
+ The [React Charts](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) package includes the following list of components.
8
+
9
+ ### React Chart
10
+
11
+ The [React Chart Component](https://www.syncfusion.com/react-components/react-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.
12
+
13
+ <p align="center">
14
+ <a href="https://ej2.syncfusion.com/react/documentation/chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
15
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/overview">Online demos</a> .
16
+ <a href="https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
17
+ </p>
18
+
19
+ <p align="center">
20
+ <img alt="React Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-chart.png">
21
+ </p>
22
+
23
+ #### Key Features
24
+
25
+ * Chart types: Supports 50+ interactive chart types starting from line to financial chart. Few chart types include:
26
+ * [React Area Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-area-charts-npm)
27
+ * [React Bar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-bar-charts-npm)
28
+ * [React Line Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-line-charts-npm)
29
+ * [React Spline Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-spline-charts-npm)
30
+ * [React Bubble Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-bubble-charts-npm)
31
+ * [React Scatter Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-scatter-charts-npm)
32
+ * [React Step Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-step-charts-npm)
33
+ * [React Polar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-polar-npm)
34
+ * [React Radar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-radar-npm)
35
+ * [React Range Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-range-charts-npm)
36
+ * [React Stacked Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-stacked-charts-npm)
37
+ * [React Box Plot Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/box-and-whisker-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
38
+ * [React Histogram Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/histogram-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
39
+ * [React Financial Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-stock-charts-npm)
40
+ * [Data binding](https://ej2.syncfusion.com/react/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.
41
+ * [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/numeric-axis): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string.
42
+ * [Rendering modes](https://ej2.syncfusion.com/react/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.
43
+ * [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/datalabel-template): Supports data label to annotate points with label to improve the readability of data.
44
+ * [Annotation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/annotation): Provides support to mark any specific area of interest by adding custom element.
45
+ * [Zooming and panning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zoom): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
46
+ * [Crosshair & trackball](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/crosshair): Provides options to track data points closer to the mouse position or touch action.
47
+ * [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/selection): Allows you to select any data point or subset of points using selection feature.
48
+ * [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats.
49
+ * [RTL support](https://ej2.syncfusion.com/react/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.
50
+ * [Appearance](https://ej2.syncfusion.com/react/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.
51
+ * [Accessibility](https://ej2.syncfusion.com/react/documentation/chart/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-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.
52
+ * [Localization](https://ej2.syncfusion.com/react/documentation/chart/localization/?utm_source=npm&utm_medium=listing&utm_campaign=react-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.
53
+
54
+ ### React Accumulation Chart
55
+
56
+ Built-in support for pie, doughnut, pyramid and funnel series type, to show the proportions and percentages between the categories.
57
+
58
+ <p align="center">
59
+ <a href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
60
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/default-pie">Online demos</a> .
61
+ <a href="https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
62
+ </p>
63
+
64
+ <p align="center">
65
+ <img alt="React Accumulation Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-accumulation-chart.png">
66
+ </p>
67
+
68
+ #### Key features
69
+
70
+ * Chart types: Supports Pie, Doughnut, Pyramid and Funnel charts.
71
+ * [React Pie Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-pie-charts-npm)
72
+ * [React Doughnut Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-donut-charts-npm)
73
+ * [React Pyramid Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pyramid-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-pyramid-charts-npm)
74
+ * [React Funnel Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-funnel-charts-npm)
75
+ * [Smart labels](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smartlabels): Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
76
+ * [Grouping](https://ej2.syncfusion.com/react/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/react/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/react/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/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/default-pie): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection.
80
+
81
+ ### React Stock Chart
82
+
83
+ The [React Stock Chart Component](https://www.syncfusion.com/react-components/react-stock-chart) 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.
84
+
85
+ <p align="center">
86
+ <a href="https://ej2.syncfusion.com/react/documentation/stock-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
87
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default">Online demos</a> .
88
+ <a href="https://www.syncfusion.com/react-components/react-stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
89
+ </p>
90
+
91
+ <p align="center">
92
+ <img alt="React Stock Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-stock-chart.png">
93
+ </p>
94
+
95
+ #### Key features
96
+
97
+ * [Data binding](https://ej2.syncfusion.com/react/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/react/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/react/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/react/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/react/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/react/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/react/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/react/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/react/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.
106
+
107
+ ### React Range Navigator
108
+
109
+ The [React Chart Component](https://www.syncfusion.com/react-components/react-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.
110
+
111
+ <p align="center">
112
+ <a href="https://ej2.syncfusion.com/react/documentation/range-navigator/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
113
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/default">Online demos</a> .
114
+ <a href="https://www.syncfusion.com/react-components/react-range-selector?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
115
+ </p>
116
+
117
+ <p align="center">
118
+ <img alt="React Range Navigator Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-range-navigator.png">
119
+ </p>
120
+
121
+ #### Key features
122
+
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/react/demos/?utm_source=npm&utm_campaign=chart#/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/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device.
126
+ * [Period-selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/period-selector): Provides options to select the data over the custom period.
127
+ * [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
128
+
129
+
130
+ ### React Sparkline
131
+
132
+ The [React Sparkline Component](https://www.syncfusion.com/react-components/react-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.
133
+
134
+ <p align="center">
135
+ <a href="https://ej2.syncfusion.com/react/documentation/sparkline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
136
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/default">Online demos</a> .
137
+ <a href="https://www.syncfusion.com/react-components/react-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
138
+ </p>
139
+
140
+ <p align="center">
141
+ <img alt="React Sparkline Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-sparkline.png">
142
+ </p>
143
+
144
+ #### Key features
145
+
146
+ * [Series types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/series-types): Supports five types of sparklines : line, area, column, win loss, and pie to show data trends.
147
+ * [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/axis-types): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
148
+ * [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/customization): Supports data label to annotate points with label to improve the readability of data.
149
+ * [Range band](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/range-band): Provides options to highlight specific range of values.
150
+ * [Tooltip](https://ej2.syncfusion.com/react/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.
151
+
152
+ ### React Bullet Chart
153
+
154
+ The [React Bullet Chart Component](https://www.syncfusion.com/react-components/react-bullet-chart) is an 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.
155
+
156
+ <p align="center">
157
+ <a href="https://ej2.syncfusion.com/react/documentation/bullet-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
158
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/bullet-chart/default">Online demos</a> .
159
+ <a href="https://www.syncfusion.com/react-components/react-bullet-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
160
+ </p>
161
+
162
+ <p align="center">
163
+ <img alt="React Bullet Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-bullet-chart.png">
164
+ </p>
165
+
166
+ #### Key features
167
+
168
+ * [Multiple measures](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/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.
169
+ * [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar.
170
+ * [RTL support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/right-to-left): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left.
171
+ * [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover.
172
+
173
+ ### React Smith Chart
174
+
175
+ The [React Smith Chart Component](https://www.syncfusion.com/react-components/react-smith-chart) visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines.
176
+
177
+ <p align="center">
178
+ <a href="https://ej2.syncfusion.com/react/documentation/smithchart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Getting started</a> .
179
+ <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/smith-chart/default">Online demos</a> .
180
+ <a href="https://www.syncfusion.com/react-components/react-smith-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm">Learn more</a>
181
+ </p>
182
+
183
+ <p align="center">
184
+ <img alt="React Smith Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-smith-chart.png">
185
+ </p>
186
+
187
+ #### Key features
188
+
189
+ * [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/default): Provides options to display additional information about the series.
190
+ * [Data label](https://ej2.syncfusion.com/react/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.
191
+ * [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Provides options to display additional information about data points on mouse hover.
192
+ * [Print and Export](https://ej2.syncfusion.com/react/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.
8
193
 
9
194
 
10
195
  ## Setup
11
- To install this package and its dependent packages, use the following command
12
196
 
13
- ```sh
14
- npm install @syncfusion/ej2-react-charts
197
+ ### Create a React Application
198
+
199
+ You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command.
200
+
201
+ ```bash
202
+ npx create-react-app my-app --template typescript
203
+ cd my-app
204
+ npm start
205
+ ```
206
+
207
+ ### Adding Syncfusion Chart package
208
+
209
+ All Syncfusion react packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install the react chart package, use the following command.
210
+
211
+ ```bash
212
+ npm install @syncfusion/ej2-react-charts --save
15
213
  ```
16
214
 
17
- ## Components included
18
-
19
- Following list of components are available in the package
20
- * Chart - Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
21
- * [Getting Started](https://ej2.syncfusion.com/react/documentation/chart/)
22
- * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/chart/line)
23
- * [Product Page](https://www.syncfusion.com/react-ui-components/charts/)
24
- * Accumulation Chart - Built-in support for Pie, Doughnut, Pyramid and funnel series type, to show the proportions and percentages between the categories.
25
- * [Getting Started](https://ej2.syncfusion.com/react/documentation/accumulation-chart/getting-started.html)
26
- * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/chart/default-pie)
27
- * [Product Page](https://www.syncfusion.com/react-ui-components/charts/)
28
- * Range Navigator - 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.
29
- * [Getting Started](https://ej2.syncfusion.com/react/documentation/rangenavigator/getting-started.html)
30
- * [View Online Demos](https://ej2.syncfusion.com/react/demos/#/material/rangenavigator/default)
31
- * [Product Page](https://www.syncfusion.com/react-ui-components/range-selector/)
215
+
216
+ ### Add Chart Component
217
+
218
+ In the **src/App.tsx** file, use the following code snippet to render the Syncfusion React Chart component and import **App.css** to apply styles to the chart:
219
+
220
+ ```typescript
221
+ import { ChartComponent, Category, Category, LineSeries } from '@syncfusion/ej2-react-charts';
222
+ import * as React from 'react';
223
+ import './App.css';
224
+
225
+ function App() {
226
+ let data = [
227
+ { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
228
+ { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
229
+ { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
230
+ { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
231
+ { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
232
+ { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
233
+ ];
234
+ const primaryxAxis = { valueType: 'Category' };
235
+
236
+ return <ChartComponent id="charts" primaryXAxis={primaryxAxis}>
237
+ <Inject services={[LineSeries, Category]}/>
238
+ <SeriesCollectionDirective>
239
+ <SeriesDirective dataSource={data} xName='month' yName='sales'/>
240
+ </SeriesCollectionDirective>
241
+ </ChartComponent>;
242
+ };
243
+ export default App;
244
+ ```
32
245
 
33
246
  ## Supported frameworks
34
- `Chart` components are available in following list of
35
-
36
- 1. [Angular](https://github.com/syncfusion/ej2-angular-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/)
41
-
42
- ## Key Features
43
-
44
- ### Chart
45
- * **Chart Types** - Supports 25 interactive chart types starting from line to financial chart.
46
- * [**Data sources**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/local-data) - Bind the Chart component with an array of JSON objects or DataManager.
47
- * **Axis Types** - Supports multiple axes, and able to plot data with different data types such as numbers, datetime, logarithmic and string.
48
- * [**Multiple Pane**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/candle) - Provides the options to split the chart area into multiple pane.
49
- * [**Multilevel Labels**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/multi-level-label) - Organizes or groups data points in the chart based on different categories.
50
- * [**Axis Crossing**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/axis-crossing) - Provides the option to moves the origin of axis to any point within the chart area.
51
- * [**Smart Labels**](https://ej2.syncfusion.com/react/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.
52
- * [**Stripline**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/stripline) - Provides options to highlight and annotate any region in chart.
53
- * [**DataLabel**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/datalabel-template) - Datalabel annotates data points with label to improve the readability of data.
54
- * [**Technical Indicators**](https://ej2.syncfusion.com/react/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.
55
- * [**Trendlines**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/trend-lines) - Predicts the future trends with predetermined data for any measurements.
56
- * [**Error Bars**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/error-bar) - Provides options to handle any error or uncertainity in the measurements.
57
- * [**Empty Points**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/empty-point) - Provides options to handle missed data for the series elegantly with empty points.
58
- * [**Annotation**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/annotation) - Provides support to mark any specific area of interest by adding custom element.
59
- * [**Vertical Chart**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/vertical) - Provides options to invert the chart.
60
- * [**Zooming**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zoom) - Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
61
- * [**Crosshair & Trackball**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/crosshair) - Provides options to track data points closer to the mouse position or touch action.
62
- * [**Selection**](https://ej2.syncfusion.com/react/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.
63
- * [**Export**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export) - Provides the options to Export the chart to PDF, SVG and CSV formats.
64
- * [**RTL support**](https://ej2.syncfusion.com/react/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.
65
-
66
- ### Accumulation Chart
67
- * **Chart Types** - Supports Pie, Doughnut, Pyramid and Funnel.
68
- * [**Smart Labels**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smartlabels) - Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
69
- * [**Grouping**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/grouping) - Supports grouping based on value and point count.
70
- * [**Semi-Pie**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/semi-pie) - Provides options to customize the start and end angle of the pie chart.
71
- * [**Legend**](https://ej2.syncfusion.com/react/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.
72
- * [**Tooltip**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/doughnut) - Supports interactive features like tooltip, selection and explode.
73
- * [**Empty Points**](https://ej2.syncfusion.com/react/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
-
75
- ### Range Navigator
76
- * **Data sources** - Supports local binding and remote data source.
77
- * [**Tooltip**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/default) - Supports interactive features such as tooltip and animation.
78
- * [**Lightweight**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/light-weight) - Supports light-weight Range navigator to load in mobile device.
79
- * [**Period Selector**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/period-selector-candle) - Provides options to select the data over the custom period.
80
- * **Axis Types** - Supports multiple axis and series types to plot the data.
81
247
 
82
- ## Support
83
- Product support is available for through following mediums.
248
+ Chart components are offered in following list of frameworks.
84
249
 
85
- * 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/react-js2?utm_source=npm&utm_campaign=chart).
86
- * New [GitHub issue](https://github.com/syncfusion/ej2-react-ui-components/issues/new).
87
- * Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
250
+ | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
251
+ | :-----: | :-----: | :-----: | :-----: | :-----: |
88
252
 
89
- ## License
253
+ ## Showcase samples
90
254
 
91
- Check the license detail [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license)
255
+ * Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/default)
256
+
257
+ ## Support
258
+
259
+ Product support is available through following mediums.
260
+
261
+ * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
262
+ * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
263
+ * [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
264
+ * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
265
+ * Live chat
92
266
 
93
267
  ## Changelog
94
268
 
95
- Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/CHANGELOG.md)
269
+ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
270
+
271
+ ## License and copyright
272
+
273
+ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s 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 80+ [React UI components](https://www.syncfusion.com/react-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).
274
+
275
+ > 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.
276
+
277
+ See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license) for more info.
96
278
 
97
279
  © Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
package/dist/ej2-react-charts.min.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-react-charts.min.js
3
- * version : 20.3.60
3
+ * version : 20.4.38
4
4
  * Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/dist/ej2-react-charts.umd.min.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-react-charts.umd.min.js
3
- * version : 20.3.60
3
+ * version : 20.4.38
4
4
  * Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-react-charts@*",
3
- "_id": "@syncfusion/ej2-react-charts@20.3.58",
3
+ "_id": "@syncfusion/ej2-react-charts@20.7.10",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-CwIhnTMkvwch96HCG+Qh/1s6/sKzexs0R9QXtTTG/qpT5vf+hP/oM9yWpdAnHw7BIvv3BJjVweSAKEUNblXGHA==",
5
+ "_integrity": "sha512-5WJJxM8vM+5SQ8x/XCqnQplZXd7KhbGqov74TLS3g+Z9a5Q8KG8scMhD9BSu4VmG1z+up1Sxji9BuyePQyBIEg==",
6
6
  "_location": "/@syncfusion/ej2-react-charts",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -19,8 +19,8 @@
19
19
  "_requiredBy": [
20
20
  "/"
21
21
  ],
22
- "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-charts/-/ej2-react-charts-20.3.58.tgz",
23
- "_shasum": "089bf757d34146d549ae0828c97b272b7f72a4fb",
22
+ "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-charts/-/ej2-react-charts-20.7.10.tgz",
23
+ "_shasum": "9011438ca30e73dc072104df815b5359b23ff3c4",
24
24
  "_spec": "@syncfusion/ej2-react-charts@*",
25
25
  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
26
26
  "author": {
@@ -31,9 +31,9 @@
31
31
  },
32
32
  "bundleDependencies": false,
33
33
  "dependencies": {
34
- "@syncfusion/ej2-base": "~20.3.56",
35
- "@syncfusion/ej2-charts": "20.3.60",
36
- "@syncfusion/ej2-react-base": "~20.3.56"
34
+ "@syncfusion/ej2-base": "~20.4.38",
35
+ "@syncfusion/ej2-charts": "20.4.38",
36
+ "@syncfusion/ej2-react-base": "~20.4.38"
37
37
  },
38
38
  "deprecated": false,
39
39
  "description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for React",
@@ -83,6 +83,6 @@
83
83
  "type": "git",
84
84
  "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
85
85
  },
86
- "version": "20.3.60",
86
+ "version": "20.4.38",
87
87
  "sideEffects": false
88
88
  }