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

Series

configuration

Array of series definitions.

The series type is determined by the value of the type field. If a type value is missing, the type is assumed to be the one specified in seriesDefaults.

Each series type has a different set of options.

Info: Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.

series

Array

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41,
            high: 43,
            low: 39,
            open: 40,
            volume: 2632000
        }, {
            date: new Date(2016, 0, 2),
            close: 42,
            high: 44,
            low: 40,
            open: 41,
            volume: 2631000
        }]
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        name: "Price"
    }, {
        type: "column",
        field: "volume",
        name: "Volume",
    }]
});
</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. The function return value is displayed instead of the individual points.

Default: "max"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 },
            { date: new Date(2000, 1, 3), open: 16, high: 20, low: 14, close: 18 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        aggregate: "max"
    }]
});
</script>

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" and ohlc "series". Specifies the aggregate for each data item field.

Example

pseudo

    aggregate: {
        open: "max",
        high: "max",
        close: "min",
        low: "max"
    }

series.axis

String

The name of the value axis to use.

** Applicable to area, column, line, ohlc and candlestick series **

Default: "primary"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    valueAxis: [
        { name: "primary" },
        { name: "secondary" }
    ],
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        axis: "primary"
    }]
});
</script>

series.border

Object

The border of the points.

** Applicable to column, ohlc and candlestick series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        border: {
            color: "red",
            width: 2,
            dashType: "solid"
        }
    }]
});
</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.

If specified, the dateField option is used as a default.

Default: "category"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    series: [{
      type: "line",
      field: "value",
      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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

** Available for candlestick and ohlc series only **

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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: "#ff0000"
    }]
});
</script>

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2012-03-01 00:00"),
            price: 111
        }, {
            date: new Date("2012-03-02 00:00"),
            price: 121
        }, {
            date: new Date("2012-03-05 00:00"),
            price: 95
        }]
    },
    dateField: "date",
    series: [{
        type: "column",
        field: "price",
        color: function(point) {
            if (point.value < 100) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
        }
    }]
});
</script>

series.colorField

String

The data field containing the point color.

** Applicable for column, candlestick and ohlc series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
        series: [
          {
            type: "candlestick",
            colorField: "color",
            labels: {
              visible: true,
              format: "{0}",
            },
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
                color: "#f44336",
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
                color: "#4caf50",
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
                color: "#2196f3",
              },
              
            ],
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date",
            name: "Stock Price",
            color: "#03a9f4",
            downColor: "#f44336",
          },
        ],
        navigator: {
          series: {
            type: "line",
            data: [
              {
                date: new Date(2024, 0, 1),
                open: 150.25,
                high: 152.8,
                low: 149.5,
                close: 152.3,
              },
              {
                date: new Date(2024, 0, 2),
                open: 152.5,
                high: 154.2,
                low: 151.8,
                close: 153.75,
              },
              {
                date: new Date(2024, 0, 3),
                open: 153.8,
                high: 155.4,
                low: 152.9,
                close: 154.2,
              },
              
            ],
            field: "close",
            dateField: "date",
            color: "#ff9800",
          },
        },
      });
</script>

series.currentField

String

The data field containing the current value.

** Available for bullet and verticalBullet series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            current: 41,
            target: 45
        }, {
            date: new Date(2016, 0, 2),
            current: 42,
            target: 46
        }]
    },
    series: [{
        type: "bullet",
        currentField: "current",
        targetField: "target",
        name: "Performance"
    }]
});
</script>

series.dashType

String

The series line dash type.

** Applicable only to line series **

"solid"

Specifies a solid line.

"dot"

Specifies a line consisting of dots.

"dash"

Specifies a line consisting of dashes.

"longDash"

Specifies a line consisting of a repeating pattern of long-dash.

"dashDot"

Specifies a line consisting of a repeating pattern of dash-dot.

"longDashDot"

Specifies a line consisting of a repeating pattern of long-dash-dot.

