Controls / RadChartView / Features

Rendering

The RadChartView components allow you to specify the series rendering surface. This feature also provides you with the ability to adjust the overall performance of the charting components. In order to select any of the available rendering modes, you can use the RenderOptions property of the series. It is of type ChartRenderOptions and it can be set to any of the following built-in ChartRenderOptions:

  • SkiaRenderOptions
  • Direct2DRenderOptions
  • XamlRenderOptions
  • BitmapRenderOptions

It is important to have in mind that the rendering feature affects only the default visual components of the series. If a custom PointTemplate is applied on the series, the charting component will create separate content presenters for each data point and the rendering options will not be able to affect the rendering of these points.

Skia Rendering

Skia is 2D graphic library for drawing graphics in a performant way. The RadChartView components can also benefit from the Skia API to further extend and optimize their rendering capabilities and performance.

In order to use the SkiaRenderOptions, you will need to reference the following binaries in your project:

After that you can set the RenderOptions property of the series.

<telerik:RadCartesianChart.Series> 
    <telerik:LineSeries> 
        <telerik:LineSeries.RenderOptions> 
            <telerik:SkiaRenderOptions/> 
        </telerik:LineSeries.RenderOptions> 
    </telerik:LineSeries> 
</telerik:RadCartesianChart.Series>
The Skia rendering supports anti-aliasing feature which is enabled by default. If you need to disable this, you can set the set the IsAntialias property of the SkiaRenderOptions to false.

Direct 2D Rendering

Direct 2D is hardware accelerated two dimensional graphics API, designed by Microsoft to support the most demanding and visually rich desktop applications with the best possible performance. Now the RadChartView components now can also benefit from this API to further extend and optimize their rendering capabilities and performance.

In order to enable this API in your project, you need to make sure that your GPU supports at least Direct3D 10.1 Feature Level 9.1. You can use the Boolean Direct2DRenderOptions.IsHardwareDeviceAvailable() method to check if the necessary hardware is available on your system. If it returns True, you will be able to use the Direct2D rendering option, otherwise you should use one of the other available rendering options. You can perform this check right after the call to InitializeComponent() method in your main view.

In order to use the Direct2DRenderOptions, you will need to reference the following binaries in your project:

  • SharpDX.dll
  • SharpDX.Direct2D1.dll
  • SharpDX.Direct3D10.dll
  • SharpDX.Direct3D9.dll
  • SharpDX.DXGI.dll
  • Telerik.Windows.Controls.Chart.Direct2D.dll

The SharpDX binaries can be found in the SharpDX folder along with the other binaries for the specific .NET version inside your Telerik's installation directory.

If your project is targeting .NET Core, you should also add a reference to the SharpDX.Mathematics.dll along with the references listed above.

After referencing those binaries, you will be able to set the RenderOptions property of the series like this:

<telerik:RadCartesianChart.Series> 
  <telerik:LineSeries> 
      <telerik:LineSeries.RenderOptions> 
          <telerik:Direct2DRenderOptions/> 
      </telerik:LineSeries.RenderOptions> 
  </telerik:LineSeries> 
</telerik:RadCartesianChart.Series>
The Direct2DRenderOptions class exposes the following properties:

  • AntialiasMode - this is an enumeration property that controls how the series will be rendered. Setting it to PerPrimitive turns the anti-aliasing on. Alternatively, you can set the property to Aliased to render the primitives as aliased.

  • DefaultVisualsRenderMode - this is an enumeration property that controls the number of components that will be created to visualize the data points of the series. When this property is set to Separate, the RadChartView component will create a separate visual component for each data point. Alternatively, this property can be set to Batch to make the charting control use one visual element to render all data points.

If only one visual component is used for all data points, the same style will be applied to all of the points. If you need to apply different style for any (or all) of the data points you need to set this property to Separate.

XAML Rendering

The XAML rendering is the default rendering mode for all series. If this mode is applied, the RadChartView will use native components to draw the series. For more information about the components used by the series you can take a look at the Controlling Series Appearance article.

This rendering mode exposes the following properties:

  • EdgeMode - gets or sets if the anti-aliasing for the series is turned on. The default value of this property is Unspecified.

  • GeometryType - gets or sets the type of the geometry used by the charting component. The default value of this property is PathGeometry, but it can also be set to StreamGeometry.

  • DefaultVisualsRenderMode - this is an enumeration property that controls the number of components that will be created to visualize the data points of the series. When this property is set to Separate, the RadChartView component will create a separate visual component for each data point. Alternatively, this property can be set to Batch to make the charting control use one visual element to render all data points.

If only one visual component is used for all data points, the same style will be applied to all of the points. If you need to apply different style for any (or all) of the data points you need to set this property to Separate.

Bitmap Rendering

Using this rendering mode, the RadChartView will create one Bitmap image and each of the series will be drawn on top of that image in code. Please note that this mode doesn’t support stroke thickness higher than 1px and anti-aliasing.

You can enable this rendering mode with the following code:

<telerik:RadCartesianChart.Series> 
    <telerik:LineSeries> 
        <telerik:LineSeries.RenderOptions> 
            <telerik:BitmapRenderOptions/> 
        </telerik:LineSeries.RenderOptions> 
    </telerik:LineSeries> 
</telerik:RadCartesianChart.Series>

You can control the number of components created to visualize the data points in this rendering mode through the DefaultVisualsRenderMode property. As an enumeration of style DefaultVisualsRenderModeand it provides the following options:
  • Separate - the RadChartView component will create a separate visual component for each data point.
  • Barch - the charting control will use one visual element to render all data points.

See Also

In this article
Related articles
Not finding the help you need? Improve this article