@syncfusion/ej2-vue-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Vue
292 lines (215 loc) • 26.3 kB
Markdown
# Vue Charts Components
The [Vue Chart](https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-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/vue/documentation/data/data-binding/). All chart elements are rendered using Scalable Vector Graphics (SVG).
## What's Included in the Vue Charts Package
Following list of components are available in the package.
### Vue Chart
The [Vue Chart Component](https://www.syncfusion.com/vue-components/vue-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.
<p align="center">
<a href="https://ej2.syncfusion.com/vue/documentation/chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting Started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/chart/overview">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="Vue Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-chart.png">
</p>
#### Key features
* Chart types: Supports 50+ interactive chart types starting from line to financial chart. Few chart types include:
* [Vue Area Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-area-charts-npm)
* [Vue Bar Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-bar-charts-npm)
* [Vue Line Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-line-charts-npm)
* [Vue Spline Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-spline-charts-npm)
* [Vue Bubble Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-bubble-charts-npm)
* [Vue Scatter Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-bubble-charts-npm)
* [Vue Step Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-step-charts-npm)
* [Vue Polar Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-polar-charts-npm)
* [Vue Radar Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-radar-charts-npm)
* [Vue Range Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-range-charts-npm)
* [Vue Stacked Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-stacked-charts-npm)
* [Vue Box Plot Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/box-and-whisker-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
* [Vue Histogram Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/histogram-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
* [Vue Financial Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-stock-charts-npm)
* [Data binding](https://ej2.syncfusion.com/vue/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.
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/numeric): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string.
* [Rendering modes](https://ej2.syncfusion.com/vue/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/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/data-label-template): Supports data label to annotate points with label to improve the readability of data.
* [Annotation](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-annotation): Provides support to mark any specific area of interest by adding custom element.
* [Zooming and panning](https://ej2.syncfusion.com/vue/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.
* [Crosshair & trackball](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/cross-hair): Provides options to track data points closer to the mouse position or touch action.
* [Selection](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/selection): Allows you to select any data point or subset of points using selection feature.
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats.
* [RTL support](https://ej2.syncfusion.com/vue/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.
* [Appearance](https://ej2.syncfusion.com/vue/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/vue/documentation/chart/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=vue-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/vue/documentation/chart/localization/?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
### Vue 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/vue/documentation/accumulation-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting Started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/chart/default-pie">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="React Accumulation Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-accumulation-chart.png">
</p>
#### Key features
* Chart types: Supports Pie, Doughnut, Pyramid and Funnel charts.
* [Vue Pie Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-pie-charts-npm)
* [Vue Doughnut Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-doughnut-charts-npm)
* [Vue Pyramid Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/pyramid-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-pyramid-charts-npm)
* [Vue Funnel Chart](https://www.syncfusion.com/vue-components/vue-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-funnel-charts-npm)
* [Smart labels](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/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/vue/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.
### Vue Stock Chart
The [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart) Component is 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/vue/documentation/stock-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/stock-chart/default">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="Vue Stock Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-stock-chart.png">
</p>
#### Key features
* [Data binding](https://ej2.syncfusion.com/vue/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.
* [Range selector](https://ej2.syncfusion.com/vue/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.
* [Period selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click.
* [Technical indicators](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/ohlc): 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/vue/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/ohlc): Predicts the future trends with predetermined data for any measurements.
* [Stock events](https://ej2.syncfusion.com/vue/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.
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Provides the options to Export the stock chart to PDF, SVG and CSV formats.
* [Appearance](https://ej2.syncfusion.com/vue/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/vue/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball.
* ### Vue Range Navigator
The [Vue Range Navigator Component](https://www.syncfusion.com/vue-components/vue-range-selector) is a 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/vue/documentation/range-navigator/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/range-navigator/default">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-range-selector?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="Vue Range Navigator Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-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 component 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/vue/demos/?utm_source=npm&utm_campaign=rangenavigator#/material/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device.
* [Period-selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=rangenavigator#/material/range-navigator/period-selector): Provides options to select the data over the custom period.
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=rangenavigator#/material/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
### Vue Chart Sparkline
The [Vue Sparkline Component](https://www.syncfusion.com/vue-components/vue-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/vue/documentation/sparkline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/sparkline/default">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="Vue Sparkline Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-sparkline.png">
</p>
#### Key features
* [Series types](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/range-band): Provides options to highlight specific range of values.
* [Tooltip](https://ej2.syncfusion.com/vue/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.
### Vue Chart Bullet Chart
The [Vue Bullet Chart Component](https://www.syncfusion.com/vue-components/vue-bullet-chart) is a interface to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them with a target value.
<p align="center">
<a href="https://ej2.syncfusion.com/vue/documentation/bullet-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/bullet-chart/default">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-bullet-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<img alt="Vue Bullet Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-bullet-chart.png">
#### Key features
* [Multiple measures](https://ej2.syncfusion.com/vue/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/vue/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/vue/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/vue/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover.
### Vue Smith Chart
Tool for 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/vue/documentation/smithchart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
<a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/bootstrap5/smith-chart/default">Online demos</a> .
<a href="https://www.syncfusion.com/vue-components/vue-smith-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
</p>
<p align="center">
<img alt="Vue Smith Chart Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-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/vue/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/vue/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/vue/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.
### Adding Syncfusion Chart package
All Syncfusion Vue packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install Vue chart package, use the following command.
```bash
npm install @syncfusion/ej2-vue-charts --save
```
### Registering Chart Component
You can register the Chart component in your application by using the **Vue.use()**. Refer to the code example given below.
```typescript
import { ChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(ChartPlugin);
```
> Registering **ChartPlugin** in vue, will register the chart component along with its required child directives globally.
## Add Chart Component
Add the Vue Chart by using **ejs-chart** selector in **template** section of the **App.vue** file.
```html
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
],
primaryXAxis: {
valueType: 'Category'
}
};
},
provide: {
chart: [LineSeries, Category]
}
}
</script>
```
> Refer the [Getting Started with Vue3](https://ej2.syncfusion.com/vue/documentation/chart/getting-started/) for using Syncfusion Vue components in Vue 3 applications.
## Supported frameworks
Chart components are available in following list of frameworks.
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/> [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/> [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
| :-----: | :-----: | :-----: | :-----: | :-----: |
## Showcase samples
* [Assest Management](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/dashboard?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/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new)
* [Request feature or report bug](https://www.syncfusion.com/feedback/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
* Live chat
## Changelog
Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/charts/CHANGELOG.md). 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’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+ [Vue UI components](https://www.syncfusion.com/vue-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).
> 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-vue-ui-components/blob/master/license) 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.