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

Series.markers.from

configuration

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

series.markers.from

Object

<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.from.background

String|Function

The background color of the markers.

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

series.markers.from.border

Object|Function

The border of the markers.

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

series.markers.from.rotation

Number|Function

The rotation angle of the markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    markers: {
      from: {
        visible: true,
        type: "square",
        rotation: 45
      }
    },
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ]
  }]
});
</script>

series.markers.from.size

Number|Function

The marker size in pixels.

Default: 6

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

series.markers.from.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.

Default: "circle"

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

series.markers.from.visible

Boolean|Function

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

Default: false

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

series.markers.from.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: "rangeArea",
    markers: {
      from: {
        visible: true,
        visual: function(e) {
          var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
          var path = kendo.drawing.Path.fromRect(rect, {
            fill: { color: "red" },
            stroke: { color: "black" }
          });
          return path;
        }
      }
    },
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ]
  }]
});
</script>

Related Members