legend.item Object

The configuration of the Chart legend item.

To override the marker configuration of individual series, use the series.legendItem settings of the series.

Example - disable highlight of legend items

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true
    },
    data: [1, 2, 3]
  }, {
    type: "line",
    markers: {
      type: 'roundedRect',
      visible: true
    },
    data: [4, 5, 6]
  }],
  legend: {
    item: {
      highlight: {
        visible: false
      }
    }
  }
});
</script>

Example - display legacy style markers in the legend

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true
    },
    data: [1, 2, 3]
  }, {
    type: "line",
    markers: {
      type: 'roundedRect',
      visible: true
    },
    data: [4, 5, 6]
  }],
  seriesDefaults: {
      /* Use these settings to emulate the legacy legend item rendering */
      legendItem: {
          type: 'line',
          line: {
              dashType: 'solid',
          },
          markers: {
              visible: false
          },
          highlight: {
              visible: false
          }
      },
  }
});
</script>

legend.item.area Object

Sets the configuration of the legend items of type area. By default, all series except line and scatter use this legend type.

Example - sets the opacity of area legend items

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "area",
    name: "Series A",
    data: [1, 2, 3]
  }, {
    type: "area",
    name: "Series B",
    data: [4, 5, 6]
  }],
  legend: {
    item: {
      area: {
        opacity: 0.1,
      }
    }
  }
});
</script>

legend.item.area.background String

The background color of the legend item. Accepts a valid CSS color string, including HEX and RGB. Defaults to the series color.

legend.item.area.opacity Number

The opacity of the legend item. Defaults to the series opacity.

legend.item.cursor String

The cursor style of the legend item.

legend.item.highlight Object

The highlight configuration of the legend item.

legend.item.highlight.markers Object

The markers configuration of the legend item when it is hovered.

legend.item.highlight.markers.background String|Function

The background color of the highlighted legend item markers.

legend.item.highlight.markers.border Object|Function

The border of the highlighted markers.

legend.item.highlight.markers.border.color String|Function

The configuration of the Chart legend highlighted item markers border.

legend.item.highlight.markers.border.dashType String

The dash type of the highlighted legend item border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

legend.item.highlight.markers.borderRadius Number

The border radius in pixels when type is set to "roundedRect".

legend.item.highlight.markers.type String|Function

The highlighted markers shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.
  • "cross" - the marker shape is cross.
  • "rect" - alias for "square".
  • "roundedRect" - the marker shape is a rounded rectangle.

legend.item.highlight.markers.visible Boolean|Function

If set to true the chart will display the legend item markers. Defaults to the series options.

legend.item.highlight.markers.visual Function

A function that can be used to create a custom visual for the highlighted markers. The available argument fields are:

  • rect - the kendo.geometry.Rect that defines where the visual should be rendered.
  • options - the marker options.
  • createVisual - a function that can be used to get the default visual.
  • category - the category of the marker point.
  • dataItem - the dataItem of the marker point.
  • value - the value of the marker point.
  • sender - the chart instance.
  • series - the series of the marker point.

legend.item.highlight.visible Boolean (default: true)

If set to false, the hover effect of the legend item is disabled.

legend.item.line Object

Sets the configuration of the legend items of type line. This is the default legend item type for all line and scatter series.

Example - override the color of line legend items

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3]
  }, {
    type: "line",
    name: "Series B",
    data: [4, 5, 6]
  }],
  legend: {
    item: {
      line: {
        color: "#777",
      }
    }
  }
});
</script>

legend.item.line.color String

The color of the legend item of type line. Accepts a valid CSS color string, including HEX and RGB. Defaults to the series color.

legend.item.line.dashType String

The dash type of the legend item of type line.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

legend.item.line.opacity Number

The opacity of the legend item of type line. Defaults to the series opacity.

legend.item.markers Object

The configuration of the Chart legend item markers.

By default, the marker configuration will be the same as the series.markers settings of the displayed series.

Example - override marker settings for the legend

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      background: "green"
    },
    data: [1, 2, 3]
  }],
  legend: {
    item: {
      markers: {
        visible: false
      }
    }
  }
});
</script>

legend.item.markers.background String|Function

The background color of the legend item markers.

legend.item.markers.border Object|Function

The border of the markers.

legend.item.markers.border.color String|Function

The configuration of the Chart legend item markers border.

legend.item.markers.border.dashType String

The dash type of the legend item border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

legend.item.markers.borderRadius Number

The border radius in pixels when type is set to "roundedRect".

legend.item.markers.type String|Function

The markers shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.
  • "cross" - the marker shape is cross.
  • "rect" - alias for "square".
  • "roundedRect" - the marker shape is a rounded rectangle.

legend.item.markers.visible Boolean|Function

If set to true the chart will display the legend item markers. Defaults to the series options.

legend.item.markers.visual Function

A function that can be used to create a custom visual for the markers. The available argument fields are:

  • rect - the kendo.geometry.Rect that defines where the visual should be rendered.
  • options - the marker options.
  • createVisual - a function that can be used to get the default visual.
  • category - the category of the marker point.
  • dataItem - the dataItem of the marker point.
  • value - the value of the marker point.
  • sender - the chart instance.
  • series - the series of the marker point.

Example - use custom visual for the markers

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "line",
      name: "Series A",
      data: [1, 2, 3]
    }],
    legend: {
      position: "bottom",
      item: {
        markers: {
          visual: function (e) {
            var origin = e.rect.origin;
            var center = e.rect.center();
            var bottomRight = e.rect.bottomRight();

            var path = new kendo.drawing.Path({
              fill: {
                color: e.options.border.color
              }
            })
            .moveTo(origin.x, bottomRight.y)
            .lineTo(bottomRight.x, bottomRight.y)
            .lineTo(center.x, origin.y)
            .close();

            return path;
          }
        }
      }
    }
  });
</script>

legend.item.type String

Sets the type of the legend items. The default value is based on the series type.

The supported values are:

  • "line"—the legend items are rendered as a line. This is the default value for line charts.
  • "area"—the legend items are rendered as a filled rectangle. This is the default value for area charts.

legend.item.visual Function

A function that can be used to create a custom visual for the legend items. The available argument fields are:

  • options—The item options.
  • createVisual—A function for getting the default visual.
  • series—The item series.
  • pointIndex—The index of the point in the series. Available for the Pie, Donut, and Funnel series.

Example - using custom visual for the legend items

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    legend: {
      item: {
        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"
          });

          var marker = new kendo.drawing.Path({
            fill: {
              color: color
            }
          }).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();

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

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

          return layout;
        }
      }
    },
    series: [
      { name: "Series 1", data: [1, 2, 3] },
      { name: "Series 2", data: [3, 4, 5] }
    ]
  });
</script>
In this article
Related articles
Not finding the help you need? Improve this article