Vue Charts Overview

Updated on Oct 23, 2026

The Kendo UI for Vue Charts provide high-quality graphical data visualization options.

They include a variety of chart types and styles that have extensive configuration options. This flexibility allows you to quickly and easily create the exact chart you need to fit your specific requirements for functionality and appearance.

The Charts are built from the ground up and specifically for Vue, so that you get high-performance chart controls which integrate tightly with your application and with the rest of the Kendo UI for Vue components. Along with the most common Bar, Line, Donut & Pie charts, the suite provides a collection of 17 customizable chart and series types, as well as more specific charts like the StockChart, Sparkline, and Sankey.

The Charts are part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

A highly customizable chart of categorical, circular, freeform, and scatter series types

A set of tiny charts without chart-specific elements, designed to be embedded in content

A specialized component for exploring financial time series

A diagram for depicting fluctuating flows through different domains

Vue Charts Example

Loading ...

Table of contents

Installation
Chart Types
Charts Features
Dependencies

Installation

To initialize the Charts, either:

Use the CDN service, or
Use Webpack.

Using CDN

To use the Kendo UI for Vue Charts with CDN, follow the below steps:

Reference the charts, intl and drawing packages.

sh

  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js">
  <script src="https://unpkg.com/@progress/kendo-vue-charts@latest/dist/cdn/js/kendo-vue-charts.js"></script>

Reference one of the Kendo UI themes to style your components.

sh

    // Load the Kendo Meridian Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-meridian@latest/dist/all.css">

    // Load the Kendo Bootstrap Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    // To load the Kendo Material Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">

    // To load the Kendo Fluent Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@latest/dist/all.css">

    // Load the Kendo Default Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">

Follow the instructions in this article to activate your product license. You can skip this step if your application already contains a license key.

Initializing with Webpack

Download and install the package. Use Node.js v5.0.0 or later.

sh

   npm install --save @progress/kendo-vue-charts @progress/kendo-licensing @progress/kendo-vue-intl @progress/kendo-drawing

Once installed, import the package module.

jsx

 // ES2015 module syntax
 import {
   ChartSeriesLabels, ChartSeriesMarkers, ChartLegend, ChartLegendTitle, ChartValueAxisTitle, ChartValueAxisLabels, Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartTooltip, ChartValueAxis, ChartValueAxisItem,   ....... Other Chart sub-components
 } from "@progress/kendo-vue-charts";

jsx

// CommonJS format
const {
  ChartSeriesLabels, ChartSeriesMarkers, ChartLegend, ChartLegendTitle, ChartValueAxisTitle, ChartValueAxisLabels, Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartTitle, ChartTooltip, ChartValueAxis, ChartValueAxisItem,   ....... Other Chart sub-components
} = require('@progress/kendo-vue-charts');

You are required to install one of the Kendo UI for Vue themes to style your components. For more information on how to add the styles, refer to the article on getting started.
Follow the instructions on the Kendo UI for Vue My License page to activate your license. You can skip this step if your application already contains a Kendo UI for Vue license file.

Chart Types

Categorical

Area charts and Vertical Area charts are categorical charts, which are suitable for displaying quantitative data by using continuous lines.

Bar charts and Column charts are categorical charts, which display data by using horizontal or vertical bars whose lengths vary according to their value.

Box Plot charts are categorical charts, which graphically render groups of numerical data through their quartiles.

Bullet charts are categorical charts, which are a variation of the Bar charts.

Line charts and Vertical Line charts are categorical charts, which display continuous data as lines that pass through points defined by the values of their items.

Radar charts, also known as Spider charts, are categorical charts, which wrap the X axis in a circle or polygon.

Range Area charts are categorical charts, which represent a variation of the Area charts.

Range Bar charts are categorical charts, which represent a variation of the Bar charts.

Waterfall charts are categorical charts, which display the cumulative effect of sequentially introduced positive or negative values.

Combination charts combine multiple series types, such as bars and lines, in a single chart to compare related metrics, trends, and targets together.

Heatmap charts use colors to indicate the relative value of data points in two dimensions.

Circular

Donut charts are circular charts, which represent a variation of the Pie charts and are capable of displaying multiple nested series.

Pie charts are circular charts, which display data in the form of single-series sectors from a two-dimensional circle and are useful for rendering data as part of a whole.

Freeform

Funnel charts are freeform charts, which display a single series of data in progressively decreasing or increasing proportions that are organized in segments, where each segment represents the value for the particular item from the series.

Pyramid charts are freeform charts, which display a single series of data as pyramid segments, where each segment represents the value for the particular item from the series. The values of the items can also influence the height of the corresponding segments.

Scatter

Bubble charts are scatter charts, which display data as points with coordinates and sizes that are defined by the value of their items.

Polar charts are scatter charts which display two-dimensional data series in polar coordinates.

Scatter Plot and Scatter Line

Scatter Plot and Scatter Line charts are the two main variations of scatter charts and are suitable for displaying numerical data.

Sparkline

The Sparkline is a tiny chart that doesn't have axes, coordinates, legends, titles, or other chart-specific elements. The available Sparkline types are Line, Bar, Column, Area, Pie and Bullet.

StockChart

The StockChart is a component for the financial industry. It visualizes the price movement of a financial instrument over a period of time.

Sankey

Sankey charts visualize changing flows and their distribution between domains, such as website traffic, budget breakdowns, or energy flow.

Charts Features

Each Kendo UI for Vue Charts component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section.

Data Binding—The Charts support the binding of their data series to arrays, arrays of arrays, and objects. Beyond the actual series, other areas of the Chart, like the axis and labels, can all be bound to your data as well.
Rendering Modes—The Charts support two modes for rendering—Canvas (bitmap) and SVG (vector graphics). By default, the Charts are rendered through SVG.
Export Options—The Charts provide built-in support to save your Charts as a PNG, PDF, SVG, and the Kendo UI Drawing format.
Panning and Zooming—The Charts offer intuitive panning and zooming interactions, allowing users to easily explore the data.
Appearance—By default all Kendo UI for Vue components are styled by the five polished themes (Meridian, Bootstrap, Material, Fluent, and Default) shipped with the Kendo UI for Vue suite. The Chart component provides options for easier configuration of parameters like dimensions, colors, range, and more.
Globalization—The Charts support globalization and localization to ensure that each Chart can fit in any application, no matter what languages and locales need to be supported.

Dependencies

The Kendo UI for Vue Charts package requires you to install the following peer dependencies in your application:

vue 3.0.0*
@progress/kendo-vue-intl
@progress/kendo-licensing
@progress/kendo-drawing

Support and Learning Resources

Additional Resources

In this article

Vue Charts Example Table of contents Installation Using CDN Initializing with Webpack Chart Types Categorical Circular Freeform Scatter Sparkline StockChart Sankey Charts Features Dependencies Support and Learning Resources Additional Resources

Not finding the help you need?

Contact Support