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

Series.extremes

configuration

The chart series extremes configuration. Applies to extreme outliers. Also check series.outliers.

series.extremes

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    extremes: {
      background: "green",
      size: 30
    },
    data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]]
  }]
});
</script>

series.extremes.background

String|Function

The background color of the series outliers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    extremes: {
      background: "green"
    },
    data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]]
  }]
});
</script>

series.extremes.border

Object|Function

The border of the extremes.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    extremes: {
      border: {
        width: 2,
        color: "green"
      }
    },
    data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]]
  }]
});
</script>

series.extremes.rotation

Number|Function

The rotation angle of the extremes.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: "boxPlot",
      data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]],
      extremes: {
        type: "square",
        rotation: 45
      }
    }]
  });
</script>

$("#chart").kendoChart({
  dataSource: {
    data: [{
      lower: 1,
      q1: 2,
	  median: 3,
	  q3: 4,
	  upper: 5,
      mean: 3.5,
      outliers: [0,0,0.5,6,7,11]
    }]
  },
  series: [{
     type: "boxPlot",
     lowerField: "lower",
     q1Field: "q1",
     medianField: "median",
     q3Field: "q3",
     upperField: "upper",
     meanField: "mean",
     outliersField: "outliers",
     extremes: {
      type: "triangle",
      size: 20,
      rotation: function(point) {
          // "Bind" rotation to dataItem field
          return point.dataItem.dir;
      }
     }
  }]
});

series.extremes.size

Number|Function

The extremes size in pixels.

Default: 6

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    extremes: {
      size: 30
    },
    data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]]
  }]
});
</script>

series.extremes.type

String|Function

The extremes 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: "boxPlot",
    extremes: {
      type: "triangle",
    },
    data: [1,2,3,4,5,3.5,[0,0,0.5,6,7,11]]
  }]
});
</script>