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

Rendering Custom Visuals in the Bar Chart

Environment

ProductProgress® Kendo UI® for Angular Charts

Description

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

Solution

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.

Example
View Source
Change Theme:

See Also

In this article

Not finding the help you need?