seriesDefaults - API Reference - Kendo UI Chart

seriesDefaults.area

Object

The area chart series options. Accepts all values supported by the series option.

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

seriesDefaults.bar

Object

The bar chart series options. Accepts all values supported by the series option.

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

seriesDefaults.border

Object

The border of the series.

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

seriesDefaults.bubble

Object

The bubble chart series options. Accepts all values supported by the series option.

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

seriesDefaults.candlestick

Object

The candlestick chart series options. Accepts all values supported by the series option.

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

seriesDefaults.column

Object

The column chart series options. Accepts all values supported by the series option.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    column: {
      color: "red",
      opacity: 0.1
    }
  },
  series: [
    { type: "column", data: [3, 4] }
  ]
});
</script>

seriesDefaults.donut

Object

The donut chart series options. Accepts all values supported by the series option.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    donut: {
      color: "red",
      opacity: 0.1
    }
  },
  series: [
    { type: "donut",  data: [3, 4] }
  ]
});
</script>

seriesDefaults.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({
    seriesDefaults: {
      type: "funnel",
      dynamicHeight: false,
    },
    series: [
      {
        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>

seriesDefaults.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({
    seriesDefaults: {
      type: "funnel",
      dynamicSlope: true,
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
      },
    ],
  });
</script>

seriesDefaults.focusHighlight

Object

The focus highlight configuration options.

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

seriesDefaults.gap

Number

The distance between category clusters.

Default: 1.5

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

seriesDefaults.labels

Object

The chart series label configuration.

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

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

seriesDefaults.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
    },
    data: [1, 2, 3]
  }, {
    type: "line",
    name: "Series A",
    markers: {
      type: 'roundedRect',
      visible: true
    },
    data: [4, 5, 6]
  }],
  seriesDefaults: {
    legendItem: {
      type: "area"
    }
  }
});
</script>

seriesDefaults.line

Object

The line chart series options. Accepts all values supported by the series option.

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

seriesDefaults.notes

Object

The seriesDefaults notes configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        type: "column",
        data: [1, 2, 3],
        notes: {
            data: [{
                value: 2,
                text: "Peak"
            }]
        }
    }],
    seriesDefaults: {
        notes: {
            icon: {
                background: "#ff6800"
            }
        }
    }
});
</script>

seriesDefaults.ohlc

Object

The ohlc chart series options. Accepts all values supported by the series option.

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

seriesDefaults.overlay

Object

The chart series overlay options.

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

seriesDefaults.pie

Object

The pie chart series options. Accepts all values supported by the series option.

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

seriesDefaults.rangeArea

Object

The range area chart series options. Accepts all values supported by the series option.

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

seriesDefaults.scatter

Object

The scatter chart series options. Accepts all values supported by the series option.

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

seriesDefaults.scatterLine

Object

The scatterLine chart series options. Accepts all values supported by the series option.

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

seriesDefaults.spacing

Number

The space between the chart series as proportion of the series width.

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

Default: 0.4

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

seriesDefaults.stack

Boolean|Object

A boolean value indicating if the series should be stacked.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

Default: false

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

seriesDefaults.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({
  seriesDefaults: {
    startAngle: 180
  },
  series: [
    { type: "donut",  data: [1,2,3] }
  ]
});
</script>

seriesDefaults.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 seriesDefaults.type is set to "line", "scatterLine", "radarLine" or "polarLine".

The step value is only supported when seriesDefaults.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({
    seriesDefaults: {
      type: "line",
      style: "step",
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
      },
    ],
  });
</script>

seriesDefaults.tooltip

Object

The chart series tooltip configuration options.

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

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

seriesDefaults.type

String

The default type of the series.

The supported values are:

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

seriesDefaults.verticalArea

Object

The verticalArea chart series options. Accepts all values supported by the series option.

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

seriesDefaults.verticalLine

Object

The verticalLine chart series options. Accepts all values supported by the series option.

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

seriesDefaults.verticalRangeArea

Object

The verticalRangeArea chart series options. Accepts all values supported by the series option.

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

seriesDefaults.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({
    seriesDefaults: {
      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;
      }
    },
    series: [{
      data: [1, 2, 3]
    }]
  });
</script>

Related Members