Overview

The RadChart provides separate rendering implementation for some of the chart's visual elements. By using it some of the visual elements are drawn using the Composition API. This article will provide information about the visual elements drawn with the Composition API and how you can modify the drawing implementaion.

Visuals supporting Composition API

The following visual elements are drawn using the SpriteVisual element of the Composition API:

By default, the visuals listed above will be drawn using the Composition API. If the visual elements have a custom Style or Template set - the Composition won't be used for the drawing functionality.

ContainerVisualsFactory

The ContainerVisualsFactory class helps preparing the ContainerVisuals that will be used for the rendering ot the chart control. RadChart exposes a ContainerVisualsFactory property that can be used to change the default implementation for the drawing of the ContainerVisuals.

In order to achieve a different behavior (for example to be able to change the Brush of the SpriteVisual) you can create a custom ContainerVisualsFactory class and override its methods.

The methods of the factory that could be overridden are the following:

CanDrawContainerVisual: Indicates whether the visual element can be drawn using the Composition API. If the method returns false the element won't be drawn as a SpriteVisual element. Using that method the Composition mechanism could easily be disabled and the elements to be drawn using the UIElements provided by the Framework.
CreateContainerVisual: It creates a new SpriteVisual instance that will be used for the visualization of the elements. The method returns ContainerVisual type of element and you could easily return any other ContainerVisual that will be used for the drawing - currently, we suggest you to use the SpriteVisual as the only ContainerVisual element from the Composition API that provides a CompositionBrush.
PrepareTickVisual: Prepares the SpriteVisual used for the visualization of the ticks of the Axis by setting its Size, Color and Offset.
PrepareCartesianChartGridLineVisual: Prepares the SpriteVisual used for the visualization of the lines of the CartesianChartGrid by setting its Size, Color and Offset. You can also pass a DoubleCollection to the method that represents the dash array for the lines that will be used when drawing the SpriteVisuals.
PreparePointTemplateSeriesVisual: Used for setting the Offset, Brush and Size of the series that are drawn with the Composition API.
PrepareCartesianAxisLineVisual: Prepares the SpriteVisual that will be visualized as an Axis. The method also provides information about the AxisType that is currently drawn.
PrepareLineRenderVisual: Prepares the Trend Lines and Financial Indicators by setting their Size, Offset and Brush.
PrepareBarIndicatorVisual: Prepares the BarIndicatorBase instances by setting their Size, Offset and Brush.

Example

Examples 1, 2, 3 and 4 will demonstrate how to implement a custom ContainerVisualsFactory that will change the Brush of the BarSeries of a RadCartesianChart and change the dash array of the CartesianChartGrid. First, you need to create a custom class that inherits the default ContainerVisualsFactory.

Example 1: Inheriting from ContainerVisualsFactory

public class CustomContainerVisualFactory : ContainerVisualsFactory 
{ 
 
}

Next thing you have to do is to override the CreateContainerVisual method that should return a ContainerVisual used for the rendering of the Chart control. The Compositor parameter is used for the creation of the SpriteVisual element and the type gives you information of the currently created element.

Example 2: Overriding the CreateContainerVisual method

public class CustomContainerVisualFactory : ContainerVisualsFactory 
{ 
    protected override ContainerVisual CreateContainerVisual(Compositor compositor, Type elementType) 
    { 
        var containerVisual = base.CreateContainerVisual(compositor, elementType) as SpriteVisual; 
        if (containerVisual != null && elementType == typeof(BarSeries)) 
        { 
            containerVisual.Brush = compositor.CreateColorBrush(Color.FromArgb(0xFF, 0x93, 0xC8, 0x49)); 
        } 
 
        return containerVisual; 
    } 
}

We will also override the PrepareCartesianChartGridLineVisual method in order to change the dash array for the lines used for the drawing of the CartesianChartGrid.

Example 3: Overriding the PrepareCartesianChartGridLineVisual method

public class CustomContainerVisualFactory : ContainerVisualsFactory 
{ 
    protected override ContainerVisual CreateContainerVisual(Compositor compositor, Type elementType) 
    { 
        var containerVisual = base.CreateContainerVisual(compositor, elementType) as SpriteVisual; 
        if (containerVisual != null && elementType == typeof(BarSeries)) 
        { 
            containerVisual.Brush = compositor.CreateColorBrush(Color.FromArgb(0xFF, 0x93, 0xC8, 0x49)); 
        } 
 
        return containerVisual; 
    } 
 
    protected override ContainerVisual PrepareCartesianChartGridLineVisual(ContainerVisual containerVisual, RadRect layoutSlot, Orientation orientation, DoubleCollection dashArray) 
    { 
        return base.PrepareCartesianChartGridLineVisual(containerVisual, layoutSlot, orientation, new DoubleCollection() { 1, 0}); 
    } 
}

Finally, we can set a CustomContainerVisualFactory instance to the ContainerVisualsFactory property of the RadCartesianChart.

Example 4: Applying the custom ContainerVisualsFactory

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart" 
      xmlns:telerikCharting="using:Telerik.Charting"> 
    <telerikChart:RadCartesianChart x:Name="barSeries" > 
        <telerikChart:RadCartesianChart.ContainerVisualsFactory> 
            <local:CustomContainerVisualFactory /> 
        </telerikChart:RadCartesianChart.ContainerVisualsFactory> 
        <telerikChart:RadCartesianChart.Grid> 
            <telerikChart:CartesianChartGrid MajorLinesVisibility="XY" /> 
        </telerikChart:RadCartesianChart.Grid> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:CategoricalAxis/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
 
        <telerikChart:BarSeries> 
            <telerikChart:BarSeries.DataPoints> 
                <telerikCharting:CategoricalDataPoint Category="Apples" Value="5" /> 
                <telerikCharting:CategoricalDataPoint Category="Oranges" Value="9" /> 
                <telerikCharting:CategoricalDataPoint Category="Pineaples" Value="8" /> 
            </telerikChart:BarSeries.DataPoints> 
        </telerikChart:BarSeries> 
    </telerikChart:RadCartesianChart> 
</Grid>

Figure 1: RadCartesianChart with a custom ContainerVisualsFactory

RadCartesianChart with custom visuals