Change icon in chart's legend

[Karl]

In my chart's legend, it lists each series' name with a square icon that is the same color as my line to the left of it. I need this icon to be a circle for one of my series. Is this possible?

I'm using a line chart if that matters, and the marker type for this line is "circle".

[Lee]

I see this has been a request for over 10 years now. Any progress on adding it to Kendo UI Jquery?

[Nikolay]

Hi Lee,

You could achieve this if you use a custom visual for the legend item through the legend.item.visual property.

Official demo: https://demos.telerik.com/kendo-ui/bar-charts/visuals

Here is an example of such implementation:

        visual: function (e) {
          var color = e.options.markers.background;
          var labelColor = e.options.labels.color;
          var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
          var layout = new kendo.drawing.Layout(rect, {
            spacing: 5,
            alignItems: "center",
            cursor: "pointer"
          });

          var marker = new kendo.drawing.Path({
            fill: {
              color: color
            },
            stroke: {
            	color: color
            }
          })
          .moveTo(0, 5)
          .lineTo(15, 5)
          .lineTo(15, 2)
          .lineTo(20, 2)
          .lineTo(20, 5)
          .lineTo(35, 5)
          .lineTo(20, 5)
          .lineTo(20, 8)
          .lineTo(15, 8)
          .lineTo(15, 5);

          var label = new kendo.drawing.Text(e.series.name, [0, 0], {
            fill: {
              color: labelColor
            }
          });

          layout.append(marker, label);
          layout.reflow()

          return layout;
        }

Dojo demo: https://dojo.telerik.com/ubOSEJIW

Regards,

Nikolay

[Iliana Dyankova]

Hi Karl,

I am afraid what you are trying to achieve is not supported in Kendo UI Chart, however it sounds good and we will definitely consider its implementation for future releases. As a possible workaround at present I can suggest to hide the default chart legend and create a custom HTML <div> element, which you could configure to look like as a legend with the desired outcome.

Regards,
Iliana Nikolova
the Telerik team

[Karl]

Ok thanks.

[Artur]

is it possible to remove square icon in chart's legend ?

[Iliana Dyankova]

Hi Artur,

Currently chart legend icons cannot be customized. We will appreciate if you submit this idea as a feature request at our UserVoice page - this way the community would be able to vote and comment it. When planning for a release we gather and take into account all feedback from the public portal - the most popular requests take the highest priority.

Regards,
Iliana Nikolova
Telerik

 

 

[UFIS]

Hi Iliana, 

Is it feature available on latest version?

Regards,
UFIS

[Hristo Germanov]

Hi UFIS,

Currently it's not supported but you can vote for high priority.

Regards,
Hristo Germanov
Telerik

 

 

[Lee]

I see this has been a request for over 10 years now. Any progress on adding it to Kendo UI Jquery?

[Nikolay]

Hi Lee,

You could achieve this if you use a custom visual for the legend item through the legend.item.visual property.

Official demo: https://demos.telerik.com/kendo-ui/bar-charts/visuals

Here is an example of such implementation:

 

        visual: function (e) {
          var color = e.options.markers.background;
          var labelColor = e.options.labels.color;
          var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
          var layout = new kendo.drawing.Layout(rect, {
            spacing: 5,
            alignItems: "center",
            cursor: "pointer"
          });

          var marker = new kendo.drawing.Path({
            fill: {
              color: color
            },
            stroke: {
            	color: color
            }
          })
          .moveTo(0, 5)
          .lineTo(15, 5)
          .lineTo(15, 2)
          .lineTo(20, 2)
          .lineTo(20, 5)
          .lineTo(35, 5)
          .lineTo(20, 5)
          .lineTo(20, 8)
          .lineTo(15, 8)
          .lineTo(15, 5);

          var label = new kendo.drawing.Text(e.series.name, [0, 0], {
            fill: {
              color: labelColor
            }
          });

          layout.append(marker, label);
          layout.reflow()

          return layout;
        }

 

Dojo demo: https://dojo.telerik.com/ubOSEJIW

Regards,

Nikolay

[Lee]

How would we keep them in sync though? Like say, in your example, the green line had hollow circles and the orange line had filled in diamonds. We would need the chart and legend to match.

[Nikolay]

Hi Lee,

You can adjust this conditionally in the visuals() function:

              if(e.series.name === "Series 1") {
                var marker = new kendo.drawing.Path({
                  fill: {
                    color: color
                  },
                  stroke: {
                    color: color
                  }
                })
                .moveTo(0, 5)
                .lineTo(15, 5)
                .lineTo(15, 2)
                .lineTo(20, 2)
                .lineTo(20, 5)
                .lineTo(35, 5)
                .lineTo(20, 5)
                .lineTo(20, 8)
                .lineTo(15, 8)
                .lineTo(15, 5);
              } else {
                var marker = new kendo.drawing.Path({
                  stroke: {
                    color: color
                  }
                })
                .moveTo(0, 5)
                .lineTo(15, 5)
                .lineTo(15, 2)
                .lineTo(20, 2)
                .lineTo(20, 5)
                .lineTo(35, 5)
                .lineTo(20, 5)
                .lineTo(20, 8)
                .lineTo(15, 8)
                .lineTo(15, 5);
              }

Dojo demo: https://dojo.telerik.com/ubOSEJIW/2

Regards,

Nikolay

[Lee]

Your Dojo doesn't have the legend in sync with the chart. The idea is that if the chart has a blue circle for series 1, the legend should also display a blue circle. If the chart has a red diamond for series 2, the legend should also display a red diamond. Im also not real familiar with drawing circles (or anything really) using the kendo drawing object. I know it is a coordinate thing but how do you do curves?

[Neli]

Hi Lee,

If you need to have a circle instead of the small rectangle in the label you can use the kendo.drawing.Circle.

             var marker = new kendo.drawing.Circle(new kendo.geometry.Circle([0, 0], 5), {
                  fill: {
                    color: color
                  },
                  stroke: {
                    color: color
                  }
                });

Here you will find the modified example where a circle is displayed in the first series label and a square for the second series. 

I hope this helps.

Regards,

Neli

[Lee]

It still doesnt match the series in the chart. Can you update the dojo so that the legend matches the chart?

[Neli]

Hi Lee,

You can use the markers configuration option to customize the appearance of the markers in the Chart and make their appeatrance identical to the labels. Below is an example:

series: [  
          { 
            name: "Series 1", 
            data: [1, 2, 3, 2, 5],
            markers: {  
              background: function(e){
                return e.series.color
              }
            },
          },
          { 
            name: "Series 2",
            data: [2, 3, 1, 2, 1],
            markers: {            
              type: "square",
              background: function(e){
                return e.series.color
              },
              size: 10,
              border: {
                color: "darkgreen"
              },
            },
          }
        ]

Here you will find the modified Dojo example.

Regards,

Neli