Vue RangeSelector - chart.seriesTemplate

Defines properties for the series template.

Selector: DxSeriesTemplate
Type:

Object

Default Value: undefined

In most cases, you can organize the array that is assigned to the dataSource property in the following way.

[
    { arg: arg1Value, series1Value: val11, series2Value: val12, ... }
    { arg: arg2Value, series1Value: val21, series2Value: val22, ... }
    ...
    { arg: argNValue, series1Value: valN1, series2Value: valN2, ... }
]

Each object that is included in the array represents an argument value and the values of all series for this argument.

However, there are some scenarios in which you do not know exactly how many series will be added. In these cases, you will not be able to define the data source in the manner detailed above. Instead, define it in the following way.

[
    { seriesName: series1, arg: arg11Value, val: value11 }
    { seriesName: series1, arg: arg12Value, val: value12 }
    ...
    { seriesName: seriesM, arg: argM1Value, val: valueM1 }
    { seriesName: seriesM, arg: argM2Value, val: valueM2 }
    ...
]

If you define a data source in this manner, set the argument and value fields using the argumentField and valueField properties of the commonSeriesSettings configuration object (for all series at once). Then, define a template for the series using the seriesTemplate configuration object. Within this object, set the data source field that specifies the series name to the nameField property.

If you need to specify individual values for the properties of a particular series, assign a callback function to the customizeSeries property of the seriesTemplate object.

View Demo

customizeSeries

Specifies a callback function that returns a series object with individual series settings.

Selector: customize-series
Type:

Function

Function parameters:
seriesName: any

The name of the series to be customized.

Return Value:

Series Configuration

The series' configuration.

Use this property to specify individual settings for a particular series.

To determine the series to be customized, use the function's parameter. The parameter is the series name that is specified in the series array.

nameField

Specifies a data source field that represents the series name.

Selector: name-field
Type:

String

Default Value: 'series'

It is necessary to set the nameField property. The values of the data source field set to this property will be used as series identifiers.