legend.itemObject
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.areaObject
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.backgroundString
The background color of the legend item. Accepts a valid CSS color string, including HEX and RGB. Defaults to the series color.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
area: {
background: "lightblue"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3], type: "area" },
{ name: "Series 2", data: [4, 5, 6], type: "area" }
]
});
</script>legend.item.area.opacityNumber
The opacity of the legend item. Defaults to the series opacity.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
area: {
opacity: 0.5
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3], type: "area" },
{ name: "Series 2", data: [4, 5, 6], type: "area" }
]
});
</script>legend.item.cursorString
The cursor style of the legend item.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
cursor: "pointer"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlightObject
The highlight configuration of the legend item.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
background: "yellow",
border: {
color: "red",
width: 2
}
},
visible: true
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markersObject
The markers configuration of the legend item when it is hovered.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
background: "orange",
border: {
color: "black",
width: 1
},
type: "triangle",
visible: true
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.backgroundString|Function
The background color of the highlighted legend item markers.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
background: "lime"
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.borderObject|Function
The border of the highlighted markers.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
border: {
color: "purple",
width: 3,
dashType: "dash"
}
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.border.colorString|Function
The configuration of the Chart legend highlighted item markers border.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
border: {
color: "crimson",
width: 2
}
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.border.dashTypeString
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
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
border: {
dashType: "dashDot",
color: "green",
width: 2
}
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.borderRadiusNumber
The border radius in pixels when type is set to "roundedRect".
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
type: "roundedRect",
borderRadius: 5,
background: "lightcoral"
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.typeString|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.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
type: "cross",
background: "gold"
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.visibleBoolean|Function
If set to true the chart will display the legend item markers. Defaults to the series options.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
visible: false
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.highlight.markers.visualFunction
A function that can be used to create a custom visual for the highlighted markers. The available argument fields are:
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
markers: {
visual: function(e) {
var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
var path = kendo.geometry.Path.fromRect(rect);
return new kendo.drawing.Path(path).stroke("red", 2).fill("yellow");
}
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>- rect - the
kendo.geometry.Rectthat 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.visibleBoolean(default: true)
If set to false, the hover effect of the legend item is disabled.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
highlight: {
visible: false
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.lineObject
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.colorString
The color of the legend item of type line. Accepts a valid CSS color string, including HEX and RGB.
Defaults to the series color.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
line: {
color: "purple"
}
}
},
series: [
{ name: "Line Series", data: [1, 2, 3], type: "line" }
]
});
</script>legend.item.line.dashTypeString
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
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
line: {
dashType: "dash",
color: "red"
}
}
},
series: [
{ name: "Line Series", data: [1, 2, 3], type: "line" }
]
});
</script>- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
legend.item.line.opacityNumber
The opacity of the legend item of type line.
Defaults to the series opacity.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
line: {
opacity: 0.7,
color: "blue"
}
}
},
series: [
{ name: "Line Series", data: [1, 2, 3], type: "line" }
]
});
</script>legend.item.markersObject
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.backgroundString|Function
The background color of the legend item markers.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
background: "orange"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.borderObject|Function
The border of the markers.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
border: {
color: "red",
width: 2,
dashType: "solid"
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.border.colorString|Function
The configuration of the Chart legend item markers border.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
border: {
color: "green",
width: 1
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.border.dashTypeString
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
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
border: {
dashType: "dashDot",
color: "blue",
width: 2
}
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.borderRadiusNumber
The border radius in pixels when type is set to "roundedRect".
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
type: "roundedRect",
borderRadius: 8,
background: "lightblue"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.typeString|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.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
type: "triangle",
background: "yellow"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.visibleBoolean|Function
If set to true the chart will display the legend item markers. Defaults to the series options.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
markers: {
visible: false
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [4, 5, 6] }
]
});
</script>legend.item.markers.visualFunction
A function that can be used to create a custom visual for the markers. The available argument fields are:
- rect - the
kendo.geometry.Rectthat 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.typeString
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.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
item: {
type: "line"
}
},
series: [
{ name: "Area Series", data: [1, 2, 3], type: "area" },
{ name: "Column Series", data: [4, 5, 6], type: "column" }
]
});
</script>legend.item.visualFunction
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