# Rendering Custom Visuals in the Bar Chart

## Environment

<table>
	<tbody>
		<tr>
			<td>Product</td>
			<td>Progress® Kendo UI® for Angular Charts</td>
		</tr>
	</tbody>
</table>

## 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](https://www.telerik.com/kendo-angular-ui/components/drawing).

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](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesdefaults#visual) of the Chart. The function argument fields provide context information, such as [Rect](https://www.telerik.com/kendo-angular-ui/components/drawing/api/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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/bar-chart-custom-visuals/source.txt)

## See Also

* [Bar Chart](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar)
* [SeriesDefaults](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesdefaults)
* [LegendItemClickEvent](https://www.telerik.com/kendo-angular-ui/components/charts/api/legenditemclickevent)
* [visual (LegendItemComponent)](https://www.telerik.com/kendo-angular-ui/components/charts/api/legenditemcomponent#visual)
* [Customizing the Legend Shape using custom visual](https://www.telerik.com/kendo-angular-ui/components/charts/elements/legend#custom-item-shapes)