Kendo UI for Vue
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.