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>

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>

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

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

The cursor style of the legend item.

The highlight configuration of the legend item.

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

The background color of the highlighted legend item markers.

The border of the highlighted markers.

The configuration of the Chart legend highlighted item markers border.

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

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

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.

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

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.

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

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>

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

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

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

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>

The background color of the legend item markers.

The border of the markers.

The configuration of the Chart legend item markers border.

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

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

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.

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

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>

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.

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>