series

Array

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

series.aggregate

String|Function

The aggregate function to apply for date series.

This function is used when a category (an year, month, etc.) contains two or more points.

Default: "max"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    aggregate: "avg",
    data: [
      { date: new Date("2012/01/01"), value: 1 },
      { date: new Date("2012/01/01"), value: 3 },
      { date: new Date("2012/01/02"), value: 2 }
    ]
  }],
  categoryAxis: {
    type: "date",
    field: "date"
  },
  valueAxis: {
    field: "value"
  }
});
</script>

The function return value is displayed instead of the individual points.

The supported values are:

"avg" - the average of all values for the date period.
"count" - the number of values for the date period.
"max" - the highest value for the date period.
"min" - the lowest value for the date period.
"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.
"sumOrNull" - the sum of all values for the date period. Defaults to null if no data points are defined.
"first" - the first value
function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.
object - (compound aggregate) Applicable to "candlestick", "boxPlot" and ohlc "series". Specifies the aggregate for each data item field.

Example - set the chart series aggregate

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/01/01"),
      new Date("2012/01/02"),
      new Date("2012/01/02")
    ],
    type: "date"
  },
  series: [{
      data: [1, 2, 3],
      aggregate: "avg"
  }]
});
</script>

Example - set the chart series aggregate using a function

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/01/01"),
      new Date("2012/01/02"),
      new Date("2012/01/02")
    ],
    type: "date"
  },
  series: [{
      data: [1, 2, 3],
      aggregate: function(values, series, dataItems, category) {
        // Two values with the same date(2 and 3), add them together and then divide them by the total number of values with the same category.
        let average = values.reduce((a, b) => a + b) / values.length;

        return average;
      }
  }]
});
</script>

series.autoFit

Boolean

If set to true, the Chart automatically scales down to fit the content area. Applicable for the Pie and Donut series.

The autoFit option is supported when series.type is set to "pie" or "donut".

Default: false

<div id="chart" style="width: 200px;"></div>
<script>
var data = [{
  kind: 'Solar', share: 0.052
}, {
  kind: 'Wind', share: 0.225
}, {
  kind: 'Other', share: 0.192
}, {
  kind: 'Hydroelectric', share: 0.175
}, {
  kind: 'Nuclear', share: 0.238
}, {
  kind: 'Coal', share: 0.118
}];

$("#chart").kendoChart({
  dataSource: { data: data },
  series: [{
      type: "pie",
      field: "share",
      categoryField: "kind",
      autoFit: true,
      labels: {
        color: "#000",
        position: "outsideEnd",
        template: "#: category #",
        visible: true
      }
  }],
  legend: {
    visible: false
  }
});
</script>

series.axis

String

The name of the value axis to use.

The axis option is supported for scatter plots. See xAxis and yAxis for scatter plots.

Default: "primary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [
    { name: "first" },
    { name: "second" }
  ],
  series: [
    { data: [800, 100, 300],  axis: "first" },
    { data: [1, 5],  axis: "second" }
  ]
});
</script>

series.border

Object

The border of the chart series.

The border option is supported when series.type is set to "bar", "column", "donut", "pie", "bubble", "boxPlot", "candlestick", "ohlc" or "candlestick".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      border: {
        width: 2,
        color: "black",
        dashType: "dash",
      },
      data: [1, 2]
    }
  ]
});
</script>

series.categoryAxis

String

The name of the category axis to use for the series.

The first axis will be used if no categoryAxis is specified.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [
    { name: "month", categories: [ "Jan", "Feb", "Mar" ] },
    { name: "year", categories: [ 2012 ] }
  ],
  series: [
    { categoryAxis: "month", data: [1, 2, 3] }
  ]
});
</script>

series.categoryField

String

The data item field which contains the category name or date.

The points will be rendered in chronological order if the category is a date.

Default: "category"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    categoryField: "type",
    data: [
      { value: 1, type: "Category 1" },
      { value: 2, type: "Category 2" },
    ]
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    categoryField: "date",
    data: [
      { value: 1, date: new Date(2012, 1, 1) },
      { value: 2, date: new Date(2012, 1, 2) },
    ]
  }]
});
</script>

series.closeField

String

The data field containing the close value.

The closeField option is supported when series.type is set to "candlestick" or "ohlc".

Default: "close"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "candlestick",
    closeField: "closePrice",
    data: [
      { open: 1, high: 2, low: 0.5, closePrice: 1.5 },
      { open: 2, high: 3, low: 1, closePrice: 1.5 }
    ]
  }]
});
</script>

series.color

String|Function

The series base color. The supported values are:

CSS color string, including hex and rgb
function(point) - user-defined function that will be evaluated for each point. Returning undefined will assume the default series color.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "#a0b0c0"
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "rgb(128, 0, 255)"
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: "red"
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: function(point) {
      if (point.value > 1) {
        return "red";
      }

      // use the default series theme color
    }
  }]
});
</script>

series.colorField

String

The data item field which contains the series color.

The colorField option is supported when series.type

is set to "bar", "column", "rangeBar", "rangeColumn", "bubble", "donut", "pie", "candlestick", "ohlc" or "waterfall".

Default: "color"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    colorField: "valueColor",
    data: [
     { value: 1, valueColor: "red" },
     { value: 2, valueColor: "green" }
    ]
  }]
});
</script>

series.connectors

Object

The label connectors options.

The connectors option is supported when series.type is set to "donut" or "pie" and

series.labels.visible is set to true.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "pie",
    labels: {
      visible: true
    },
    connectors: {
      width: 4,
      color: "red"
    },
    data: [1 , 2]
  }]
});
</script>

series.currentField

String

The data item field containing the current value.

