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

Series.markers

configuration

The chart series marker configuration.

The chart displays the series labels when the series.markers.visible option is set to true. The markers option is supported when series.type is set to "area", "rangeArea", "line", "scatter", "scatterLine", "radarLine", "radarArea", "polarLine", "polarScatter" or "polarArea".

series.markers

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      background: "green",
      size: 30
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.background

String|Function

The background color of the series markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      background: "green"
    },
    data: [1, 2, 3]
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      background: function (e) {
        return e.series.color; // will match the series color
      }
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.border

Object|Function

The border of the markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      border: {
        width: 2,
        color: "green"
      }
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.borderRadius

Number

The border radius in pixels when type is set to "roundedRect". Defaults to 1/5 of the marker size.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      type: "roundedRect",
      borderRadius: 2
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.from

Object

The chart series marker configuration for the "from" point. Supported for "rangeArea" and "verticalRangeArea" series.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "rangeArea",
      markers: {
        from: {
          visible: true,
          background: "green",
          size: 30
        }
      },
      data: [[1, 2], [3, 5], [1, 4]]
    }]
  });
</script>

series.markers.rotation

Number|Function

The rotation angle of the markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    data: [200, 450, 300, 125],
    markers: {
      type: "square",
      rotation: 45
    }
  }]
});
</script>

$("#chart").kendoChart({
  dataSource: {
    data: [{
      speed: 2,
      dir: 45
    }, {
      speed: 4.6,
      dir: 180
    }]
  },
  series: [{
     type: "line",
     field: "speed",
     markers: {
      type: "triangle",
      size: 20,
      rotation: function(point) {
          // "Bind" rotation to dataItem field
          return point.dataItem.dir;
      }
     }
  }]
});

series.markers.size

Number|Function

The marker size in pixels.

Default: 6

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      size: 30
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.to

Object

The chart series marker configuration for the "to" point. Supported for "rangeArea" and "verticalRangeArea" series.

<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.type

String|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.

Default: "circle"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true,
      type: "triangle",
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.visible

Boolean|Function

If set to true the chart will display the series markers. By default chart series markers are displayed.

Default: true

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: false
    },
    data: [1, 2, 3]
  }]
});
</script>

series.markers.visual

Function

A function that can be used to create a custom visual for the markers. The available argument fields are:

rect - the kendo.geometry.Rect that 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.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "line",
      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;
        }
      },
      data: [1, 2, 3]
    }]
  });
</script>

series.markers.zIndex

Number|Function

An optional Z-index that can be used to change the default stacking order of the markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    data: [200, 450, 300, 125],
    markers: {
      type: "square",
      rotation: 45,
      zIndex: 5
    }
  }]
});
</script>

Related Members