Vue RangeSelector - chart

Specifies the properties required to display a chart as the range selector's background.

Selector: DxChart
Type:

Object

The RangeSelector UI component can be created with a chart as the background. In this instance, the range selector can be used for selecting the required range on the chart. At the same time, the Chart UI component can be displayed near the range selector and zoomed or scrolled according to the range selected in the range selector. For details on how to synchronize these two UI components, refer to the following help topic: Zooming and Panning Using the RangeSelector Component.

To provide a data source for the chart located in the background, set the dataSource property of the rangeSelectorOptions root configuration object and define the series within the chart configuration object. Set the chart series' argumentField and valueField properties to the corresponding data source fields. The argument field will also be used to create the range selector's scale.

NOTE
You may need to use the rangeValue1Field and rangeValue2Field properties instead of the valueField property if you define range-like series. For the candleStick and stock series types, specific properties should also be specified instead of the valueField property.

The color specified for the range selector's background will also be visible in the chart's background by default. You can change it using the color property of the background configuration object. To prohibit the display of the background color, set the background's visible property to false.

Chart on Background Demo Customized Chart on Background Demo

barGroupPadding

Controls the padding and consequently the width of a group of bars with the same argument using relative units. Ignored if the barGroupWidth property is set.

Selector: bar-group-padding
Type:

Number

Default Value: 0.3
This member is exposed by the following entities:

This property accepts a value from 0 to 1 that specifies the correlation between the empty space on a bar group's sides and the group's width: 0 - the bar group occupies the whole allocated space; 1 - virtually hides the bar group creating a lot of empty space.

barGroupWidth

Specifies a fixed width for groups of bars with the same argument, measured in pixels. Takes precedence over the barGroupPadding property.

Selector: bar-group-width
Type:

Number

Default Value: undefined
This member is exposed by the following entities:

bottomIndent

Specifies an indent from the background's bottom to the lowest chart point. Accepts values from 0 to 1.

Selector: bottom-indent
Type:

Number

Default Value: 0

See Also

commonSeriesSettings

An object defining the common configuration properties for the chart's series.

Selector: DxCommonSeriesSettings

Use this object's properties to set the properties for all chart series at once. These properties include properties common to all series types and properties specific to certain series types. So if you have several series of one type, you can set properties specific to this type. If you need to set an individual value for a common or type-specific property, use the corresponding series object within the series array. The values that are set individually override the corresponding common values.

For information on all the properties of the commonSeriesSettings configuration object, refer to its description in the chartOptions reference section: commonSeriesSettings. Note that the RangeSelector UI component may have its own default values for the commonSeriesSettings properties. For instance, the type property is set to 'area' in the RangeSelector UI component. In the Chart UI component, this property is set to 'line' by default.

View Demo

dataPrepareSettings

An object providing properties for managing data from a data source.

Selector: DxDataPrepareSettings
Type:

Object

When values from a data source are of a different type, they may be displayed incorrectly on the RangeSelector's chart. To resolve this situation, use the properties provided by the dataPrepareSettings configuration object. You can enable/disable data validation using the checkTypeForAllData property, or specify whether or not to convert the data source values to the type of the axis using the convertToAxisDataType property. In addition, you can sort the series points using the sortingMethod property.

maxBubbleSize

Specifies a coefficient that determines the diameter of the largest bubble.

Selector: max-bubble-size
Type:

Number

Default Value: 0.2
This member is exposed by the following entities:

When defining a bubble series, you specify a size field. The largest size value is represented by the largest bubble. Its diameter is calculated as follows:

d = maxBubbleSize * min(chartHeight, chartWidth)

minBubbleSize

Specifies the diameter of the smallest bubble measured in pixels.

Selector: min-bubble-size
Type:

Number

Default Value: 12
This member is exposed by the following entities:

When defining a bubble series, you specify a size field. The smallest size value is represented by the smallest bubble. The minBubbleSize property specifies the bubble's diameter in pixels.

negativesAsZeroes

Forces the UI component to treat negative values as zeroes. Applies to stacked-like series only.

Selector: negatives-as-zeroes
Type:

Boolean

Default Value: false

Oftentimes, series data contains negative values. Visualizing such data using stacked-like series may lead to unexpected results. To prevent situations of this kind, assign true to the negativesAsZeroes property, and the UI component will count all negative values as zeroes.

palette

Sets the palette to be used to colorize series in the chart.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

See Also

paletteExtensionMode

Specifies what to do with colors in the palette when their number is less than the number of series in the chart.

Selector: palette-extension-mode
Type:

String

Default Value: 'blend'
Accepted Values: 'alternate' | 'blend' | 'extrapolate'

The following variants are available:

  • "blend"
    Create a blend of two neighboring colors and insert it between these colors in the palette.

  • "alternate"
    Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order.

  • "extrapolate"
    Repeat the full set of palette colors, changing their shade gradually from dark to light.

View Demo

series

An object defining the chart's series.

Selector: DxSeries
Default Value: undefined
Cannot be used in themes.

If you are going to display several series in the range selector's chart, assign an array of objects defining these series to this property. If a single series must be displayed in the chart, assign an object defining this series to this property. The properties of the series configuration object represent the properties that can be set to define the series. To get information on all the properties of the series configuration object, refer to its description in the chartOptions reference section: series. Note that the RangeSelector UI component may have its own default values for the series properties.

If you display several series on the chart, utilize the commonSeriesSettings configuration object. This object allows you to set values that are common for all series in the chart.

View Demo

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

topIndent

Specifies an indent from the background's top to the topmost chart point. Accepts values from 0 to 1.

Selector: top-indent
Type:

Number

Default Value: 0.1

See Also

valueAxis

Configures the chart value axis.

Selector: DxValueAxis
Type:

Object

A chart integrated in the RangeSelector differs from a stand-alone Chart UI component in the axes. The argument axis of the integrated chart is replaced by the RangeSelector scale. The value axis loses its visual representation along with ticks, labels, grids and strips, retaining only those properties that shape it.

View Demo