ChartSeries

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:

<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:

<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>:

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:

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

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

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

See also: ChartSeriesValues

Methods #

setSeries #

Type: (series: Series) => void

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

Types #

ChartSeriesConfig #

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 #

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

ChartSeriesOptions #

export type ChartSeriesOptions = ChartSeriesConfig & SeriesOptionsType;

ChartSeriesValues #

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