The currentField option is supported when series.type is set to "bullet" or "verticalBullet".

Default: "current"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "bullet",
      currentField: "price",
      data: [
        { price: 1, target: 2 }
      ]
  }]
});
</script>

series.dashType

String

The dash type of line chart.

The dashType option is taken into consideration only if the series.type option is set to "line".

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({
  series: [{
      dashType: "dashDot",
      type: "line",
      data: [1, 2, 3]
  }]
});
</script>

series.data

Array

The array of data items which represent the series data.

Can be set to :

Array of objects. Each point is bound to the field specified via the series.field option.
Array of numbers. Supported when the series.type option is set to "area", "bar", "column", "donut", "pie", "line" or "waterfall".
Array of arrays of numbers. Supported when the series.type option is set to "bubble", "scatter", "scatterLine", "ohlc", "rangeBar", "rangeArea" or polar series.
- Bubble series need arrays of three values - X value, Y value and Size value e.g. [1, 1, 10]
- Scatter and scatter line series need arrays of two values - X value and Y value
- OHLC and candlestick series need arrays of four values - open, high, low and close
- RangeBar and RangeArea series need arrays of two values - the from and to value.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      field: "price",
      data: [
        { price: 1 },
        { price: 2 },
        { price: 3 }
      ]
    }
  ]
});
</script>

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

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

series.downColor

String|Function

The series color when the open value is greater than the close value.

The downColor option is supported when series.type is set to "candlestick".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "candlestick",
    downColor: "green",
    color: "red",
    data: [
      { open: 4, high: 5, low: 2, close: 3 },
      { open: 3, high: 5, low: 2, close: 4 }
    ]
  }]
});
</script>

series.downColorField

String

The data field containing the color applied when the open value is greater than the close value.

The downColorField option is supported when series.type is set to "candlestick".

Default: "downColor"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "candlestick",
    color: "red",
    downColorField:"down",
    data: [
      { open: 4, high: 5, low: 2, close: 3, down: "green" },
      { open: 3, high: 5, low: 2, close: 4 }
    ]
  }]
});
</script>

series.drilldownField

String

The data field which contains the value to use to drill down into detailed data for the point.

<nav id="breadcrumb"></nav>
<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      type: 'column',
      name: 'Total Sales By Company',
      field: 'sales',
      categoryField: 'company',
      drilldownField: 'details',
      data: [{
          company: 'Company A',
          sales: 100,
          details: {
              name: 'Company A Sales By Product',
              type: 'column',
              field: 'sales',
              categoryField: 'product',
              data: [{
                product: 'Product 1',
                sales: 80
              }, {
                product: 'Product 2',
                sales: 20
              }]
          }
      }, {
          company: 'Company B',
          sales: 200,
          details: {
              name: 'Company A Sales By Product',
              type: 'column',
              field: 'sales',
              categoryField: 'product',
              data: [{
                product: 'Product 1',
                sales: 40
              }, {
                product: 'Product 2',
                sales: 160
              }]
          }
      }]
    }]
  });

  $('#breadcrumb').kendoChartBreadcrumb({
    chart: "#chart"
  });
</script>

series.drilldownSeriesFactory

Function

A function that creates the drilldown series for a given point.

The function should accept a single parameter, the point drilldownField value. The function should return a series configuration object or a Promise that resolves to one.

Important - The function must return exactly one series object. Returning an array of series is not supported.

<nav id="breadcrumb"></nav>
<div id="chart"></div>
<script>
  var vehiclesByModel = {
    'Tesla': [{
      model: 'Model 3',
      count: 225350
    }, {
      model: 'Model Y',
      count: 40159
    }],
    'VW': [{
      model: 'ID.3',
      count: 60274
    }, {
      model: 'ID.4',
      count: 20302
    }]
  };

  var vehiclesByMake = [{
    company: 'Tesla',
    count: 314159
  }, {
    company: 'VW',
    count: 112645
  }];

  function drilldownByModel(make) {
    const data = vehiclesByModel[make];
    if (data) {
      return {
        type: 'column',
        name: make + ' Sales by Model',
        data,
        field: 'count',
        categoryField: 'model'
      };
    }
  };

  $("#chart").kendoChart({
    series: [{
      type: 'column',
      name: 'Battery EVs registered in 2022',
      data: vehiclesByMake,
      field: 'count',
      categoryField: 'company',
      drilldownField: 'company',
      drilldownSeriesFactory: drilldownByModel
    }]
  });

  $('#breadcrumb').kendoChartBreadcrumb({
    chart: "#chart"
  });
</script>

series.dynamicHeight

Boolean

The dynamicHeight option is supported when series.type is set to "funnel" or "pyramid".

When set to false all segments become with the same height, otherwise the height of each segment is based on its value.

Default: true

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "funnel",
      dynamicHeight: true,
      data: [
        { value: 2 }, //height of this segment is 10% of the whole chart
        { value: 4 }, //height of this segment is 20% of the whole chart
        { value: 14 } //height of this segment is 70% of the whole chart
      ]
    }
  ]
});
</script>

series.dynamicSlope

Boolean

The dynamicSlope option is supported when series.type is set to "funnel".

When set to true the ratio of the bases of each segment is calculated based on the ratio of currentDataItem.value/nextDataItem.value The last element is always created like a rectangle since there is no following element.

Default: false

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

series.errorBars

Object

The error bars of the chart series.

The errorBars option is supported when series.type is set to "bar", "column", "line", "area", "scatter", "scatterLine" or "bubble".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    data: [4.743, 7.295, 7.175, 6.376],
    errorBars: {
      value: "stderr"
    }
  }]
});
</script>

series.errorHighField

String

The data item field which contains the series.errorBars high value.

