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

Series.markers

configuration

Marker options.

Applicable to area and line series

series.markers

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            background: "blue",
            size: 8,
            type: "circle"
        }
    }]
});
</script>

series.markers.background

String|Function

The background color of the current series markers.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            background: "green"
        }
    }]
});
</script>

series.markers.border

Object|Function

The border of the markers.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            border: {
                color: "red",
                width: 2
            }
        }
    }]
});
</script>

series.markers.rotation

Number|Function

The rotation angle of the markers.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            type: "triangle",
            rotation: 45
        }
    }]
});
</script>

series.markers.size

Number|Function

The marker size.

Default: 6

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            size: 12
        }
    }]
});
</script>

series.markers.type

String|Function

Configures the markers shape type.

"square"

The marker shape is square.

"triangle"

The marker shape is triangle.

"circle"

The marker shape is circle.

Default: "circle"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            type: "triangle"
        }
    }]
});
</script>

series.markers.visible

Boolean|Function

The markers visibility.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true
        }
    }]
});
</script>

Related Members