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

Series.whiskers

configuration

The chart series whiskers configuration.

The appearance settings for the BoxPlot whiskers.

series.whiskers

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    data: [
      { lower: 1, q1: 2, median: 3, q3: 4, upper: 5 }
    ],
    whiskers: {
      color: "blue",
      width: 2,
      opacity: 0.8
    }
  }]
});
</script>

series.whiskers.color

String

The color of the whiskers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "boxPlot",
    data: [
      { lower: 1, q1: 2, median: 3, q3: 4, upper: 5 }
    ],
    whiskers: {
      color: "#ff6600"
    }
  }]
});
</script>

series.whiskers.dashType

String

The dash type of the whiskers.

The following dash types are supported:

"dash" - a line consisting of dashes
"dashDot" - a line consisting of a repeating pattern of dash-dot
"dot" - a line consisting of dots
"longDash" - a line consisting of a repeating pattern of long-dash
"longDashDot" - a line consisting of a repeating pattern of long-dash-dot
"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
"solid" - a solid line

Default: "solid"

<div id="chart"></div>
<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: [{
     whiskers: {
       dashType: "dot"
     },
     type: "boxPlot",
     lowerField: "lower",
     q1Field: "q1",
     medianField: "median",
     q3Field: "q3",
     upperField: "upper",
     meanField: "mean",
     outliersField: "outliers"
  }]
});
</script>

series.whiskers.opacity

Number

The opacity of the whiskers.

Default: 1

<div id="chart"></div>
<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: [{
     whiskers: {
       opacity: 0.3
     },
     type: "boxPlot",
     lowerField: "lower",
     q1Field: "q1",
     medianField: "median",
     q3Field: "q3",
     upperField: "upper",
     meanField: "mean",
     outliersField: "outliers"
  }]
});
</script>

series.whiskers.width

Number

The width of the whiskers.

<div id="chart"></div>
<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: [{
     whiskers: {
       width: 3
     },
     type: "boxPlot",
     lowerField: "lower",
     q1Field: "q1",
     medianField: "median",
     q3Field: "q3",
     upperField: "upper",
     meanField: "mean",
     outliersField: "outliers"
  }]
});
</script>