The errorHighField option is supported when series.type is set to "bar", "column", "line" or "area".

Default: "errorHigh"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorLowField: "low",
    errorHighField: "high",
    data: [{value: 4.743, low: 4.5, high: 5}, {value: 7.295, low: 7, high: 8}, {value: 6.376, low: 5, high: 6.5}]
  }]
});
</script>

series.errorLowField

String

The data item field which contains the series.errorBars low value.

The errorLowField option is supported when series.type is set to "bar", "column", "line" or "area".

Default: "errorLow"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorLowField: "low",
    errorHighField: "high",
    data: [{value: 4.743, low: 4.5, high: 5}, {value: 7.295, low: 7, high: 8}, {value: 6.376, low: 5, high: 6.5}]
  }]
});
</script>

series.explodeField

String

The data item field which contains a boolean value indicating whether the sector is exploded.

The explodeField option is supported when series.type is set to "donut" or "pie".

Default: "explode"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "pie",
      explodeField: "isExploded",
      data: [
        { value: 1, isExploded: true },
        { value: 2 }, // isExpaded is missing, "false" is asumed
        { value: 3, isExploded: false }
      ]
    }
  ]
});
</script>

series.extremes

Object

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

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

String

The data item field which contains the series value. The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

Default: "value"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { price: 1 },
      { price: 2 },
      { price: 3 }
    ]
  },
  series: [{
    field: "price"
  }]
});
</script>

series.focusHighlight

Object

The focus highlight configuration options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    focusHighlight: {
      border: {
        color: "red",
        width: 3
      }
    },
    data: [10, 15, 20]
  }]
});
</script>

series.for

String

The name of the parent series of the trendline.

The for option is supported when series.type is set to "linearTrendline", "exponentialTrendline", "logarithmicTrendline", "powerTrendline", "polynomialTrendline" or "movingAverageTrendline".

  <div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      {
          period: "2021 Q1",
          count: 669590.0
      },
      {
          period: "2021 Q2",
          count: 793564.0
      },
      {
          period: "2021 Q3",
          count: 941133.0
      },
      {
          period: "2021 Q4",
          count: 1133020.0
      },
    ]
  },
  series: [{
    name: "Sales By Quarter",
    type: "line",
    field: "count",
    categoryField: "period"
  }, {
    name: "Sales Trend (LINEAR)",
    type: "linearTrendline",
    for: "Sales By Quarter"
  }]
});
</script>

series.fromField

String

The data item field which contains the series from value.

Default: "min"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { from: 1, to: 5 },
      { from: 2, to: 6 },
      { from: 3, to: 7 }
    ]
  },
  series: [{
    fromField: "from"
  }]
});
</script>

series.gap

Number

The distance between categories expressed as a percentage of the bar width.

See the related spacing setting.

The gap option is supported when series.type is set to "bar", "column", "candlestick", "ohlc", "radarColumn" or "waterfall".

Default: 1.5

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    gap: 0,
    data: [1, 2]
  }]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    gap: -0.5,
    data: [1, 2]
  }]
});
</script>

series.highField

String

The data field containing the high value.

The highField option is supported when series.type is set to "candlestick" or "ohlc".

Default: "high"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "candlestick",
      highField: "highPrice",
      data: [
        { open: 1, highPrice: 2, low: 0.5, close: 1.5},
        { open: 2, highPrice: 3, low: 1, close: 1.5}
      ]
    }
  ]
});
</script>

series.highlight

Object

The chart series highlighting configuration options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
      type: "pie",
      data: [1, 2],
      highlight: {
        border: {
          opacity: 1,
          width: 5,
          color: "black"
        }
      }
  }]
});
</script>

series.holeSize

Number

The radius of the donut hole in pixels.

The holeSize option is supported when series.type is set to "donut".

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

series.labels

Object

The chart series label configuration.

The chart displays the series labels when the series.labels.visible option is set to true.

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

series.legendItem

Object

The configuration of the Chart legend item for this series.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    markers: {
      visible: true
    },
    legendItem: {
      type: "area"
    },
    data: [1, 2, 3]
  }, {
    type: "line",
    name: "Series A",
    markers: {
      type: 'roundedRect',
      visible: true
    },
    legendItem: {
      type: "area"
    },
    data: [4, 5, 6]
  }]
});
</script>

series.line

String|Object

The chart line configuration options.

The line option is supported when the series.type option is set to "area", "candlestick", "ohlc" or "waterfall".

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

series.lowField

String

The data field containing the low value.

The lowField option is supported when series.type is set to "candlestick" or "ohlc".

Default: "low"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "candlestick",
      openField: "open",
      closeField: "close",
      lowField: "lowPrice",
      highField: "high",
      data: [
        { open: 10, close: 12, lowPrice: 8, high: 15 },
        { open: 12, close: 11, lowPrice: 9, high: 14 }
      ]
    }
  ]
});
</script>

series.lowerField

String

The data item field which contains the series lower value.

Default: "lower"

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

series.margin

Number|Object

The margin around each donut series (ring). A numeric value will set all margins.

Default: 1

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

series.markers

Object

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

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

series.maxSize

Number

The maximum size of the chart bubble series marker.

Default: 100

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "bubble",
    maxSize: 40,
    data: [
      [1, 2, 3],
      [2, 3, 4]
    ]
  }]
});
</script>

series.mean

Object

The configuration of the Box Plot mean value indicator (line).

<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: [{
      type: "boxPlot",
      lowerField: "lower",
      q1Field: "q1",
      medianField: "median",
      q3Field: "q3",
      upperField: "upper",
      meanField: "mean",
      outliersField: "outliers",
      mean: {
        color: 'yellow',
        width: 20,
        opacity: 0.5,
        dashType: "dot"
      }
    }]
  });
