Creating Rounded Corners in Stacked Column Charts

Updated on Feb 4, 2026

Environment

Product

Progress® Kendo UI® for Angular Chart

Description

How can I create rounded corners for stacked column charts in the Kendo UI for Angular Chart?

This Knowledge Base article also answers the following questions:

• How can I implement rounded corners in stacked column charts using Kendo UI for Angular Chart?
• Is it possible to have different corner rounding for each series in a stacked column chart?
• How can I use custom visuals to achieve rounded corners in stacked column charts?

Solution

To create rounded corners in stacked column charts, use the series item component visual function to render custom visuals with the Drawing API Path component and the curveTo() method. Calculate the corner radius based on the column width to maintain consistent proportions across different chart sizes.

For stacked columns, assign a different visual function to each series to apply the appropriate rounding logic:

• Bottom series—Round only the bottom corners.
• Middle series—No rounded corners.
• Top series—Round only the top corners.

The following example demonstrates how to implement this approach in a Kendo UI for Angular Chart stacked column chart.

Change Theme

Theme

Loading ...

See Also

• Charts Overview
• Rendering Custom Visuals in the Bar Chart
• Drawing Basic Shapes
• Kendo UI Drawing API