Custom Chart Legend

[Valentin]

Hello,

 

In my RadCartesianChart, I have a legend which is created implicitly by serie. I want to know if is it possible to insert a picture to replace the actual square for the legend ?

I want to do it in code because it's just for one serie.

 

I tried to create a MarkerGeometry (type of Gemoetry Class), but I don't done it..

serieImprecise.LegendSettings.MarkerGeometry = ??

 

You can see the attached file for an "exemple".

 

Thank you !

[Martin Ivanov]

Hello Valentin,

Depending on your case I can suggest you two different approaches.

• If you want to display a polygon as the triangle shown in the picture from your last reply you can use the MarkerGeometry of the LegendSettings. Keep in mind that the MarkerGeometry accepts a WPF geometry object that is used to draw a shape, but it cannot be used to display pictures as .jpg, .png, etc. Also, note that the Path element that displays the geometry in the legend have a fixed size of 12x12 pixels. To change this you will need to define a ItemTemplate for RadLegend.
  

  <telerik:SeriesLegendSettings Title="Series 2">
      <telerik:SeriesLegendSettings.MarkerGeometry>
          <PathGeometry>
              <PathGeometry.Figures>
                  <PathFigure>
                      <PathFigure.Segments>
                          <PolyLineSegment Points="0,0 12,0 6,12" />
                      </PathFigure.Segments>
                  </PathFigure>
              </PathGeometry.Figures>
          </PathGeometry>
      </telerik:SeriesLegendSettings.MarkerGeometry>
  </telerik:SeriesLegendSettings>

• If you want to display a picture you can define an ItemTemplate for the RadLegend control that contains an Image and based on the legend item Title display or hide the image for the different items.

Regards,
Martin
Telerik by Progress

[Valentin]

Hello Martin,

 

I will take the second option because I want to do it on the code behind. But, how can I apply my custom Template to StepLineSeries.LegendSettings because there isn't Template attribute ?

To remind you, I want to display this picture for just one Legend, not all.

 

Thank you !

[Martin Ivanov]

Hello Valentin,

You can use the first approach in code either.

var legendSettings = new SeriesLegendSettings();
legendSettings.Title = "Series 2";

var triangleSegment = new PolyLineSegment();
triangleSegment.Points = new PointCollection()
{
    new Point(0, 0),
    new Point(12, 0),
    new Point(6, 12),
};
var figure = new PathFigure();
figure.Segments.Add(triangleSegment);
var geometry = new PathGeometry();
geometry.Figures.Add(figure);

legendSettings.MarkerGeometry = geometry;

series.LegendSettings = legendSettings;

About the second approach, the LegendSettings object doesn't have a template property, so you cannot define a different template for each legend item. You will need to define a single template and assign in to the ItemTemplate of the RadLegend control. In the template you can include additional logic for handling your scenario. For example, you can use an IValueConverter in the template and based on the Title of the legend item (the series name) hide the element that shows the geometry and display the element with the image. And vice versa - show the geometry and hide the picture.

Regards,
Martin
Telerik by Progress

[Valentin]

Hello,

 

Thank you for your code, this is what I searched before. I was on the right way but I didn't know it.

So, I tried your code and I discovered that the legend's color depending by the serie's color. But, I'm using a Transparent Color for this serie because it is a specific one... When I set an other color for the serie, I've always got a little triangle in my legend, even if I change the size (you can see it in the attached file).

 

The main problem is :

How can I have two colors for this serie :

    * Transparent for the chart's serie

    * Orange (like triangle) for the legend ?

 

Thank you very much.

[Martin Ivanov]

Hello Valentin,

Indeed, the legend item color depends on the series color and this can't be changed very easily. In order to achieve your requirement you can avoid setting the LegendSettings property of the series and add the LegendItem object that will display information about the series manually in the LegendItems collection. This way you can modify it as you like - set specific Title, MarkerGeometry and MarkerFill.

this.chart.Loaded += chart_Loaded;
//.............
void chart_Loaded(object sender, RoutedEventArgs e)
{
    var triangleSegment = new PolyLineSegment();
    triangleSegment.Points = new PointCollection()
    {
        new Point(0, 0),
        new Point(12, 0),
        new Point(6, 12),
    };
    var figure = new PathFigure();
    figure.Segments.Add(triangleSegment);
    var geometry = new PathGeometry();
    geometry.Figures.Add(figure);

    this.chart.LegendItems.Add(new Telerik.Windows.Controls.Legend.LegendItem()
    {
        Title = "Series 2",
        MarkerFill = Brushes.Orange,
        MarkerGeometry = geometry,
    });
}

Another approach is to find the corresponding LegendItem from the LegendItems collection and change its MarkerFill.

Regards,
Martin
Telerik by Progress

[Valentin]

Hello Martin,

 

It's strange because I added the new LegendItem in the chartVariables.LegendItems but nothing is display. More over, the binding for the LegendItem is correct :

<telerik:RadLegend x:Name="lgdVariables" Items="{Binding LegendItems, ElementName=chartVariables}" .... />

I don't understand why nothing is display => for each serie, there is the correspondant Legend at this place, but if i do (for this specific serie) :

- this.chartVariables.LegendItems.Add(new LegendItem()  {...} )

or

- this.lgdVariables.Items.Add(new LegendItem()  {...} )

I've got the same result : nothing is display...

[Valentin]

Hello Martin,

 

I by-passed the problem with an other solution, but this is not the better solution : I created a new serie, which has a fictive point to can be diplayed. And I applicated the attributs (color, title...).

 

You can see the result in the attached file.

 

I had send a reply before this reply but it is not sended because "spam"..

 

Thank you very much for your help !

[Martin Ivanov]

Hello Valentin,

Thank you for sharing the final result. I hope the provided solutions are useful.

Regards,
Martin
Telerik by Progress

[Valentin]

Hello,

 

I've an other question about custom RadLegend : I want to change the LegendItem Title font weight (bold or normal), but I don't find the good property.

I don't find answer in the documentation.

 

And this changement should be applied just on the legend selected by use.

 

Thank you very much.

Valentin.

[Martin Ivanov]

Hi,

RadLegend doesn't have built-in mechanism that changes the font weight of the legend items. In order to achieve this you will need to implement custom logic. For example, you can define custom ItemTemplate and inside the template, set the FontWeight property of the TextBlock presenting the Title.

Alternatively, you can check the hover mode feature of the legend and the chart. It is activated via the HoverMode property. Both the chart and legend expose such property.

Regards,
Martin
Telerik by Progress

[Valentin]

Hello Martin,

 

How can I apply the template to the LegendItem ? This control hasn't got a TemplateProperty.

And if I set this Template to the RadLegend, all of my LegendItem (one LegendItem represents one CartesianSeries) will be modifed.

 

Thank you.

[Martin Ivanov]

Hello Valentin,

The LegendItem class is just model for the legend visuals and it doesn't have a Template property. In other words you can't set separate templates for each legend item. If you want each item to have different template you can define a ContentControl in the RadLegend ItemTemplate. Then set the ContentTemplateSelector property of the ContentControl and based on the legend item select different templates.

Regards,
Martin
Telerik by Progress