</script>

series.meanField

String

The data item field which contains the series mean value.

Default: "mean"

js

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

series.median

Object

The configuration of the Box Plot median value indicator (line).

<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: [{
      type: "boxPlot",
      lowerField: "lower",
      q1Field: "q1",
      medianField: "median",
      q3Field: "q3",
      upperField: "upper",
      meanField: "mean",
      outliersField: "outliers",
      median: {
        color: 'yellow',
        width: 20,
        opacity: 0.5,
        dashType: "dot"
      }
    }]
  });
</script>

series.medianField

String

The data item field which contains the series median value.

Default: "median"

js

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

series.minSize

Number

The minimum size of the chart bubble series marker.

Default: 5

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "bubble",
    minSize: 40,
    data: [
      [1, 2, 3],
      [2, 3, 4]
    ]
  }]
});
</script>

series.missingValues

String

The behavior for handling missing values. The supported values are:

"gap" - the plot stops before the missing point and continues after it.
"interpolate" - the value is interpolated from neighboring points.
"zero" - the value is assumed to be zero.

The default value is "interpolate", except for "area" and stacked series which default to "zero".

The missingValues option is supported when series.type is set to "area", "rangeArea", "line", "scatterLine", "radarLine", "radarArea", "polarLine" or "polarArea".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    missingValues: "gap",
    data: [1, 3, null, 4, 5]
  }]
});
</script>

series.name

String

The name of the chart series which is visible in the legend.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { name: "Series 1", data: [1, 2] },
    { name: "Series 2", data: [2, 3] }
  ]
});
</script>

The name can also be a template which sets the name of the series when bound to grouped data source.

The fields which can be used in the template are:

series - the series options
group - the data group
group.field - the name of the field used for grouping
group.value - the field value for this group
group.items - the data items in this group

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { value: 1, category: "One", title: "Series One" },
      { value: 2, category: "Two", title: "Series Two" }
    ],
    group: { field: "category" }
  },
  series: [
    {
      field: "value",
      name: "Category: #: group.items[0].title #"
    }
  ]
});
</script>

series.neckRatio

Number

neckRatio specifies the ratio top-base/bottom-base of the whole chart. neckRatio set to three means the top base is three times smaller than the bottom base.

The neckRatio option is supported when series.type is set to "funnel" and dynamicSlope set to false.

Default: 0.3

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "funnel",
      neckRatio: 0.1, //bottom base becomes 10 times smaller than the bottom one
      data: [
        { value: 1 },
        { value: 2 },
        { value: 3 }
      ]
    }
  ]
});
</script>

series.negativeColor

String

The color to use for bar, column or waterfall series with negative values. Accepts a valid CSS color string, including hex and rgb.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    missingValues: "interpolate",
    data: [-1, 1, 2, -2],
    negativeColor: "green"
  }]
});
</script>

series.negativeValues

Object

The options for displaying the chart negative bubble values.

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

series.noteTextField

String

The data item field which contains the series note text.

Default: "noteText"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { price: 1, noteText: "A" },
      { price: 2 },
      { price: 3 }
    ]
  },
  series: [{
    field: "price",
    noteTextField: "noteText"
  }]
});
</script>

series.notes

Object

The series notes configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { value: 1, noteText: "Min value" },
      { value: 2, noteText: "" },
      { value: 3, noteText: "Max value" }
    ]
  },
  series: [{
    field: "value",
    noteTextField: "noteText",
    notes: {
      position: "top",
      icon: {
        background: "red"
      },
      label: {
        font: "12px Arial"
      }
    }
  }]
});
</script>

series.opacity

Number

The series opacity. By default the series are opaque.

Default: 1

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    opacity: 0.5,
    data: [ 1, 2, 3]
  }]
});
</script>

series.openField

String

The data field containing the open value.

The openField option is supported when series.type is set to "candlestick" or "ohlc".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "candlestick",
      openField: "openPrice",
      data: [
        { open: 1, high: 2, low: 0.5, openPrice: 1.5},
        { open: 2, high: 3, low: 1, openPrice: 1.5}
      ]
    }
  ]
});
</script>

series.outliers

Object

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

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

series.outliersField

String

The data item field which contains the series outliers value.

Default: "outliers"

js

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

series.overlay

Object

The chart series overlay options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    overlay: {
      gradient: "none"
    },
    data: [ 1, 2, 3]
  }]
});
</script>

series.padding

Number

The padding around the chart (equal on all sides).

The padding option is supported when series.type is set to "donut" or "pie".

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

series.pattern

Object

The configuration options of the series pattern.

The pattern inherits the series.color as main color and accepts an optional background color.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'crosshatch',
      background: 'rgba(170, 170, 170, 0.8)',
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.patternField

String

The data item field which contains the series pattern configuration for individual chart segments.

The patternField option is supported when series.type

is set to "pie", "donut", "funnel", "heatmap", or "pyramid".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "pie",
      field: "value",
      patternField: "pattern",
      startAngle: 120,
      data: [
        {
          value: 1,
          pattern: {
            type: "dots",
            radius: 60,
            gap: 50
          },
        },
        {
          value: 2,
          pattern: {
            type: "diagonalStripes",
          },
        },
      ],
    },
  ],
});
</script>

series.q1Field

String

The data item field which contains the series q1 value. This configuration is available only for box plot charts.

Default: "q1"

js

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

series.q3Field

String

The data item field which contains the series q3 value. This configuration is available only for box plot charts.

Default: "q3"

js

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

series.segmentSpacing

Number

The space in pixels between the different segments of the funnel and pyramid charts.

