chart

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

Type: Object

The dxRangeSelector widget 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 dxChart widget 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 widgets, refer to the Scrolling and Zooming topics.

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.

Show Example:
jQuery

In this example, a chart is displayed in the background of the dxRangeSelector widget.


                                    

                                    

bottomIndent

Specifies a coefficient for determining an indent from the bottom background boundary to the lowest chart point.

Type: Number
Default Value: 0
Accepted Values: [0, 1' | '

When this property is set to a value that is greater than zero, the chart's value axis is expanded from its initial min value. This is helpful when you need to display the chart series with an indent from the bottom background boundary.

Since this property value is a coefficient, you can set a value for the axis extension without knowledge of the actual axis values. The resulting start axis value is calculated using the following formula: min - (max - min)*bottomIndent. If min is 1050, max is 2050 and bottomIndent is 0.1, the resulting start axis value will be 950.

You can also set the chart's topIndent property to specify an indent from the top background boundary to the topmost chart point.

Show Example:
jQuery

In this example, the displayed chart is indented from the bottom of the background. The indent is calculated using the value that is set to the bottomIndent option.


                                    

                                    

commonSeriesSettings

An object defining the common configuration options for the chart’s series.

Type: Object

Use this object's properties to set the options for all chart series at once. These options include options common to all series types and options specific to certain series types. So if you have several series of one type, you can set options specific to this type. If you need to set an individual value for a common or type-specific option, 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 dxRangeSelector widget may have its own default values for the commonSeriesSettings options. For instance, the type option is set to 'area' in the dxRangeSelector widget. In the dxChart widget, this option is set to 'line' by default.

Show Example:
jQuery

In this example, the argumentField option of the commonSeriesSettings configuration object is used to set the common argument field for the series of the chart displayed in the background of the dxRangeSelector widget.


                                    

                                    

equalBarWidth

Specifies a value indicating whether all bars of the same series should always have the same width, or should have different widths if some points of other series are missing.

Type: Object|Boolean
Default Value: true

If values for a series are not specified or are set to zero, the bars that represent these values will be missing from the chart. To fill the empty area by extending the neighboring bars, set the equalBarWidth property to false. The bars will have a different width, but there will be no empty areas.

To set a custom width for bars, as well as the spacing between bars, assign an object to this property and specify the width and spacing properties, respectively.

Show Example:
jQuery

In this example, the series type of the chart displayed in the background is 'bar'. In the data source, the "11", "13", "17" and "18" points have one of the series values missing. The bars representing these points will not be displayed. You can specify whether to fill the empty area by extending the neighboring bars, using the equalBarWidth option. Toggle the check box to switch between the values of this option.


                                    

                                    

series

An object defining the chart’s series.

Type: Object|Array
Default Value: undefined

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 options 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 dxRangeSelector widget may have its own default values for the series options.

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.

Show Example:
jQuery

In this example, the series array is used to define each chart series.


                                    

                                    

topIndent

Specifies a coefficient for determining an indent from the background's top boundary to the topmost chart point.

Type: Number
Default Value: 0.1
Accepted Values: [0, 1' | '

When this property is set to a value greater than zero, the chart's value axis is expanded beyond its initial max value. This is helpful when you need to display the chart series with an indent from the top background boundary.

Since this property value is a coefficient, you can set a value for the axis extension without knowledge of the actual axis values. The resulting end axis value is calculated using the following formula: max + (max - min)*topIndent. Assume that min is 50 and max is 150. If you set topIndent to 0.1, the resulting end axis value will be 160.

You can also set the chart's bottomIndent property, to specify an indent from the bottom background boundary to the lowest chart point.

Show Example:
jQuery

In this example, the displayed chart is indented from the top of the background. The indent is calculated using the value that is set to the topIndent option.


                                    

                                    

valueAxis

Specifies options for the chart's value axis.

Type: Object

The dxRangeSelector's chart is displayed without the value axis, and without the axis' ticks, labels, grids and strips, respectively. You can invert the value axis so that the chart series are inverted. In addition, you can specify the required minimum and maximum axis values only. To set these options, use the properties of the valueAxis configuration object.

Show Example:
jQuery

In this example, the chart displayed in the background is inverted. In addition, the min and max options are set.