UNPKG

@syncfusion/ej2-charts

Version:

Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.

229 lines (167 loc) 25.2 kB
# JavaScript Chart Control The [JavaScript Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) control 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/documentation/data/data-binding/). All chart elements are rendered using Scalable Vector Graphics (SVG). ## What's Included in the JavaScript Charts Package The [JavaScript Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) package includes the following list of components. ### JavaScript Chart The [JavaScript Chart Component](https://www.syncfusion.com/javascript-ui-controls/javascript-charts) is a feature-rich chart control with built-in support for over 50 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/chart/line.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Learn more</a> </p> <p align="center"> <img alt="JavaScript Chart Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-chart.png"> </p> #### Key features * Chart types: Supports 50+ interactive chart types starting from line to financial chart. Few chart types include: * [JavaScript Area Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/area-chart??utm_source=npm&utm_medium=listing&utm_campaign=javascript-area-chart-npm) * [JavaScript Bar Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-bar-chart-npm) * [JavaScript Line Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-line-chart-npm) * [JavaScript Spline Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-spline-chart-npm) * [JavaScript Bubble Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-bubble-chart-npm) * [JavaScript Scatter Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-scatter-chart-npm) * [JavaScript Step Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-step-chart-npm) * [JavaScript Polar Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-polar-chart-npm) * [JavaScript Radar Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-radar-chart-npm) * [JavaScript Range Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-range-chart-npm) * [JavaScript Stacked Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-stacked-chart-npm) * [JavaScript Box Plot Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/box-and-whisker-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) * [JavaScript Histogram Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/histogram-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) * [JavaScript Financial Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-stock-chart-npm) * [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/local-data.html): 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. * [Axis types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/numeric.html): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string. * [Rendering modes](https://ej2.syncfusion.com/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. * [Data label](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/data-label-template.html): Supports data label to annotate points with label to improve the readability of data. * [Annotation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-annotation.html): Provides support to mark any specific area of interest by adding custom element. * [Zooming and panning](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zooming.html): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming. * [Crosshair & trackball](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/cross-hair.html): Provides options to track data points closer to the mouse position or touch action. * [Selection](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/selection.html): Allows you to select any data point or subset of points using selection feature. * [Export](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export.html): Provides the options to Export the chart to PDF, SVG and CSV formats. * [RTL support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/right-to-left.html): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left. * [Appearance](https://ej2.syncfusion.com/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. * [Accessibility](https://ej2.syncfusion.com/documentation/chart/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-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. * [Localization](https://ej2.syncfusion.com/documentation/chart/localization/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-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. ### JavaScript Accumulation Chart Built-in support for pie, doughnut, pyramid and funnel series type, to show the proportions and percentages between the categories. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/accumulation-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/chart/default-pie.html">Online demos</a> . <a href="https://www.syncfusion.com/products/javascript/chart">Learn more</a> </p> <p align="center"> <img alt="JavaScript Accumulation Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-accumulation-chart.png"> </p> #### Key features * Chart types: Supports Pie, Doughnut, Pyramid and Funnel charts. * [JavaScript Pie Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-pie-chart-npm) * [JavaScript Doughnut Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-doughnut-chart-npm) * [JavaScript Pyramid Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/pyramid-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-pyramid-chart-npm) * [JavaScript Funnel Chart](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=javascript-funnel-chart-npm) * [Smart labels](https://ej2.syncfusion.com/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. * [Grouping](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/grouping): Supports grouping of data points based on value and point count. * [Semi-pie](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/semi-pie): Provides options to customize the start and end angle of the pie chart. * [Legend](https://ej2.syncfusion.com/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. * [Tooltip](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-radius): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection. ### JavaScript Stock Chart The [JavaScript Stock Chart](https://www.syncfusion.com/javascript-ui-controls/js-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. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/stock-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/stock-chart/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-stock-chart">Learn more</a> </p> <p align="center"> <img alt="JavaScript Stock Chart Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-stock-chart.png"> </p> #### Key features * [Data binding](https://ej2.syncfusion.com/documentation/stock-chart/working-with-data/): Bind the stock chart control with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data. * [Range selector](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/disabled-period): Supports range selector to filter a date range for data that needs to be visualized. * [Period selector](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click. * [Technical indicators](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/default): Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest. * [Trendlines](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/default): Predicts the future trends with predetermined data for any measurements. * [Stock events](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/stock-events): Supports stock events to show different kinds of market events on the chart. * [Export](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/default): Provides the options to Export the stock chart to PDF, SVG and CSV formats. * [Appearance](https://ej2.syncfusion.com/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. * [Tooltip](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangeselector#/material/stock-chart/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball. ### JavaScript Range Navigator The [JavaScript Range Navigator](https://www.syncfusion.com/javascript-ui-controls/js-range-seletor) control 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. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/range-navigator/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/range-navigator/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-range-selector">Learn more</a> </p> <p align="center"> <img alt="JavaScript Range Navigator Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-range-navigator.png"> </p> #### Key features * [Data sources](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=rangenavigator#/material/range-navigator/default): Bind the range navigator control with an array of JSON objects or DataManager. * [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=rangenavigator#/material/range-navigator/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and animaiton. * [Lightweight](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangenavigtor#/material/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device. * [Period-selector](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangenavigtor#/material/range-navigator/period-selector): Provides options to select the data over the custom period. * [Axis types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=rangenavigtor#/material/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string. ### JavaScript Sparkline The [JavaScript Sparkline](https://www.syncfusion.com/javascript-ui-controls/js-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. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/sparkline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/sparkline/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-sparkline">Learn more</a> </p> <p align="center"> <img alt="JavaScript Sparkline Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-sparkline.png"> </p> #### Key features * [Series types](https://ej2.syncfusion.com/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. * [Axis types](https://ej2.syncfusion.com/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. * [Data label](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/customization): Supports data label to annotate points with label to improve the readability of data. * [Range band](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/range-band): Provides options to highlight specific range of values. * [Tooltip](https://ej2.syncfusion.com/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. ### JavaScript Bullet Chart The [JavaScript Bullet Chart](https://www.syncfusion.com/javascript-ui-controls/js-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. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/bullet-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/bullet-chart/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart">Learn more</a> </p> <p align="center"> <img alt="JavaScript Bullet Chart Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-bullet-chart.png"> </p> #### Key features * [Multiple measures](https://ej2.syncfusion.com/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. * [Legend](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar. * [RTL support](https://ej2.syncfusion.com/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. * [Tooltip](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover. ### JavaScript Smith Chart The [JavaScript Smith Chart](https://www.syncfusion.com/javascript-ui-controls/js-smith-chart) visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines. <p align="center"> <a href="https://ej2.syncfusion.com/documentation/smithchart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm">Getting started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm#/material/smith-chart/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-smith-chart">Learn more</a> </p> <p align="center"> <img alt="JavaScript Smith Chart Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-smith-chart.png"> </p> #### Key features * [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/default): Provides options to display additional information about the series. * [Data label](https://ej2.syncfusion.com/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. * [Tooltip](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Provides options to display additional information about data points on mouse hover. * [Print and Export](https://ej2.syncfusion.com/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. ## Supported frameworks Chart control is also offered in following list of frameworks. | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-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; | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples * Expense Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=chart#/dashboard) * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=chart) ## Support Product support is available through following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-chart-npm) * Live chat ## Changelog Check the changelog [here](https://github.com/syncfusion/ej2-charts/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=chart). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright > 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<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), 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). > 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. See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=chart) for more info. © Copyright 2025 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.