The segmentSpacing option is supported when series.type is set to "funnel" or "pyramid".

Default: 0

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "funnel",
      segmentSpacing: 20,
      data: [
        { value: 1 },
        { value: 2 },
        { value: 3 }
      ]
    }
  ]
});
</script>

series.size

Number

The or radius of the chart donut series in pixels. If not set, the available space is split evenly between the series.

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

series.sizeField

String

The data field containing the bubble size value.

Default: "size"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "bubble",
    sizeField: "price",
    data: [
      { x: 1, y: 2, price: 3 }
    ]
  }]
});
</script>

series.spacing

Number

The distance between series points within a category. Expressed as a percentage of the bar width.

See the related gap setting.

The spacing option is supported when series.type is set to "bar", "column", "candlestick", "ohlc" or "radarColumn".

Default: 0.4

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    spacing: 0
  },
  series: [{
    data: [1, 2, 3]
  }, {
    data: [1, 2, 3]
  }]
});
</script>

series.stack

Boolean|String|Object

A boolean value indicating if the series should be stacked. A string value is interpreted as series.stack.group.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" or "radarColumn". All series in the stack must be of the same type.

Stack settings of the first series are inherited as a default value by the rest of the series, in case they are not overridden.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { stack: true, data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
</script>

series.startAngle

Number

The start angle (degrees) of the first donut or pie segment.

Angles increase clockwise and zero is to the left. Negative values are acceptable.

Default: 90

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

series.style

String

The supported values are:

"normal" - The values will be connected with straight line.
"step" - The values will be connected with a line with right angle.
"smooth" - The values will be connected with a smooth line.

The default value is "normal".

The style option is supported when series.type is set to "line", "scatterLine", "radarLine" or "polarLine".

The step value is only supported when series.type is set to "line".

The smooth options is not supported for stacked area series with missing values.

Default: "normal"

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

series.summaryField

String

The data item field which contains the summary type for waterfall series. Summary columns are optional and can be one of two types:

"runningTotal" - Displays the sum of all items since the last "runningTotal" point.
"total" - Displays the sum of all previous items.

The value, if any, of a data item marked as a summary point will be discarded.

Default: "summary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "waterfall",
    data: [{
        value: 100
    }, {
        value: -20
    }, {
        type: "runningTotal"
    }, {
        value: 50
    }, {
        type: "total"
    }]
  }]
});
</script>

series.target

Object

The configuration options of the target

The target option is supported when series.type is set to "bullet" or "verticalBullet".

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

series.targetField

String

The data item field containing the target value.

The currentField option is supported when series.type is set to "bullet" or "verticalBullet".

Default: "target"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "bullet",
      targetField: "price",
      data: [
        { current: 1, price: 2 }
      ]
    }
  ]
});
</script>

series.toField

String

The data item field which contains the series to value.

Default: "max"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { from: 1, to: 5 },
      { from: 2, to: 6 },
      { from: 3, to: 7 }
    ]
  },
  series: [{
    toField: "to"
  }]
});
</script>

series.tooltip

Object

The chart series tooltip configuration options.

The chart series tooltip is displayed when the series.tooltip.visible option is set to true.

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

series.trendline

Object

The trendline configuration options.

The trendline option is supported when series.type is set to "linearTrendline", "exponentialTrendline", "logarithmicTrendline", "powerTrendline", "polynomialTrendline" or "movingAverageTrendline".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      {
          period: "2021 Q1",
          count: 669590.0
      },
      {
          period: "2021 Q2",
          count: 793564.0
      },
      {
          period: "2021 Q3",
          count: 941133.0
      },
      {
          period: "2021 Q4",
          count: 1133020.0
      }
    ]
  },
  series: [{
    name: "Sales By Quarter",
    type: "line",
    field: "count",
    categoryField: "period"
  }, {
    name: "Average",
    type: "movingAverageTrendline",
    for: "Sales By Quarter",
    trendline: {
      period: 3
    }
  }]
});
</script>

series.type

String

The type of the series.

The supported values are:

Different chart types expect data in specific formats:

Simple values: [1, 2, 3, 4] - Line, Area, Column, Bar
Category-value objects: [{category: "A", value: 10}] - Pie, Donut, Funnel, Pyramid
Two-value arrays: [[x, y], [x, y]] - Scatter, Range charts
Three-value arrays: [[x, y, size]] - Bubble charts
Four-value arrays: [[open, high, low, close]] - Candlestick, OHLC
Five-value arrays: [[min, q1, median, q3, max]] - Box Plot
Target-current objects: [{current: 750, target: 1000}] - Bullet charts

Default: "column"

<div id="area-chart"></div>
<script>
$("#area-chart").kendoChart({
  series: [{
    type: "area",
    data: [1, 2, 3, 4, 5]
  }],
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"]
  }
});
</script>

<div id="bar-chart"></div>
<script>
$("#bar-chart").kendoChart({
  series: [{
    type: "bar", 
    data: [10, 20, 30, 40, 50]
  }],
  categoryAxis: {
    categories: ["A", "B", "C", "D", "E"]
  }
});
</script>

<div id="bubble-chart"></div>
<script>
$("#bubble-chart").kendoChart({
  series: [{
    type: "bubble",
    data: [
      [10, 20, 5], 
      [15, 25, 8], 
      [20, 30, 12]
    ]
  }],
  xAxis: { title: { text: "X Values" } },
  yAxis: { title: { text: "Y Values" } }
});
</script>

<div id="bullet-chart"></div>
<script>
$("#bullet-chart").kendoChart({
  series: [{
    type: "bullet",
    data: [
      { current: 750, target: 1000 },
      { current: 650, target: 900 }
    ]
  }],
  categoryAxis: {
    categories: ["Product A", "Product B"]
  }
});
</script>

