New to Kendo UI for jQuery? Start a free 30-day trial

SeriesDefaults.legendItem.markers

configuration

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.

seriesDefaults.legendItem.markers

Object

<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
  dataSource: {
    data: [{
      "Date": "2016/01/01",
      "Open": 41.62,
      "High": 41.69,
      "Low": 39.81,
      "Close": 40.12,
      "Volume": 2632000
    }, {
      "Date": "2016/03/01",
      "Open": 40.62,
      "High": 39.69,
      "Low": 40.81,
      "Close": 39.12,
      "Volume": 2631986
    }]
  },
  dateField: "Date",
  series: [{
    name: "Series 1",
    type: "line",
    field: "Close",
    markers: {
      visible: true
    },
    legendItem: {
      markers: {
        visible: false
      }
    }
  }],
  legend: {
    visible: true,
    position: 'bottom'
  }
});
</script>

seriesDefaults.legendItem.markers.background

String|Function

The background color of the legend item markers.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        legendItem: {
            markers: {
                background: "#ff0000"
            }
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

seriesDefaults.legendItem.markers.border

Object|Function

The border of the markers.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        legendItem: {
            markers: {
                border: {
                    color: "#ff0000",
                    width: 2
                }
            }
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

seriesDefaults.legendItem.markers.borderRadius

Number

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        legendItem: {
            markers: {
                type: "roundedRect",
                borderRadius: 5
            }
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

seriesDefaults.legendItem.markers.type

String|Function

The markers shape.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        legendItem: {
            markers: {
                type: "square"
            }
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

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.

seriesDefaults.legendItem.markers.visible

Boolean|Function

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        legendItem: {
            markers: {
                visible: false
            }
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

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

<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
  dataSource: {
    data: [{
      "Date": "2016/01/01",
      "Open": 41.62,
      "High": 41.69,
      "Low": 39.81,
      "Close": 40.12,
      "Volume": 2632000
    }, {
      "Date": "2016/03/01",
      "Open": 40.62,
      "High": 39.69,
      "Low": 40.81,
      "Close": 39.12,
      "Volume": 2631986
    }]
  },
  dateField: "Date",
  series: [{
    name: "Series 1",
    type: "line",
    field: "Close",
    markers: {
      visible: true
    },
    legendItem: {
      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;
        }
      }
    }
  }],
  legend: {
    visible: true,
    position: 'bottom'
  }
});
</script>

Related Members