Add different image on each point mark

[Bárbara]

Hello all,
I need to make an image as a point mark on my chart and it has to be a different one for each point mark. How can I do this?

[Martin Ivanov]

Hi Bárbara,

You can see how to change the point marks' appearance of RadChart series in the Templating Point Marks help article. Basically, you can define an image in the PointMark's template and bind its Source to a property from the data point's model.

Keep in mind that RadChart is our old charting component which has many known issues and limitations. Instead I recommend you to try the new RadChartView which has better implementation and improved performance. The new charts are also very flexible and easy to set up. You can read about the differences between the components in RadChart vs RadChartView help article.

With RadChartView you can customize the appearance of a point mark using the series' PointTemplate.

Regards,
Martin
Telerik

[Bárbara]

Hey Martin, Thanks for your response!

Yes, I know about the PointTemplate, but if I use it won't it set the appearance of all the point marks to be that same template on the same serie?
Because I need a differente appearance for each point mark on the same serie (Like on the picture attached)

[Martin Ivanov]

Hello Bárbara,

You can use the series' PointTemplateSelector to choose different templates for the different data points. Or you define a property with the source of the image in your view model. Then bind this property in the PointTemplate. Here is an example for this approach:

public class DataItemModel
{
    public string ImagePath { get; set; }
    // other properties
}

<telerik:LineSeries.PointTemplate>
    <DataTemplate>
        <Image Source="{Binding DataItem.ImagePath}" />
    </DataTemplate>
</telerik:LineSeries.PointTemplate>

Regards,
Martin
Telerik

[Bárbara]

But for RadChartView I should use CategoricalDataPoint then? Because I tried adding  DataPoint (which I prefer) and it is not accepting (RadChart accepts though)

[Bárbara]

**ADDING** Because on the DataItem in CategoricalDataPoint you can only use {get;} and on thi case I need {set;}

[Martin Ivanov]

Hello Bárbara,

The data points in RadChartView are described by models of type that derives from the DataPoint object. The chart's series are using different data point classes based on their type. For example, the LineSeries, PointSeries, BarSeries and few more are using the CategoricalDataPoint class (derived from DataPoint) to describe the model of their data points. On the other hand, the scatter series as ScatterPointSeries are using the ScatterDataPoint class.

When you populate RadChartView's series with data there are two approaches which you can use

• Populate directly the DataPoints collection of the series - each chart's Series exposes a DataPoints collection which holds the plotted data points. Depending on the series type this collection can hold different objects (CategoricalDataPoint, ScatterDataPoint, etc.). You can populate this collection directly in code. In this scenario the DataItem of the DataPoint object won't be set because all necessary information is hold by the properties of the DataPoint class.
• Data Binding - You can create view model for the data points and populate the ItemsSource of the series with a collection that contains the view model objects. This will create an object of type DataPoint for each view model in the ItemsSource and it will add it in the series' DataPoints collection. In this scenario the DataItem property of the DataPoint objects will be set automatically to the view model behind the point.

In other words the DataItem property is read only and it cannot be set manually. If you want to have a value in the DataItem property you will need to populate the series using the data binding approach. However, if this doesn't work for you, you can bind the Source property of the Image element to another property of the DataPoint object (Value for example) and use an IValueConverter which you can use to decide what image source to apply.

Regards,
Martin
Telerik

[Bárbara]

Got it, thank you very much!