New to Kendo UI for Angular? Start a free 30-day trial

Rendering Custom Visuals in the Bar Chart


ProductProgress® Kendo UI® for Angular Charts


How can I change the default visuals of the Bar and Column Chart?


You can implement custom visualizations for the Bar and Column Chart legend items, axis titles, labels, markers, and series by utilizing the Kendo UI Drawing API.

To utilize the Drawing library and customize visual elements, use a custom JavaScript function that creates these custom shapes. Then assign the JavaScript function to the seriesDefaults visual property of the Chart. The function argument fields provide context information, such as Rect (the geometry Rect that defines where the visual will be rendered) and options (different options depending on the item type).

The following example demonstrates a basic custom visuals implementation utilizing the Drawing library and the Chart component.

View Source
Change Theme:

See Also

In this article

Not finding the help you need?