background

Kendo UI for Vue

Vue Area Chart

  • Visualize trends over time with the help of the Kendo UI for Vue Area Chart.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Area Chart Header
  • Build Powerful Data Visualizations with the Vue Area Chart

    The Kendo UI for Vue Area Chart illustrates variations in data values among associated categories across a timeframe. It allows you to visually assess the progression of two or more data sets or subsets by representing them as connected data points arranged in layers. Each series is characterized by a continuous line and a color for the area underneath the line, enabling you to easily notice differences in data distribution and identify important trends in your numbers. 

    See the Vue Area Chart Demo

    Area Chart overview
  • Vue Area Chart Types

    The Kendo UI for Vue Area Chart offers two distinct options: the Stacked Area chart and the 100% Stacked Area chart. The Vue Stacked Area chart is ideal for presenting series in numeric values, while the 100% Stacked Area chart is designed to represent each series as a percentage of the total. You can effortlessly select your desired area chart type by configuring the "Stack" property as "true" for the Stacked Area chart or using the "type: 100%" object for the 100% Stacked Area chart.

    See the Vue Area Chart types demo

    Area Chart Types
  • Data Binding

    You have the flexibility to fill the Vue Area Chart series with data from a range of source types, such as numbers, arrays, and objects (or models). You just need to specify the fields you intend to use.

    See the Vue Area Chart data binding demo

  • Area Chart Elements Customization

    You can customize all aspects of your Vue Area Chart, from the color of the series to the category axis labels, font choices, size, positioning, line styles, and even the handling of missing values.

  • Series Line Style

    Customize the appearance of the line connecting data points within each Vue Area Chart series. You can select from various line styles, including the default straight line (normal), step (featuring horizontal and vertical segments), and smooth (employing a fitted curve).

    See the Vue Area Chart line-style demo

    area-chart-line-type
  • Rendering

    The Vue Area Chart showcases data in both Canvas (bitmap) and SVG (vector graphics) formats. SVG serves as the default format to ensure consistently sharp data presentations. For situations prioritizing performance, you can seamlessly switch to the canvas format via a single configuration option, ensuring your chart handles large datasets and real-time updates without interruptions.

    See the Vue Area Chart rendering demo

  • Export Options

    Export your Vue Area Chart to various formats such as PDF, SVG, PNG, and the Kendo UI drawing format. In scenarios requiring adjustments to image size or fitting the chart to a specific paper size when exporting to PDF, the component's intuitive export method preserves the quality and rendering of the Chart in the output file.

    See the Vue Area Chart export demo

  • Panning and Zooming

    Leverage the built-in pan and zoom features to empower users to focus on specific ranges within the Kendo UI for Vue Area Chart. The component enables drag motion for panning and utilizes a mouse wheel or pinch-and-zoom gestures for zooming. Moreover, you have the option to disable panning and zooming for a particular axis, preventing users from moving vertically or horizontally across the chart's plot area.

    See the Vue Area Chart pan and zoom demo

    Area Chart Panning and Zooming
  • Themes

    Customize the series colors of the Kendo UI for Vue Area Chart component using one of our predefined color sets, including Default (our own styling), Material (based on Material Design guidelines), Bootstrap (resembling Bootstrap styling), and Fluent (based on Microsoft Fluent UI). You can further personalize any of the built-in themes or create a new theme to match your brand's identity using Progress ThemeBuilder.

    See the Vue Area Chart appearance demo  

  • Globalization

    The Kendo UI for Vue Area Chart provides support for globalization and localization to ensure the component effectively serves applications in various languages and locales. You can also enable right-to-left (RTL) rendering for languages with scripts read from right to left.

    See the Vue Area Chart globalization demo

    Globalization
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka