Custom Chart Legend

13 posts, 0 answers
  1. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 22 Aug Link to this post

    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 !

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 23 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 23 Aug in reply to Martin Link to this post

    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 !

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 23 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 23 Aug in reply to Martin Link to this post

    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.

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 24 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 24 Aug Link to this post

    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...

  9. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 24 Aug in reply to Martin Link to this post

    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 !

  10. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 25 Aug Link to this post

    Hello Valentin,

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

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  11. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 08 Nov Link to this post

    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.

  12. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Nov Link to this post

    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
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  13. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 15 Nov in reply to Martin Link to this post

    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.

  14. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 15 Nov Link to this post

    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
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
Back to Top
UI for WPF is Visual Studio 2017 Ready