New to Kendo UI for jQuery? Start a free 30-day trial
Configuring Series Marker Intervals in Kendo UI Chart
Environment
Product | Progress® Kendo UI® Chart |
Version | 2025.2.520 |
Description
I want to display markers on my Kendo UI Chart series at specific intervals, such as every n-th point. While the default configuration allows enabling or disabling markers, I need a way to toggle their visibility based on the point index.
This knowledge base article also answers the following questions:
- How to show markers every second point in Kendo UI Chart?
- How to configure series markers dynamically in Kendo UI Chart?
- Is it possible to apply conditional logic for Kendo UI Chart markers?
Solution
To show markers at specific intervals, use the markers.visible
property. This property accepts a function that controls the visibility of markers based on the index of the data point.
Below is an example of how to display markers for every second data point:
javascript
$("#chart").kendoChart({
series: [
{
type: "line",
markers: {
visible: function(e) {
// Show markers for every second data point (e.index % 2 === 0)
return e.index % 2 === 0;
},
background: "green", // Specify marker background color
size: 30, // Define marker size
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // Series data points
},
],
});
Key Points:
- The
markers.visible
function receives ane
parameter containing the data point's index (e.index). - Use conditional logic within the function to determine marker visibility.
- Customize marker appearance using properties like
background
andsize
.
For a live demonstration, refer to the example below.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "line",
markers: {
visible: function(e) {
return e.index % 2 ? false : true;
},
background: "green",
size: 30,
// interval: 2 // <-- show every second data point? Do we have some configuration available to do this?
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
}
]
});
</script>