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

SeriesDefaults

configuration

Default values for each series.

seriesDefaults

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value1: 100, value2: 80 },
            { date: new Date(2023, 1, 2), value1: 105, value2: 85 },
            { date: new Date(2023, 1, 3), value1: 98, value2: 90 }
        ]
    },
    categoryField: "date",
    seriesDefaults: {
        type: "line",
        opacity: 0.8,
        markers: {
            visible: true
        }
    },
    series: [
        { field: "value1", name: "Series 1" },
        { field: "value2", name: "Series 2" }
    ]
});
</script>

seriesDefaults.area

Object

The area configuration options. The default options for all area series. For more details see the series options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
          area: {
              color: "#ff0000",
              opacity: 0.5
          }
      },
    series: [{
        type: "area",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.border

Object

The border of the series.

<div id="stock-chart"></div>
<script>
 $("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         border: {
            color: "#ff0000",
            width: 5
        }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.candlestick

Object

The candlestick configuration options. The default options for all candlestick series. For more details see the series options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        candlestick: {
            gap: 0.5,
            spacing: 0.2
        }
    },
    series: [{
        type: "candlestick",
        data: [[new Date(2023, 0, 1), 100, 110, 95, 105]]
    }]
});
</script>

seriesDefaults.column

Object

The column configuration options. The default options for all column series. For more details see the series options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         column: {
           gap: 0.5,
           spacing: 0.2
         }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.gap

Number

The distance between category clusters.

Default: 1.5

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         column: {
           gap: 0.5,
         }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.labels

Object

Configures the series data labels.

pseudo

    $("#chart").kendoChart({
        seriesDefault: {
            // adjust the default label appearence for all series
            labels: {
                // set the margin on all sides to 1
                margin: 1,
                // format the labels as currency
                format: "C"
            }
        },
        //...
    });

seriesDefaults.legendItem

Object

The configuration of the Chart legend item for all series.

<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
  dataSource: {
    data: [{
      "Date": "2016/01/01",
      "Open": 41.62,
      "High": 41.69,
      "Low": 39.81,
      "Close": 40.12,
      "Volume": 2632000
    }, {
      "Date": "2016/03/01",
      "Open": 40.62,
      "High": 39.69,
      "Low": 40.81,
      "Close": 39.12,
      "Volume": 2631986
    }]
  },
  dateField: "Date",
  series: [{
    name: "Series 1",
    type: "candlestick",
    openField: "Open",
    highField: "High",
    lowField: "Low",
    closeField: "Close",
    legendItem: {
      type: "line"
    }
  }],
  legend: {
    visible: true,
    position: 'bottom'
  }
});
</script>

seriesDefaults.line

Object

The line configuration options. The default options for all line series. For more details see the series options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         line: {
            width: 3,
            dashType: "dash"
        }
      },
    series: [{
        type: "line",
      	color: "red",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.ohlc

Object

The ohlc configuration options. The default options for all ohlc series. For more details see the series options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        ohlc: {
            gap: 0.3,
            spacing: 0.1
        }
    },
    series: [{
        type: "ohlc",
        data: [[new Date(2023, 0, 1), 100, 110, 95, 105]]
    }]
});
</script>

seriesDefaults.overlay

Object

The effects overlay.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        overlay: {
            gradient: "glass"
        }
    },
    series: [{
        type: "column",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

seriesDefaults.spacing

Number

Space between bars.

Default: 0.4

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        spacing: 0.8
    },
    series: [{
        type: "column",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        stack: true
    },
    series: [{
        type: "column",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }, {
        type: "column", 
        data: [
            { date: new Date(2023, 0, 5), value: 30 },
            { date: new Date(2023, 0, 6), value: 20 },
            { date: new Date(2023, 0, 7), value: 45 }
        ],
    }]
});
</script>

seriesDefaults.tooltip

Object

The data point tooltip configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        tooltip: {
            visible: true,
            background: "#ff0000"
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

seriesDefaults.type

String

The default type of the series.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    seriesDefaults: {
        type: "area"
    },
    data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
    ],
});
</script>

The supported values are:

area
column
line
candlestick, ohlc
bullet

Related Members