---
title: ChartSeries
description: ChartSeries
element: vaadin-chart-series
---

## Description

`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.

### Basic use

To use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:

```html
<vaadin-chart>
  <vaadin-chart-series></vaadin-chart-series>
</vaadin-chart>
```

`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:

```html
<vaadin-chart-series values="[10, 20, 30, 40, 50]"></vaadin-chart-series>
```

which will add a new line series, where each value will be a data point.
Look for the Properties session to see all available attributes.

### Dynamically adding and removing series

You are also able to add and remove series by using DOM API.

To create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:

```js
const chart = document.querySelector('vaadin-chart');
const newSeries = document.createElement('vaadin-chart-series');
newSeries.values = [10, 20, 30, 40, 50];
chart.appendChild(newSeries);
```

In order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:

```js
const chart = document.querySelector('vaadin-chart');
const seriesToBeRemoved = chart.querySelector('vaadin-chart-series');
chart.removeChild(seriesToBeRemoved);
```

## Properties

### additionalOptions

**Type:** `SeriesOptionsType | null | undefined`

Represents additional JSON configuration.

### markers

**Type:** `ChartSeriesMarkers | null | undefined`

Shows/hides data-point markers for line-like series.
Acceptable input are:
 - `shown`: markers are always visible
 - `hidden`: markers are always hidden
 - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*

See also: [ChartSeriesMarkers](#chartseriesmarkers)

### neckPosition

**Type:** `string | number`

The height of the neck, the lower part of the funnel.
A number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.
Note that this property only applies for "funnel" charts.

### neckWidth

**Type:** `string | number`

The width of the neck, the lower part of the funnel.
A number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.
Note that this property only applies for "funnel" charts.

### options

**Type:** `ChartSeriesOptions`

Object with the configured options defined and used to create a series.

See also: [ChartSeriesOptions](#chartseriesoptions)

### stack

**Type:** `string | number`

Used to group series in a different stacks.
"stacking" property should be specified either for each series or in plotOptions.
It is recommended to place series in a single stack, when they belong to the same yAxis.

### title

**Type:** `string`

The name of the series as shown in the legend, tooltip etc.

### type

**Type:** `string | null | undefined`

A string with the type of the series.
Defaults to `'line'` in case no type is set for the chart.
Note that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.

### unit

**Type:** `string | null | undefined`

Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.
Displayed as a title for the axis.
If no unit is defined, then series will be connected to the first axis.

### valueMax

**Type:** `number | null | undefined`

Value-axis maximum-value.
See the 'valueMin'

### valueMin

**Type:** `number | null | undefined`

Value-axis minimum-value.
Sets the value to a series bound by 'unit' property.
Otherwise sets the value to the first series.
Undefined by default (determined from data).

### values

**Type:** `ChartSeriesValues | null`

An array of data used by the series.
Format depends on the chart type and can be:
  - An array of numerical values `[y0, y1, y2, y3,...]`
  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`
  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`

 See more in [API Site](https://api.highcharts.com/highcharts/series)

See also: [ChartSeriesValues](#chartseriesvalues)

## Methods

### setSeries

**Type:** `(series: Series) => void`

Method to attach a series object of type `Highcharts.Series`.

## Types

### ChartSeriesConfig

```ts
export interface ChartSeriesConfig {
  data?: ChartSeriesValues;
  marker?: { enabled: boolean | null };
  name?: string;
  neckWidth?: number | string;
  neckHeight?: number | string;
  stack?: number | string;
  type?: string;
  yAxis?: string;
  yAxisValueMin?: number;
  yAxisValueMax?: number;
}
```

### ChartSeriesMarkers

```ts
export type ChartSeriesMarkers = 'auto' | 'hidden' | 'shown';
```

### ChartSeriesOptions

```ts
export type ChartSeriesOptions = ChartSeriesConfig & SeriesOptionsType;
```

### ChartSeriesValues

```ts
export type ChartSeriesValues = Array<number[] | PointOptionsObject | GanttPointOptionsObject | number>;
```