@syncfusion/ej2-vue-charts 34.2.4 → 34.2.6
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.
- package/README.md +124 -72
- package/dist/ej2-vue-charts.umd.min.js +1 -1
- package/dist/ej2-vue-charts.umd.min.js.map +1 -1
- package/dist/es6/ej2-vue-charts.es2015.js +15 -15
- package/dist/es6/ej2-vue-charts.es2015.js.map +1 -1
- package/dist/es6/ej2-vue-charts.es5.js +15 -15
- package/dist/es6/ej2-vue-charts.es5.js.map +1 -1
- package/package.json +4 -4
- package/src/accumulation-chart/accumulationchart.component.d.ts +1 -1
- package/src/accumulation-chart/accumulationchart.component.js +1 -1
- package/src/bullet-chart/bulletchart.component.d.ts +1 -1
- package/src/bullet-chart/bulletchart.component.js +1 -1
- package/src/chart/annotations.directive.d.ts +1 -1
- package/src/chart/annotations.directive.js +1 -1
- package/src/chart/chart.component.d.ts +1 -1
- package/src/chart/chart.component.js +1 -1
- package/src/chart3d/chart3d.component.d.ts +1 -1
- package/src/chart3d/chart3d.component.js +1 -1
- package/src/chart3d/series.directive.d.ts +1 -1
- package/src/chart3d/series.directive.js +1 -1
- package/src/circularchart3d/circularchart3d.component.d.ts +1 -1
- package/src/circularchart3d/circularchart3d.component.js +1 -1
- package/src/range-navigator/rangenavigator.component.d.ts +1 -1
- package/src/range-navigator/rangenavigator.component.js +1 -1
- package/src/sankey/links.directive.d.ts +1 -1
- package/src/sankey/links.directive.js +1 -1
- package/src/sankey/nodes.directive.d.ts +1 -1
- package/src/sankey/nodes.directive.js +1 -1
- package/src/sankey/sankey.component.d.ts +1 -1
- package/src/sankey/sankey.component.js +1 -1
- package/src/smithchart/smithchart.component.d.ts +1 -1
- package/src/smithchart/smithchart.component.js +1 -1
- package/src/sparkline/sparkline.component.d.ts +1 -1
- package/src/sparkline/sparkline.component.js +1 -1
- package/src/stock-chart/annotations.directive.d.ts +1 -1
- package/src/stock-chart/annotations.directive.js +1 -1
- package/src/stock-chart/stockchart.component.d.ts +1 -1
- package/src/stock-chart/stockchart.component.js +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
# Vue Charts Components
|
|
2
2
|
|
|
3
|
-
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
|
|
3
|
+
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 55+ 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://help.syncfusion.com/chart-sdk/vue/charts/working-with-data?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm). All chart elements are rendered using Scalable Vector Graphics (SVG).
|
|
4
|
+
|
|
5
|
+
> **Using this package with an AI coding agent**
|
|
6
|
+
>
|
|
7
|
+
> Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
|
|
8
|
+
>
|
|
9
|
+
> ```text
|
|
10
|
+
> Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com/agent-setup/prompt.md, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
|
|
11
|
+
> ```
|
|
12
|
+
> The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.
|
|
13
|
+
>
|
|
14
|
+
> **Platform reference:** [https://ai.syncfusion.com/vue/llms.txt](https://ai.syncfusion.com/vue/llms.txt)
|
|
4
15
|
|
|
5
16
|
## What's Included in the Vue Charts Package
|
|
6
17
|
|
|
@@ -8,10 +19,10 @@ Following list of components are available in the package.
|
|
|
8
19
|
|
|
9
20
|
### Vue Chart
|
|
10
21
|
|
|
11
|
-
The [Vue Chart Component](https://www.syncfusion.com/vue-components/vue-charts) is a feature-rich chart component with built-in support for over
|
|
22
|
+
The [Vue Chart Component](https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) is a feature-rich chart component with built-in support for over 55 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
|
|
12
23
|
|
|
13
24
|
<p align="center">
|
|
14
|
-
<a href="https://
|
|
25
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting Started</a> .
|
|
15
26
|
<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> .
|
|
16
27
|
<a href="https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
|
|
17
28
|
</p>
|
|
@@ -37,26 +48,26 @@ The [Vue Chart Component](https://www.syncfusion.com/vue-components/vue-charts)
|
|
|
37
48
|
* [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)
|
|
38
49
|
* [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)
|
|
39
50
|
* [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)
|
|
40
|
-
* [Data binding](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
41
|
-
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
42
|
-
* [Rendering modes](https://
|
|
43
|
-
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
44
|
-
* [Annotation](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
45
|
-
* [Zooming and panning](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
46
|
-
* [Crosshair & trackball](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
47
|
-
* [Selection](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
48
|
-
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
49
|
-
* [RTL support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
50
|
-
* [Appearance](https://
|
|
51
|
-
* [Accessibility](https://
|
|
52
|
-
* [Localization](https://
|
|
51
|
+
* [Data binding](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/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.
|
|
52
|
+
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/numeric): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
53
|
+
* [Rendering modes](https://help.syncfusion.com/chart-sdk/vue/chart/render-methods?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm): Supports two type of rendering - SVG and Canvas. By default chart rendered in SVG, You can easily switch between the two simple configuration.
|
|
54
|
+
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/data-label-template): Supports data label to annotate points with label to improve the readability of data.
|
|
55
|
+
* [Annotation](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/pie-annotation): Provides support to mark any specific area of interest by adding custom element.
|
|
56
|
+
* [Zooming and panning](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/zooming): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
|
|
57
|
+
* [Crosshair & trackball](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/cross-hair): Provides options to track data points closer to the mouse position or touch action.
|
|
58
|
+
* [Selection](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/selection): Allows you to select any data point or subset of points using selection feature.
|
|
59
|
+
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats.
|
|
60
|
+
* [RTL support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/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.
|
|
61
|
+
* [Appearance](https://help.syncfusion.com/chart-sdk/vue/chart/chart-appearance?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm): Colors for the charts are picked by the built-in theme, but each element of the chart can be customized by simple configuration options.
|
|
62
|
+
* [Accessibility](https://help.syncfusion.com/chart-sdk/vue/chart/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-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.
|
|
63
|
+
* [Localization](https://help.syncfusion.com/chart-sdk/vue/chart/localization?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-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
64
|
|
|
54
65
|
### Vue Accumulation Chart
|
|
55
66
|
|
|
56
67
|
Built-in support for pie, doughnut, pyramid and funnel series type, to show the proportions and percentages between the categories.
|
|
57
68
|
|
|
58
69
|
<p align="center">
|
|
59
|
-
<a href="https://
|
|
70
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/accumulation-chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting Started</a> .
|
|
60
71
|
<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> .
|
|
61
72
|
<a href="https://www.syncfusion.com/vue-components/vue-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
|
|
62
73
|
</p>
|
|
@@ -72,18 +83,18 @@ Built-in support for pie, doughnut, pyramid and funnel series type, to show the
|
|
|
72
83
|
* [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)
|
|
73
84
|
* [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)
|
|
74
85
|
* [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)
|
|
75
|
-
* [Smart labels](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
76
|
-
* [Grouping](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
77
|
-
* [Semi-pie](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
78
|
-
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
79
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
86
|
+
* [Smart labels](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/smart-labels): Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
|
|
87
|
+
* [Grouping](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/grouping): Supports grouping of data points based on value and point count.
|
|
88
|
+
* [Semi-pie](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/semi-pie): Provides options to customize the start and end angle of the pie chart.
|
|
89
|
+
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/pie-legend): Provides options to display additional information about the points with the help of legend.
|
|
90
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/chart/pie-radius): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection.
|
|
80
91
|
|
|
81
92
|
### Vue Stock Chart
|
|
82
93
|
|
|
83
|
-
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.
|
|
94
|
+
The [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) 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.
|
|
84
95
|
|
|
85
96
|
<p align="center">
|
|
86
|
-
<a href="https://
|
|
97
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/stock-chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
|
|
87
98
|
<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> .
|
|
88
99
|
<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>
|
|
89
100
|
</p>
|
|
@@ -94,22 +105,22 @@ The [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart)
|
|
|
94
105
|
|
|
95
106
|
#### Key features
|
|
96
107
|
|
|
97
|
-
* [Data binding](https://
|
|
98
|
-
* [Range selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
99
|
-
* [Period selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
100
|
-
* [Technical indicators](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
101
|
-
* [Trendlines](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
102
|
-
* [Stock events](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
103
|
-
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
104
|
-
* [Appearance](https://
|
|
105
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
108
|
+
* [Data binding](https://help.syncfusion.com/chart-sdk/vue/stock-chart/working-with-data?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm): 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.
|
|
109
|
+
* [Range selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/disabled-period): Supports range selector to filter a date range for data that needs to be visualized.
|
|
110
|
+
* [Period selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click.
|
|
111
|
+
* [Technical indicators](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/ohlc): Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest.
|
|
112
|
+
* [Trendlines](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/ohlc): Predicts the future trends with predetermined data for any measurements.
|
|
113
|
+
* [Stock events](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/stock-events): Supports stock events to show different kinds of market events on the chart.
|
|
114
|
+
* [Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/default): Provides the options to Export the stock chart to PDF, SVG and CSV formats.
|
|
115
|
+
* [Appearance](https://help.syncfusion.com/chart-sdk/vue/stock-chart/appearance?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm): 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.
|
|
116
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/stock-chart/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball.
|
|
106
117
|
|
|
107
118
|
* ### Vue Range Navigator
|
|
108
119
|
|
|
109
|
-
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.
|
|
120
|
+
The [Vue Range Navigator Component](https://www.syncfusion.com/vue-components/vue-range-selector?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) 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.
|
|
110
121
|
|
|
111
122
|
<p align="center">
|
|
112
|
-
<a href="https://
|
|
123
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/range-navigator/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
|
|
113
124
|
<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> .
|
|
114
125
|
<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>
|
|
115
126
|
</p>
|
|
@@ -120,18 +131,18 @@ The [Vue Stock Chart](https://www.syncfusion.com/vue-components/vue-stock-chart)
|
|
|
120
131
|
|
|
121
132
|
#### Key features
|
|
122
133
|
|
|
123
|
-
* [Data sources](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
124
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
125
|
-
* [Lightweight](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
126
|
-
* [Period-selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
127
|
-
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
134
|
+
* [Data sources](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/range-navigator/default): Bind the range navigator component with an array of JSON objects or DataManager.
|
|
135
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/range-navigator/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and animaiton.
|
|
136
|
+
* [Lightweight](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device.
|
|
137
|
+
* [Period-selector](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/range-navigator/period-selector): Provides options to select the data over the custom period.
|
|
138
|
+
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
128
139
|
|
|
129
140
|
### Vue Chart Sparkline
|
|
130
141
|
|
|
131
|
-
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.
|
|
142
|
+
The [Vue Sparkline Component](https://www.syncfusion.com/vue-components/vue-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) 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.
|
|
132
143
|
|
|
133
144
|
<p align="center">
|
|
134
|
-
<a href="https://
|
|
145
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/sparkline/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
|
|
135
146
|
<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> .
|
|
136
147
|
<a href="https://www.syncfusion.com/vue-components/vue-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Learn more</a>
|
|
137
148
|
</p>
|
|
@@ -142,19 +153,19 @@ The [Vue Sparkline Component](https://www.syncfusion.com/vue-components/vue-spar
|
|
|
142
153
|
|
|
143
154
|
#### Key features
|
|
144
155
|
|
|
145
|
-
* [Series types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
146
|
-
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
147
|
-
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
148
|
-
* [Range band](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
149
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
156
|
+
* [Series types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/sparkline/series-types): Supports five types of sparklines : line, area, column, win loss, and pie to show data trends.
|
|
157
|
+
* [Axis types](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/sparkline/axis-types): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string.
|
|
158
|
+
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/sparkline/customization): Supports data label to annotate points with label to improve the readability of data.
|
|
159
|
+
* [Range band](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/sparkline/range-band): Provides options to highlight specific range of values.
|
|
160
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/sparkline/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball.
|
|
150
161
|
|
|
151
162
|
|
|
152
163
|
### Vue Chart Bullet Chart
|
|
153
164
|
|
|
154
|
-
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.
|
|
165
|
+
The [Vue Bullet Chart Component](https://www.syncfusion.com/vue-components/vue-bullet-chart?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) 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.
|
|
155
166
|
|
|
156
167
|
<p align="center">
|
|
157
|
-
<a href="https://
|
|
168
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/bullet-chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
|
|
158
169
|
<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> .
|
|
159
170
|
<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>
|
|
160
171
|
</p>
|
|
@@ -163,17 +174,17 @@ The [Vue Bullet Chart Component](https://www.syncfusion.com/vue-components/vue-b
|
|
|
163
174
|
|
|
164
175
|
#### Key features
|
|
165
176
|
|
|
166
|
-
* [Multiple measures](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
167
|
-
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
168
|
-
* [RTL support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
169
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
177
|
+
* [Multiple measures](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/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.
|
|
178
|
+
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar.
|
|
179
|
+
* [RTL support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/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.
|
|
180
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover.
|
|
170
181
|
|
|
171
182
|
### Vue Smith Chart
|
|
172
183
|
|
|
173
184
|
Tool for visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines.
|
|
174
185
|
|
|
175
186
|
<p align="center">
|
|
176
|
-
<a href="https://
|
|
187
|
+
<a href="https://help.syncfusion.com/chart-sdk/vue/smithchart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm">Getting started</a> .
|
|
177
188
|
<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> .
|
|
178
189
|
<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>
|
|
179
190
|
</p>
|
|
@@ -184,10 +195,10 @@ Tool for visualize data of high frequency circuit applications. It contains two
|
|
|
184
195
|
|
|
185
196
|
#### Key features
|
|
186
197
|
|
|
187
|
-
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
188
|
-
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
189
|
-
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
190
|
-
* [Print and Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=
|
|
198
|
+
* [Legend](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/smith-chart/default): Provides options to display additional information about the series.
|
|
199
|
+
* [Data label](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/smith-chart/custom): Supports data label to annotate points with label to improve the readability of data.
|
|
200
|
+
* [Tooltip](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/smith-chart/custom): Provides options to display additional information about data points on mouse hover.
|
|
201
|
+
* [Print and Export](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm#/material3/smith-chart/print-export): Provides support to print and export the rendered smith chart for future use.
|
|
191
202
|
|
|
192
203
|
|
|
193
204
|
### Adding Syncfusion Chart package
|
|
@@ -253,47 +264,88 @@ export default {
|
|
|
253
264
|
}
|
|
254
265
|
</script>
|
|
255
266
|
```
|
|
256
|
-
> Refer the [Getting Started with Vue3](https://
|
|
267
|
+
> Refer the [Getting Started with Vue3](https://help.syncfusion.com/chart-sdk/vue/chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) for using Syncfusion Vue components in Vue 3 applications.
|
|
257
268
|
|
|
258
269
|
## Supported frameworks
|
|
259
270
|
|
|
260
271
|
Chart components are available in following list of frameworks.
|
|
261
272
|
|
|
262
|
-
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&
|
|
273
|
+
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)<br/> [React](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)<br/> [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) |
|
|
263
274
|
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
264
275
|
|
|
265
276
|
## Showcase samples
|
|
266
277
|
|
|
267
|
-
* [Assest Management](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/dashboard?utm_source=npm&utm_campaign=
|
|
278
|
+
* [Assest Management](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/dashboard?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
268
279
|
|
|
269
280
|
## Resources
|
|
270
281
|
|
|
271
|
-
* [Documentation](https://
|
|
272
|
-
* [Theme Studio](https://ej2.syncfusion.com/themestudio
|
|
273
|
-
* [What's New](https://www.syncfusion.com/products/whatsnew/vue?utm_medium=listing&
|
|
274
|
-
* [Road Map](https://www.syncfusion.com/products/roadmap/vue)
|
|
275
|
-
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=vue&type=all)
|
|
282
|
+
* [Documentation](https://help.syncfusion.com/chart-sdk/vue/chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
283
|
+
* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
284
|
+
* [What's New](https://www.syncfusion.com/products/whatsnew/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
285
|
+
* [Road Map](https://www.syncfusion.com/products/roadmap/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
286
|
+
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=vue&type=all?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
276
287
|
|
|
277
288
|
## Support
|
|
278
289
|
|
|
279
290
|
Product support is available through following mediums.
|
|
280
291
|
|
|
281
|
-
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
292
|
+
* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
282
293
|
* [Community forum](https://www.syncfusion.com/forums/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
283
|
-
* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new)
|
|
294
|
+
* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
284
295
|
* [Request feature or report bug](https://www.syncfusion.com/feedback/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm)
|
|
285
296
|
* Live chat
|
|
286
297
|
|
|
298
|
+
## Other Popular Vue Components
|
|
299
|
+
|
|
300
|
+
Explore other popular Syncfusion<sup>®</sup> Vue components curated from UI components, standalone SDKs, and document solution suites.
|
|
301
|
+
|
|
302
|
+
<table>
|
|
303
|
+
<tr>
|
|
304
|
+
<td align="center">
|
|
305
|
+
<a href="https://www.syncfusion.com/vue-components/vue-grid">Vue DataGrid</a>
|
|
306
|
+
</td>
|
|
307
|
+
<td align="center">
|
|
308
|
+
<a href="https://www.syncfusion.com/scheduler-sdk/vue-scheduler">Vue Scheduler</a>
|
|
309
|
+
</td>
|
|
310
|
+
<td align="center">
|
|
311
|
+
<a href="https://www.syncfusion.com/vue-components/vue-file-manager">Vue File Manager</a>
|
|
312
|
+
</td>
|
|
313
|
+
<td align="center">
|
|
314
|
+
<a href="https://www.syncfusion.com/gantt-sdk/vue-gantt-chart">Vue Gantt Chart</a>
|
|
315
|
+
</td>
|
|
316
|
+
<td align="center">
|
|
317
|
+
<a href="https://www.syncfusion.com/diagram-sdk/vue-diagram">Vue Diagram</a>
|
|
318
|
+
</td>
|
|
319
|
+
</tr>
|
|
320
|
+
<tr>
|
|
321
|
+
<td align="center">
|
|
322
|
+
<a href="https://www.syncfusion.com/rich-text-editor-sdk/vue-rich-text-editor">Vue Rich Text Editor</a>
|
|
323
|
+
</td>
|
|
324
|
+
<td align="center">
|
|
325
|
+
<a href="https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor">Vue DOCX Editor</a>
|
|
326
|
+
</td>
|
|
327
|
+
<td align="center">
|
|
328
|
+
<a href="https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer">Vue PDF Viewer</a>
|
|
329
|
+
</td>
|
|
330
|
+
<td align="center">
|
|
331
|
+
<a href="https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor">Vue Spreadsheet Editor</a>
|
|
332
|
+
</td>
|
|
333
|
+
<td align="center">
|
|
334
|
+
<a href="https://www.syncfusion.com/vue-components/vue-maps-library">Vue Maps</a>
|
|
335
|
+
</td>
|
|
336
|
+
</tr>
|
|
337
|
+
</table>
|
|
338
|
+
|
|
287
339
|
## Changelog
|
|
288
340
|
|
|
289
|
-
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.
|
|
341
|
+
Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/charts/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
|
290
342
|
|
|
291
343
|
## License and copyright
|
|
292
344
|
|
|
293
|
-
> 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's [EULA](https://www.syncfusion.com/
|
|
345
|
+
> 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's [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm). To acquire a license for 150+ [Vue UI components](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/chart-sdk?tag=es-ft-vue-charts-banner).
|
|
294
346
|
|
|
295
|
-
> 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.
|
|
347
|
+
> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
|
296
348
|
|
|
297
|
-
See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license) for more info.
|
|
349
|
+
See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=vue-charts-npm) for more info.
|
|
298
350
|
|
|
299
351
|
© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: ej2-vue-charts.umd.min.js
|
|
3
|
-
* version : 34.2.
|
|
3
|
+
* version : 34.2.6
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2025. 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
|