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:
- Axis
- Ticks
- ScatterLineSeries
- BarSeries
- RangeBarSeries
- LineSeries
- StepLineSeries
- CandleStickSeries
- OhlcSeries
- Trend Line and Financial Indicator
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
{
}
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;
}
}
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});
}
}
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
