series.extremes Object

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

Example - set the chart series extremes

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

Example - set the chart series outliers background

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

Example - set the chart series extremes border

<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.border.color String|Function (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the chart series extremes border color

<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.border.width Number|Function (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the chart series extremes border width

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

series.extremes.size Number|Function (default: 6)

The extremes size in pixels.

Example - set the chart extremes size

<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 (default: "circle")

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.

Example - set the chart series extremes shape

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

series.extremes.rotation Number|Function

The rotation angle of the extremes.

Example

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

Example

$("#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;
      }
     }
  }]
});