Vue Bar Chart

The Kendo UI for Vue Bar Chart showcases a comparison of categories within a single dataset or across multiple datasets. It presents each data series using either horizontal or vertical bars, which can be displayed side by side or stacked, with their length proportional to their values. Each category is assigned a distinct color, facilitating a straightforward analysis of data proportions. Take advantage of the built-in customization features for chart and category labels, legends, axes, series colors, fonts, sizes, positions, and even handling negative values.

See the Vue Bar Chart demo  

You can populate the Vue Bar Chart series with data from various source types, including numbers, arrays and objects (or models)—simply specify the fields you want to use. 

See the Vue Bar Chart data binding demo

The Vue Bar Chat can easily act as a Column chart by simply changing the chart axes—the vertical axis to display the category variables and the horizontal or the x-axis to represent the numerical values. You can additionally leverage the Stacked Bar Chart and 100% Stacked Bar Chart to visualize part-to-whole relationships in your dataset by showing multiple subcategories. For example, use the Vue Stacked Bar Chart to display a breakdown of total sales by device or the 100% Stacked Bar Chart to compare the percentage of unique website visits to the total website sessions.

See the Vue Bar Chart types demo  

Adjust the distance between bars to effectively use the white space in your Vue Bar chart to your design advantage. You can customize the distance between the categories through the gap property and the distance between bars in a single category through the spacing property and set them as a percentage of the bar’s width.

See the Vue Bar Chart gap and spacing demo

Leverage the built-in pan and zoom features to empower users to focus on specific ranges within the Kendo UI for Vue Bar 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 Bar Chart pan and zoom demo

The Vue Bar 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 Bar Chart rendering demo

Export your Vue Bar 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 Bar Chart export demo

Customize the series colors of the Kendo UI for Vue Bar 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 Bar Chart appearance demo  

The Kendo UI for Vue Bar 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 Bar Chart globalization demo