Rendering Custom Visuals in the Bar Chart
Environment
| Product | Progress® 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.