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

Series.markers

configuration

Marker options.

** Applicable for area and line series. **

series.markers

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true,
            background: "#ff6800",
            size: 8
        }
    }]
});
</script>

series.markers.background

String|Function

The background color of the current series markers.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true,
            background: "#ff6800"
        }
    }]
});
</script>

series.markers.border

Object|Function

The border of the markers.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true,
            border: {
                color: "#000",
                width: 2
            }
        }
    }]
});
</script>

series.markers.rotation

Number|Function

The rotation angle of the markers.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      markers: {
        type: "square",
        rotation: 45
      },
      data: [
        { value: 1, date: new Date(2012, 1, 1) },
        { value: 2, date: new Date(2012, 1, 2) }
      ]
    }]
});
</script>

series.markers.size

Number|Function

The marker size.

Default: 6

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        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.

"cross"

The marker shape is cross.

Default: "circle"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true,
            type: "triangle"
        }
    }]
});
</script>

series.markers.visible

Boolean|Function

The markers visibility.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true
        }
    }]
});
</script>

Related Members