Skip to content

Latest commit

 

History

History
130 lines (103 loc) · 4.93 KB

index.md

File metadata and controls

130 lines (103 loc) · 4.93 KB
title page_title description slug canonicalLink position
Overview
Charts Overview - Components - Kendo UI for Vue
Learn about the Kendo UI wrappers for Vue which are delivered by the Charts package.
overview_charts_wrapper
0

Charts Overview

The Charts are components for building common chart types.

The below code used to display the components' icons but after and update, Katana is throwing errors when applied.

Chart A highly customizable chart of categorical, circular, freeform, and scatter series types. Sparkline A set of tiny charts without chart-specific elements, designed to be embedded in content. StockChart A specialized component for exploring financial time series.

Basic Usage

The following example demonstrates how to initialize the Chart.

{% meta height:460 %} {% embed_file overview/main.vue preview %} {% embed_file overview/main.js %} {% endmeta %}

Installation

To initialize the Charts, either:

  • [Use the CDN service]({% slug using_cdn %}), or
  • Use Webpack.

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

  2. Install the Kendo UI Charts package for Vue.

    npm install --save @progress/kendo-charts-vue-wrapper

    The package also exports the following wrappers for individual components:

    • Chart
    • Sparkline
    • StockChart

  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
// As an alternative, you could import only the scripts that are used by a specific widget:
// import '@progress/kendo-ui/js/kendo.dataviz.chart' // Imports only the Chart script and its dependencies
// import '@progress/kendo-ui/js/kendo.dataviz.sparkline' // Imports only the Sparkline script and its dependencies
// import '@progress/kendo-ui/js/kendo.dataviz.stock' // Imports only the StockChart script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { Chart,
         ChartSeriesItem,
         Sparkline,
         SparklineSeriesItem,
         StockChart,
         ChartInstaller } from '@progress/kendo-charts-vue-wrapper'

Vue.use(ChartInstaller)

new Vue({
    el: '#app',
    components: {
        Chart,
        Sparkline,
        StockChart
    }
})

Suggested Links

  • [Get Started with the Chart]({% slug overview_chart_charts_wrapper %})
  • [Get Started with the Sparkline]({% slug overview_sparkline_charts_wrapper %})
  • [Get Started with the StockChart]({% slug overview_stockchart_charts_wrapper %})