"longDashDotDot"

Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

Default: "solid"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        type: "line",
        field: "close",
        name: "Price",
        dashType: "dash"
    }]
});
</script>

series.data

Array

Array of data items. The data item type can be either a:

Array of objects. Each point is bound to the specified series fields.
Array of numbers. Available for area, column and line series.
Array of arrays of numbers. Available for:
- OHLC and candlestick series (open, high, low, close)

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    series: [{
        type: "line",
        data: [
            { date: new Date(2016, 0, 1), close: 41 },
            { date: new Date(2016, 0, 2), close: 42 },
            { date: new Date(2016, 0, 3), close: 43 }
        ],
        field: "close",
        categoryField: "date",
        name: "Price"
    }]
});
</script>

series.downColor

String|Function

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 18, high: 20, low: 16, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        downColor: "red"
    }]
});
</script>

** Available for candlestick series only **

series.downColorField

String

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

** Available for candlestick series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12, downColor: "red" },
            { date: new Date(2000, 1, 2), open: 18, high: 20, low: 16, close: 16, downColor: "blue" }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        downColorField: "downColor"
    }]
});
</script>

series.field

String

The data field containing the series value.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            price: 41
        }, {
            date: new Date(2016, 0, 2),
            price: 42
        }]
    },
    series: [{
        type: "line",
        field: "price",
        name: "Stock Price"
    }]
});
</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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2021-01-01"),
            price: 111
        }, {
            date: new Date("2021-04-01"),
            price: 121
        }, {
            date: new Date("2021-07-01"),
            price: 105
        }, {
            date: new Date("2021-10-01"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        name: "Price",
        type: "line",
        field: "price"
    }, {
        name: "Trend (LINEAR)",
        type: "linearTrendline",
        for: "Price"
    }],
    legend: {
        visible: true,
        position: 'bottom'
    }
});
</script>

series.gap

Number

The distance between category clusters.

** Applicable for column, candlestick and ohlc series. **

Default: 1.5

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        gap: 2
    }]
});
</script>

series.highField

String

The data field containing the high value.

** Available for candlestick and ohlc series only **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            high: 43,
            low: 39,
            open: 40,
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            high: 44,
            low: 40,
            open: 41,
            close: 42
        }]
    },
    series: [{
        type: "candlestick",
        highField: "high",
        lowField: "low",
        openField: "open",
        closeField: "close",
        name: "Price"
    }]
});
</script>

series.highlight

Object

Configures the appearance of highlighted points.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        type: "line",
        field: "close",
        name: "Price",
        highlight: {
            visible: true,
            color: "red",
            opacity: 0.8
        }
    }]
});
</script>

series.labels

Object

Configures the series data labels.

"circle"

The labels are positioned in circle around the chart.

"column"

The labels are positioned in columns to the left and right of the chart.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            background: "yellow",
            color: "black"
        }
    }]
});
</script>

series.legendItem

Object

The configuration of the Chart legend item for this 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>

series.line

String | Object

Line options.

** Applicable to area, candlestick and ohlc series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        line: {
            color: "#ff6800",
            width: 2
        }
    }]
});
</script>

series.lowField

String

The data field containing the low value.

** Available for candlestick and ohlc series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

series.markers

Object

Marker options.

** Applicable for area and line series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        markers: {
            visible: true,
            background: "#ff6800",
            size: 8
        }
    }]
});
</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" and "line".

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: null },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        missingValues: "gap"
    }]
});
</script>

series.name

String

The series name visible in the legend.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  series: [
    {
      field: "value",
      name: "Value"
    }
  ],
  legend: {
    visible: true,
    position: "bottom"
  }
});
</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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  series: [
    {
      field: "value",
      name: "Category: #: group.value #"
    }
  ],
  legend: {
    visible: true,
    position: "bottom"
  }
});
</script>

series.negativeColor

String

Color to use for bars with negative values.

