series.markers.toObject
The chart series marker configuration for the "to" point. Supported for "rangeArea" and "verticalRangeArea" series.
Example - set the chart series markers "to" options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
background: "green",
size: 30
}
},
data: [[1, 2], [3, 5], [1, 4]]
}]
});
</script>series.markers.to.backgroundString|Function
The background color of the markers.
Example - set the chart series to markers background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
background: "green"
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.borderObject|Function
The border of the markers.
Example - configure the chart series to markers border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
border: {
color: "blue",
width: 2
}
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.border.colorString|Function(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series to markers border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
border: {
color: "orange",
width: 2
}
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.border.widthNumber|Function(default: 0)
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series to markers border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
border: {
color: "black",
width: 3
}
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.sizeNumber|Function(default: 6)
The marker size in pixels.
Example - set the chart series to markers size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
size: 15
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.typeString|Function(default: "circle")
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.
Example - set the chart series to markers type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
type: "triangle"
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.visibleBoolean|Function(default: false)
If set to true the chart will display the series markers. By default chart series markers are displayed.
Example - show the chart series to markers
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.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 to markers
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
visual: function(e) {
var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
var path = kendo.drawing.Path.fromRect(rect, {
fill: { color: "blue" },
stroke: { color: "black" }
});
return path;
}
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>series.markers.to.rotationNumber|Function
The rotation angle of the markers.
Example - set the chart series to markers rotation
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
markers: {
to: {
visible: true,
type: "square",
rotation: 45
}
},
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
]
}]
});
</script>In this article