<div id="candlestick-chart"></div>
<script>
$("#candlestick-chart").kendoChart({
  series: [{
    type: "candlestick",
    data: [
      [100, 110, 95, 105],
      [105, 115, 100, 110],
      [110, 120, 105, 115]
    ]
  }],
  categoryAxis: {
    categories: ["Day 1", "Day 2", "Day 3"]
  }
});
</script>

<div id="column-chart"></div>
<script>
$("#column-chart").kendoChart({
  series: [{
    type: "column",
    data: [5, 10, 15, 20, 25]
  }],
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4", "Q5"]
  }
});
</script>

<div id="donut-chart"></div>
<script>
$("#donut-chart").kendoChart({
  series: [{
    type: "donut",
    data: [
      { category: "Desktop", value: 40 },
      { category: "Mobile", value: 35 },
      { category: "Tablet", value: 25 }
    ]
  }]
});
</script>

<div id="exponential-trendline-chart"></div>
<script>
$("#exponential-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "column",
    data: [2, 4, 8, 16, 32]
  }, {
    type: "exponentialTrendline",
    for: "series1"
  }],
  categoryAxis: {
    categories: ["1", "2", "3", "4", "5"]
  }
});
</script>

<div id="funnel-chart"></div>
<script>
$("#funnel-chart").kendoChart({
  series: [{
    type: "funnel",
    data: [
      { category: "Visitors", value: 1000 },
      { category: "Leads", value: 500 },
      { category: "Customers", value: 100 }
    ]
  }]
});
</script>

<div id="heatmap-chart"></div>
<script>
$("#heatmap-chart").kendoChart({
  series: [{
    type: "heatmap",
    data: [
      ["A", "X", 10],
      ["A", "Y", 20],
      ["B", "X", 15],
      ["B", "Y", 25]
    ]
  }],
  xAxis: {
    categories: ["A", "B"]
  },
  yAxis: {
    categories: ["X", "Y"] 
  }
});
</script>

<div id="horizontal-waterfall-chart"></div>
<script>
$("#horizontal-waterfall-chart").kendoChart({
  series: [{
    type: "horizontalWaterfall",
    data: [100, 50, -30, 20, -10]
  }],
  categoryAxis: {
    categories: ["Start", "+Revenue", "-Costs", "+Profit", "-Loss"]
  }
});
</script>

<div id="line-chart"></div>
<script>
$("#line-chart").kendoChart({
  series: [{
    type: "line",
    data: [2, 4, 6, 8, 10]
  }],
  categoryAxis: {
    categories: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"]
  }
});
</script>

<div id="linear-trendline-chart"></div>
<script>
$("#linear-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "column",
    data: [10, 15, 12, 18, 20]
  }, {
    type: "linearTrendline",
    for: "series1"
  }],
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May"]
  }
});
</script>

<div id="logarithmic-trendline-chart"></div>
<script>
$("#logarithmic-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "scatter",
    data: [[1, 0], [10, 1], [100, 2], [1000, 3]]
  }, {
    type: "logarithmicTrendline",
    for: "series1"
  }],
  xAxis: { type: "log" },
  yAxis: { type: "numeric" }
});
</script>

<div id="moving-average-trendline-chart"></div>
<script>
$("#moving-average-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "column",
    data: [10, 12, 8, 15, 18, 14, 16, 20, 25, 22]
  }, {
    type: "movingAverageTrendline",
    for: "series1",
    period: 3
  }],
  categoryAxis: {
    categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  }
});
</script>

<div id="ohlc-chart"></div>
<script>
$("#ohlc-chart").kendoChart({
  series: [{
    type: "ohlc",
    data: [
      [100, 110, 95, 105],
      [105, 115, 100, 110],
      [110, 120, 105, 115]
    ]
  }],
  categoryAxis: {
    categories: ["Period 1", "Period 2", "Period 3"]
  }
});
</script>

<div id="pie-chart"></div>
<script>
$("#pie-chart").kendoChart({
  series: [{
    type: "pie",
    data: [
      { category: "Chrome", value: 65 },
      { category: "Firefox", value: 20 },
      { category: "Safari", value: 15 }
    ]
  }]
});
</script>

<div id="polar-area-chart"></div>
<script>
$("#polar-area-chart").kendoChart({
  series: [{
    type: "polarArea",
    data: [
      [10, 10],
      [30, 20],
      [50, 30],
      [70, 20],
      [90, 10]
    ]
  }]
});
</script>

<div id="polar-line-chart"></div>
<script>
$("#polar-line-chart").kendoChart({
  series: [{
    type: "polarLine",
    data: [
      [0, 0],
      [15, 2],
      [30, 4],
      [45, 6],
      [60, 8]
    ]
  }]
});
</script>

<div id="polar-scatter-chart"></div>
<script>
$("#polar-scatter-chart").kendoChart({
  series: [{
    type: "polarScatter",
    data: [
      [0, 10], 
      [90, 20], 
      [180, 15], 
      [270, 25]
    ]
  }]
});
</script>

<div id="polynomial-trendline-chart"></div>
<script>
$("#polynomial-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "column",
    data: [1, 4, 9, 16, 25, 16, 9, 4, 1]
  }, {
    type: "polynomialTrendline",
    for: "series1",
    order: 2
  }],
  categoryAxis: {
    categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
  }
});
</script>

<div id="power-trendline-chart"></div>
<script>
$("#power-trendline-chart").kendoChart({
  series: [{
    name: "series1",
    type: "scatter",
    data: [[1, 1], [2, 4], [3, 9], [4, 16]]
  }, {
    type: "powerTrendline",
    for: "series1"
  }],
  xAxis: { title: { text: "X" } },
  yAxis: { title: { text: "X²" } }
});
</script>