** Applicable only to column series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: -50 },
            { date: new Date(2023, 1, 3), value: 80 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "column",
        field: "value",
        negativeColor: "#ff0000"
    }]
});
</script>

The plot stops before the missing point and continues after it.

series.notes

Object

The series notes configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        field: "value",
        notes: {
            data: [{
                value: 41,
                position: "top"
            }]
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.opacity

Number

The series opacity.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "area",
        field: "value",
        opacity: 0.7
    }]
});
</script>

series.openField

String

The data field containing the open value.

** Available for candlestick and ohlc series **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

series.overlay

Object

The effects overlay.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        overlay: {
            gradient: "glass"
        }
    }]
});
</script>

series.spacing

Number

Space between points as proportion of the point width.

Available for column, candlestick and ohlc series.

Default: 0.4

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", open: 40, high: 45, low: 38, close: 42 },
            { date: "2013/01/02", open: 42, high: 48, low: 40, close: 45 }
        ]
    },
    series: [{
        type: "column",
        field: "close",
        spacing: 0.8
    }],
    categoryAxis: {
        field: "date"
    }
});
</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" and "radarColumn".

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value1: 40, value2: 20 },
            { date: "2013/01/02", value1: 42, value2: 25 }
        ]
    },
    series: [{
        type: "column",
        field: "value1",
        stack: true
    }, {
        type: "column", 
        field: "value2",
        stack: true
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

Stack settings of the first series are applied to the rest of the series.

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

Default: "normal"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "line",
        field: "value",
        style: "smooth"
    }]
});
</script>

series.target

Object

The target of the bullet chart.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40, target: 45 },
            { date: "2013/01/02", value: 42, target: 48 }
        ]
    },
    series: [{
        type: "bullet",
        field: "value",
        target: {
            field: "target",
            color: "red"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.targetField

String

The data field containing the target value.

** Available for bullet and verticalBullet series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            current: 41,
            target: 45
        }, {
            date: new Date(2016, 0, 2),
            current: 42,
            target: 46
        }]
    },
    series: [{
        type: "bullet",
        currentField: "current",
        targetField: "target",
        name: "Performance"
    }]
});
</script>

series.tooltip

Object

The data point tooltip configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", open: 40, high: 45, low: 38, close: 42 },
            { date: "2013/01/02", open: 42, high: 48, low: 40, close: 45 }
        ]
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        tooltip: {
            background: "yellow",
            color: "black",
            visible: true
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.trendline

Object

The trendline configuration options.

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

  <div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2021-01-01"),
            price: 111
        }, {
            date: new Date("2021-04-01"),
            price: 121
        }, {
            date: new Date("2021-07-01"),
            price: 105
        }, {
            date: new Date("2021-10-01"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        name: "Price",
        type: "line",
        field: "price"
    }, {
        name: "Average",
        type: "movingAverageTrendline",
        for: "Price",
        trendline: {
          period: 3
        }
    }],
    legend: {
        visible: true,
        position: 'bottom'
    }
});
</script>

series.type

String

The type of the series. Available types:

area
candlestick
column
exponentialTrendline
line
linearTrendline
logarithmicTrendline
movingAverageTrendline
ohlc
polynomialTrendline
powerTrendline

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        type: "line",
        field: "close",
        name: "Price"
    }]
});
</script>

series.visibleInLegend

Boolean

A value indicating whether to show the series name in the legend.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    legend: {
        visible: true
    },
    series: [{
        name: "Value",
        field: "value",
        visibleInLegend: false
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

series.width

Number

The line width.

** Applicable for area and line series. **

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value: 40 },
            { date: "2013/01/02", value: 42 }
        ]
    },
    series: [{
        type: "line",
        field: "value",
        width: 5
    }],
    categoryAxis: {
        field: "date"
    }
});
</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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        zIndex: 1
    }, {
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        zIndex: 2
    }]
});
</script>

For example line series will be on top with bar and area following below.

Related Members