<div id="pyramid-chart"></div>
<script>
$("#pyramid-chart").kendoChart({
  series: [{
    type: "pyramid",
    data: [
      { category: "Level 1", value: 100 },
      { category: "Level 2", value: 75 },
      { category: "Level 3", value: 50 }
    ]
  }]
});
</script>

<div id="radar-area-chart"></div>
<script>
$("#radar-area-chart").kendoChart({
  series: [{
    type: "radarArea",
    data: [10, 15, 20, 25, 30]
  }],
  categoryAxis: {
    categories: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"]
  }
});
</script>

<div id="radar-column-chart"></div>
<script>
$("#radar-column-chart").kendoChart({
  series: [{
    type: "radarColumn",
    data: [5, 10, 15, 20, 12]
  }],
  categoryAxis: {
    categories: ["A", "B", "C", "D", "E"]
  }
});
</script>

<div id="radar-line-chart"></div>
<script>
$("#radar-line-chart").kendoChart({
  series: [{
    type: "radarLine",
    data: [8, 12, 16, 20, 14]
  }],
  categoryAxis: {
    categories: ["Performance", "Quality", "Design", "Value", "Support"]
  }
});
</script>

<div id="range-area-chart"></div>
<script>
$("#range-area-chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      [5, 15], 
      [10, 25], 
      [15, 35], 
      [20, 40]
    ]
  }],
  categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr"]
  }
});
</script>

<div id="range-bar-chart"></div>
<script>
$("#range-bar-chart").kendoChart({
  series: [{
    type: "rangeBar",
    data: [
      [10, 30], 
      [15, 35], 
      [20, 50], 
      [25, 45]
    ]
  }],
  categoryAxis: {
    categories: ["Product A", "Product B", "Product C", "Product D"]
  }
});
</script>

<div id="range-column-chart"></div>
<script>
$("#range-column-chart").kendoChart({
  series: [{
    type: "rangeColumn",
    data: [
      [20, 40], 
      [25, 50], 
      [30, 60], 
      [35, 65]
    ]
  }],
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"]
  }
});
</script>

<div id="scatter-chart"></div>
<script>
$("#scatter-chart").kendoChart({
  series: [{
    type: "scatter",
    data: [
      [10, 20], 
      [15, 25], 
      [20, 30], 
      [25, 35]
    ]
  }],
  xAxis: { title: { text: "X Axis" } },
  yAxis: { title: { text: "Y Axis" } }
});
</script>

<div id="scatterline-chart"></div>
<script>
$("#scatterline-chart").kendoChart({
  series: [{
    type: "scatterLine",
    data: [
      [1, 10], 
      [2, 20], 
      [3, 30], 
      [4, 25]
    ]
  }],
  xAxis: { title: { text: "X Values" } },
  yAxis: { title: { text: "Y Values" } }
});
</script>

<div id="vertical-area-chart"></div>
<script>
$("#vertical-area-chart").kendoChart({
  series: [{
    type: "verticalArea",
    data: [10, 20, 30, 25, 15]
  }],
  categoryAxis: {
    categories: ["A", "B", "C", "D", "E"]
  }
});
</script>

<div id="vertical-boxplot-chart"></div>
<script>
$("#vertical-boxplot-chart").kendoChart({
  series: [{
    type: "verticalBoxPlot",
    data: [
      [5, 15, 20, 25, 35],
      [10, 18, 25, 30, 40]
    ]
  }],
  categoryAxis: {
    categories: ["Dataset 1", "Dataset 2"]
  }
});
</script>

<div id="vertical-bullet-chart"></div>
<script>
$("#vertical-bullet-chart").kendoChart({
  series: [{
    type: "verticalBullet",
    data: [
      { current: 750, target: 1000 },
      { current: 650, target: 900 }
    ]
  }],
  categoryAxis: {
    categories: ["Metric A", "Metric B"]
  }
});
</script>

<div id="vertical-line-chart"></div>
<script>
$("#vertical-line-chart").kendoChart({
  series: [{
    type: "verticalLine",
    data: [5, 10, 15, 20, 25]
  }],
  categoryAxis: {
    categories: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5"]
  }
});
</script>

<div id="vertical-range-area-chart"></div>
<script>
$("#vertical-range-area-chart").kendoChart({
  series: [{
    type: "verticalRangeArea",
    data: [
      [10, 25], 
      [15, 30], 
      [20, 35], 
      [25, 40]
    ]
  }],
  categoryAxis: {
    categories: ["Period 1", "Period 2", "Period 3", "Period 4"]
  }
});
</script>

<div id="waterfall-chart"></div>
<script>
$("#waterfall-chart").kendoChart({
  series: [{
    type: "waterfall",
    data: [100, 50, -30, 20, -10]
  }],
  categoryAxis: {
    categories: ["Start", "+Income", "-Expenses", "+Bonus", "-Tax"]
  }
});
</script>

series.upperField

String

The data item field which contains the series upper value.

Default: "upper"

js

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

series.visible

Boolean

Sets the visible property of a chart series

Default: true

<div id="chart"></div>
<script>
    var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/stockdata",
          contentType: "application/json"
        }
      }
    });
    $("#chart").kendoChart({
        dataSource: dataSource,
        series: [
            { field: "High", visible: false },
      	    { field: "Low", visible: true }
        ]
    });
</script>

series.visibleInLegend

Boolean

A value indicating whether to show the point category name (for funnel, pyramid, donut and pie series) or series name (for other available series types) in the legend.

Default: true

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

series.visibleInLegendField

String

The data item field which indicates whether to show the point category name in the legend.

The visibleInLegendField option is supported when series.type is set to "funnel", "pyramid", "donut" or "pie".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  dataSource: {
    data: [
      { value: 1, category: "firstValue", visible: false },
      { value: 2, category: "secondValue", visible: true }
    ]
  },
  series: [{
    type: "pie",
    field: "value",
    visibleInLegendField: "visible"
  }]
});
</script>

series.visual

Function

A function that can be used to create a custom visual for the points. Applicable for bar, column, pie, donut, funnel, pyramid, line, scatterLine, rangeBar, rangeColumn and waterfall series. The available argument fields are:

rect - the kendo.geometry.Rect that defines where the visual should be rendered.
options - the point options.
createVisual - a function that can be used to get the default visual.
category - the point category.
dataItem - the point dataItem.
value - the point value.
stackValue - the cumulative point value on the stack. Available only for stackable series.
sender - the chart instance.
series - the point series.
percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
total - the sum of all previous series values. Available for waterfall series.
radius - the segment radius. Available for donut and pie series.
innerRadius - the segment inner radius. Available for donut series.
startAngle - the segment start angle. Available for donut and pie series.
endAngle - the segment end angle. Available for donut and pie series.
center - the segment center point. Available for donut and pie series.
points - the segment points. Available for funnel, pyramid, line and scatterLine series.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3],
      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.color
          }
        })
        .moveTo(origin.x, bottomRight.y)
        .lineTo(bottomRight.x, bottomRight.y)
        .lineTo(center.x, origin.y)
        .close();

        return path;
      }
    }]
  });
</script>

series.whiskers

Object

The chart series whiskers configuration.

The appearance settings for the BoxPlot whiskers.

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

Number

The line width.

The width option is supported when series.type is set to "line", "scatterLine", "radarLine" or "polarLine".

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

series.xAxis

String

The name of the X axis to use.

The xAxis option is supported when series.type is set to "bubble", "scatter", "scatterLine" or polar series.

For polar series the xAxis range is expressed in degrees.

Default: "primary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: [
    { name: "primaryX", categories: ["A", "B", "C"] },
    { name: "secondaryX", categories: ["X", "Y", "Z"] }
  ],
  series: [
    {
      type: "scatter",
      xAxis: "primaryX",
      data: [[1, 2], [2, 3], [3, 4]]
    },
    {
      type: "scatter", 
      xAxis: "secondaryX",
      data: [[0, 1], [1, 2], [2, 3]]
    }
  ]
});
</script>

series.xErrorHighField

String

The data item field which contains the series.errorBars xAxis high value.

The xErrorHighField option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

Default: "xErrorHigh"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    xErrorLowField: "low",
    xErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 5, high: 7}, {x: 1.7, y: 11, low: 1, high: 3}, {x: 5.4, y: 8, low: 3, high: 6}]
  }]
});
</script>

series.xErrorLowField

String

The data item field which contains the series.errorBars xAxis low value.

The xErrorLowField option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

Default: "xErrorLow"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    xErrorLowField: "low",
    xErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 5, high: 7}, {x: 1.7, y: 11, low: 1, high: 3}, {x: 5.4, y: 8, low: 3, high: 6}]
  }]
});
</script>

series.xField

String

The data item field containing the X value.

The xField option is supported when series.type is set to "bubble", "scatter", "scatterLine" or polar series.

Default: "x"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "bubble",
    xField: "price",
    data: [
      { price: 1, y: 2, size: 3 }
    ]
  }]
});
</script>

series.yAxis

String

The name of the Y axis to use.

** Available for bubble, scatter, scatterLine and polar series. **

Default: "primary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  yAxis: [
    { name: "primaryY" },
    { name: "secondaryY" }
  ],
  series: [
    {
      type: "scatter",
      yAxis: "primaryY",
      data: [[1, 2], [2, 3], [3, 4]]
    },
    {
      type: "scatter",
      yAxis: "secondaryY", 
      data: [[1, 10], [2, 15], [3, 20]]
    }
  ]
});
</script>

series.yErrorHighField

String

The data item field which contains the series.errorBars yAxis high value.

The yErrorHighField option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

Default: "yErrorHigh"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    yErrorLowField: "low",
    yErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 12, high: 14}, {x: 1.7, y: 11, low: 11, high: 14}, {x: 5.4, y: 8, low: 5, high: 8}]
  }]
});
</script>

series.yErrorLowField

String

The data item field which contains the series.errorBars yAxis low value.

The yErrorLowField option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

Default: "yErrorLow"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    yErrorLowField: "low",
    yErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 12, high: 14}, {x: 1.7, y: 11, low: 11, high: 14}, {x: 5.4, y: 8, low: 5, high: 8}]
  }]
});
</script>

series.yField

String

The data item field containing the Y value.

The yField option is supported when series.type is set to "bubble", "scatter" or "scatterLine".

Default: "y"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "bubble",
    yField: "price",
    data: [
      { x: 1, price: 2, size: 3 }
    ]
  }]
});
</script>

series.zIndex

Number

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

The series with the highest Z-index will be placed on top.

Series with no Z-index will use the default stacking order based on series type. For example line series will be on top with bar and area following below.

<div id="chart"></div>
<script>
    $("#chart").kendoChart({
      series: [{
        type: "column",
        zIndex: 1,
        color: "grey",
        data: [1, 2, 1]
      }, {
        type: "column",
        color: "blue",
        zIndex: 3,
        data: [2, 2, 2]
      }, {
        type: "area",
        color: "red",
        zIndex: 2,
        data: [0, 2, 0]
      }]
    });
</script>

Related Members