commonSeriesSettings

Specifies settings common for all series in the chart.

Type: Object

There are three ways to configure a series.

  • The commonSeriesSettings object
    Specifies settings for all series in a chart.

  • The commonSeriesSettings | %seriesType% (area, line, etc.) object
    Specifies settings for all series of the seriesType.

  • An object in the series array
    Specifies settings for an individual series.

NOTE
You can use these objects together, but note that individual settings override type-specific settings, which in their turn, override common settings.

area

Defines common settings for all area series.

Type: Object

Show Example:
jQuery

In this example, the color of all areas is set using the area field of the commonSeriesSettings object.


                                    

                                    

argumentField

Specifies which data source field provides arguments for series points.

Type: String
Default Value: 'arg'
Cannot be used in themes.

In the Cartesian coordinate system, each point is characterized by a pair of coordinates (X, Y). In the Chart widget, X's are provided by the argumentField; Y's are provided by the valueField.

NOTE
Certain series types have more than one value field, or require additional data fields to be set. Refer to the valueField option description for details.

Commonly, a chart contains several series, and many of them have the same argument field. In this case, assign the name of this field to the argumentField property of the commonSeriesSettings object. If a series must have a unique argument field, specify the same property, but do so in the series object within the series array.

axis

Binds the series to a value axis.

Type: String
Default Value: undefined

When there are multiple value axes in a chart, series need to know exactly which axis they are bound to. By default, all of them are bound to the first axis in the valueAxis array. To bind a series to another axis, assign the name of the axis to the axis series property.

View Demo

bar

Defines common settings for all bar series.

Type: Object

Show Example:
jQuery

In this example, the corner settings for all series of the bar type are specified using the bar field of the commonSeriesSettings object.


                                    

                                    

border

Configures the series border (in area-like series) or the series point border (in bar-like and bubble series).

Declared in commonSeriesSettings, the border settings apply to all series in the chart. Declared in a series configuration object, the border settings apply to this particular series only. The series-specific border settings override the common ones.

bubble

Defines common settings for all bubble series.

Type: Object

Show Example:
jQuery

In this example, the borders for all bubble series are configured using the bubble field of the commonSeriesSettings object.


                                    

                                    

candlestick

Defines common settings for all candlestick series.

Type: Object

Show Example:
jQuery

In this example, the value fields for all candleStick series are configured using the candlestick field of the commonSeriesSettings object.


                                    

                                    

closeValueField

Specifies which data source field provides close values for points of a financial series.

Type: String
Default Value: 'close'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a financial series has one argument and four values. Arguments are provided by the argumentField; values are provided by the openValueField, closeValueField, highValueField and lowValueField.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

color

Specifies the color of the series.

Type: String
Default Value: undefined

This option supports the following colors.

Specified in the commonSeriesSettings object, this option colors all series in the chart. To color an individual series, specify this option in the series object within the series array.

cornerRadius

Makes bars look rounded. Applies only to bar-like series.

Type: Number
Default Value: 0
This member is exposed by the following entities:

dashStyle

Specifies the dash style of the series line. Applies only to line-like series.

Type: String
Default Value: 'solid'
Accepted Values: 'solid' | 'longDash' | 'dash' | 'dot'

This option accepts one of the following values.

  • solid
    Displays a solid, continuous series line.
  • dash
    Displays the series line using short dashes.
  • longDash
    Displays the series line using long dashes.
  • dot
    Displays the series line using dots.
  • Any combination of 'longDash', 'dash' and 'dot'
    Displays the series line by repeating the specified combination. For example, 'dashdotdash'.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the DashStyle enum. This enum accepts the following values: Solid, LongDash, Dash and Dot.

fullstackedarea

Defines common settings for all full-stacked area series.

Type: Object

Show Example:
jQuery

In this example, the axis option is set for all fullStackedArea series using the fullstackedarea field of the commonSeriesSettings object.


                                    

                                    

fullstackedbar

Defines common settings for all full-stacked bar series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for all series of the fullStackedBar type at once using the fullstackedbar field of the commonSeriesSettings object.


                                    

                                    

fullstackedline

Defines common settings for all full-stacked line series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for all series of the fullStackedLine type at once using the fullstackedline field of the commonSeriesSettings object.


                                    

                                    

fullstackedspline

Defines common settings for all full-stacked spline series.

Type: Object

fullstackedsplinearea

Defines common settings for all full-stacked spline area series.

Type: Object

highValueField

Specifies which data source field provides high values for points of a financial series.

Type: String
Default Value: 'high'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a financial series has one argument and four values. Arguments are provided by the argumentField; values are provided by the openValueField, closeValueField, highValueField and lowValueField.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

hoverMode

Specifies series elements to be highlighted when a user points to a series.

Type: String

Depending on the series type, this option accepts different values. For information on them, visit the Series Types section, choose the employed series type and refer to its hoverMode option description.

hoverStyle

Configures the appearance adopted by the series when a user points to it.

Type: Object

Declared in commonSeriesSettings, hoverStyle applies to all series in the chart. Declared in a series configuration object, hoverStyle applies to this particular series only. The series-specific hoverStyle overrides the common one.

ignoreEmptyPoints

Specifies whether the series should ignore null data points.

Type: Boolean
Default Value: false

Data points that have the null argument or value do not produce actual series points. Because of this, series of continuous types (line, spline, area, etc.) may be drawn with unnecessary gaps where missing points should have been. To remove these gaps, set the ignoreEmptyPoints option to true.

innerColor

Specifies a filling color for the body of a series point that visualizes a non-reduced value. Applies only to candlestick series.

Type: String
Default Value: '#ffffff'
This member is exposed by the following entities:
See Also
  • reduction - specifies the price reduction options for financial series.
  • color - colors the frame of a series point in candlestick series.

label

Configures point labels.

Type: Object

Declared in commonSeriesSettings, the label settings apply to all point labels in the chart. Declared in a series configuration object, the label settings apply only to the point labels that belong to this particular series. The series-specific label settings override the common ones.

See Also
  • customizeLabel - сustomizes the appearance of an individual point label.

line

Defines common settings for all line series.

Type: Object

Show Example:
jQuery

In this example, the color option is set for the series of the line type using the line field of the commonSeriesSettings object.


                                    

                                    

lowValueField

Specifies which data source field provides low values for points of a financial series.

Type: String
Default Value: 'low'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a financial series has one argument and four values. Arguments are provided by the argumentField; values are provided by the openValueField, closeValueField, highValueField and lowValueField.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

maxLabelCount

Specifies a limit for the number of point labels.

Type: Number
Default Value: undefined

If the number of points in a series increases over time, there comes a time when it becomes so massive that displaying labels for them makes the chart too cluttered. In this instance, to keep the chart clear to the viewer, specify a limit for the number of point labels using the maxLabelCount option. Once this limit is exceeded, all point labels of the series will be hidden.

minBarSize

Specifies the minimal possible height (or length if the chart is rotated) of a bar in pixels. Applies only to bar-like series.

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

If the disparity between the smallest and largest values in the data source is considerable, small values are visualized by tiny bars that may be difficult to interact with. In this case, specify the minimal possible height (or length if the chart is rotated) for bars using the minBarSize option.

See Also
  • barWidth - controls the width of bars in the widget.

opacity

Specifies how transparent the series should be.

Type: Number
Default Value: 0.5

This option accepts a value from 0 to 1, where 0 makes the series completely transparent, and 1 makes it opaque.

openValueField

Specifies which data source field provides open values for points of a financial series.

Type: String
Default Value: 'open'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a financial series has one argument and four values. Arguments are provided by the argumentField; values are provided by the openValueField, closeValueField, highValueField and lowValueField.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

pane

Specifies which pane the series should belong to. Accepts the name of the pane.

Type: String
Default Value: 'default'

If this option is not specified, the series will belong to the default pane.

See Also
  • panes - declares a collection of panes.

View Demo

point

Configures series points in scatter, line- and area-like series.

Declared in commonSeriesSettings, the point settings apply to all points in the chart. Declared in a series configuration object, the point settings apply only to the points that belong to this particular series. The series-specific point settings override the common ones.

See Also
  • customizePoint - сustomizes the appearance of an individual series point.

rangearea

Defines common settings for all range area series.

Type: Object

Show Example:
jQuery

In this example, the value fields of the rangeArea type series is set using the rangearea field of the commonSeriesSettings object.


                                    

                                    

rangebar

Defines common settings for all range bar series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for all series of the rangeBar type at once using the rangebar field of the commonSeriesSettings object.


                                    

                                    

rangeValue1Field

Coupled with the rangeValue2Field option, specifies which data source field provides values for a range-like series.

Type: String
Default Value: 'val1'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a range-like series has one argument and two values. Arguments are provided by the argumentField; values are provided by the rangeValue1Field, rangeValue2Field.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

rangeValue2Field

Coupled with the rangeValue1Field option, specifies which data source field provides values for a range-like series.

Type: String
Default Value: 'val2'
This member is exposed by the following entities:
Cannot be used in themes.

Each point in a range-like series has one argument and two values. Arguments are provided by the argumentField; values are provided by the rangeValue1Field, rangeValue2Field.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

reduction

Specifies reduction options for financial series.

Type: Object
This member is exposed by the following entities:

Each point in a financial series has four values or "prices": high, low, open and close. To mirror the changes on the market more clearly, the widget compares the price of every point with the price of the previous point. Those points whose price has decreased are painted in a specific color. To specify whether high, low, open or close prices of points should be compared, use the level option.

scatter

Defines common settings for all scatter series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the scatter type using the scatter field of the commonSeriesSettings object.


                                    

                                    

selectionMode

Specifies series elements to be highlighted when a user selects a series.

Type: String

Depending on the series type, this option accepts different values. For information on them, visit the Series Types section, choose the employed series type and refer to its selectionMode option description.

View Demo

selectionStyle

Configures the appearance adopted by the series when a user selects it.

Type: Object
NOTE
Though not provided out of the box, the selection capability can be implemented using the widget API. Refer to the onPointClick option description for details.

Declared in commonSeriesSettings, selectionStyle applies to all series in the chart. Declared in a series configuration object, selectionStyle applies to this particular series only. The series-specific selectionStyle overrides the common one.

showInLegend

Specifies whether to show the series in the legend or not.

Type: Boolean
Default Value: true

sizeField

Specifies which data source field provides size values for bubbles. Required by and applies only to bubble series.

Type: String
Default Value: 'size'
This member is exposed by the following entities:

Each point in a bubble series has an argument, a regular value and a size value. Arguments are provided by the argumentField; regular values are provided by the valueField; size values are provided by the sizeField.

Size values do not specify the real sizes of bubbles directly, they only define the sizes of bubbles in relation to each other. Apart from a size value, the real, pixel-measured size of a bubble depends on the minBubbleSize and maxBubbleSize values and the size of the pane.

Commonly, a chart contains several series, and many of them have the same size field. In this case, assign the name of this field to the sizeField property of the commonSeriesSettings object. If a series must have a unique size field, specify the same property, but do so in the series object within the series array.

spline

Defines common settings for all spline series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the spline type using the spline field of the commonSeriesSettings object.


                                    

                                    

splinearea

Defines common settings for all spline area series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the splineArea type using the splinearea field of the commonSeriesSettings object.


                                    

                                    

stack

Specifies which stack the series should belongs to. Applies only to stacked bar and full-stacked bar series.

Type: String
Default Value: 'default'
This member is exposed by the following entities:

By default, all series are placed in the same stack. In case you need to distribute them between several side-by-side stacks, specify the stack series property. Series with the same stack value will be collected in a single stack. The number of stacks is unlimited.

View Demo

stackedarea

Defines common settings for all stacked area series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the stackedArea type using the stackedarea field of the commonSeriesSettings object.


                                    

                                    

stackedbar

Defines common settings for all stacked bar series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the stackedBar type using the stackedbar field of the commonSeriesSettings object.


                                    

                                    

stackedline

Defines common settings for all stacked line series.

Type: Object

Show Example:
jQuery

In this example, the argumentField option is set for the series of the stackedLine type using the stackedline field of the commonSeriesSettings object.


                                    

                                    

stackedspline

Defines common settings for all stacked spline series.

Type: Object

stackedsplinearea

Defines common settings for all stacked spline area series.

Type: Object

steparea

Defines common settings for all step area series.

Type: Object

Show Example:
jQuery

In this example, the border is configured for the series of the stepArea type using the steparea field of the commonSeriesSettings object.


                                    

                                    

stepline

Defines common settings for all step line series.

Type: Object

Show Example:
jQuery

In this example, series points are configured for the series of the stepLine type using the stepline field of the commonSeriesSettings object.


                                    

                                    

stock

Defines common settings for all stock series.

Type: Object

Show Example:
jQuery

In this example, the reduction is configured for the series of the stock type using the stock field of the commonSeriesSettings object.


                                    

                                    

tagField

Specifies which data source field provides auxiliary data for series points.

Type: String
Default Value: 'tag'
Cannot be used in themes.

This option allows you to associate virtually any required data with a series point. This data will be stored in the tag field of the Point object.

Commonly, a chart contains several series, and many of them have the same tagField value. In this case, specify the tagField property in the commonSeriesSettings object. If a series must have a unique tagField value, specify the same property, but do so in the series object within the series array.

See Also
  • series | tag - associates data with an entire series.

type

Specifies the type of the series.

Type: String
Default Value: 'line'
Accepted Values: 'line' | 'stackedline' | 'fullstackedline' | 'area' | 'stackedarea' | 'fullstackedarea' | 'bar' | 'stackedbar' | 'fullstackedbar' | 'spline' | 'splinearea' | 'scatter' | 'candlestick' | 'stock' | 'rangearea' | 'rangebar' | 'stepline' | 'steparea' | 'bubble' | 'fullstackedspline' | 'stackedspline' | 'stackedsplinearea' | 'fullstackedsplinearea'

The series type determines the distinctive look of the series. Depending on the nature of data, one series type may be preferable over another. To choose which series type serves your visualization purposes best, visit the Series Types documentation section.

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the SeriesType enum. This enum accepts the same values, but each word in them starts with an upper-case letter, for example, 'fullstackedsplinearea' becomes FullStackedSplineArea.

valueErrorBar

Configures error bars.

Type: Object
This member is exposed by the following entities:

Error bars are used on charts to indicate an error or an uncertainty in a reported measurement. They give a general idea of how precise the measurement is.

DevExtreme HTML5 Charts ErrorBars

Error bars can be generated either from concrete or calculated values. To generate one error bar, two values, high and low, are needed. If the data source of your chart provides concrete high and low values, assign the required data source fields to the highValueField and lowValueField options.

Alternatively, the error bar values can be calculated according to an algorithm. In this case, choose the needed algorithm using the type option, and specify the value to be used in calculation using the value option.

NOTE
Error bars are available for axes of the numeric type only.

View Demo

valueField

Specifies which data source field provides values for series points.

Type: String
Default Value: 'val'

Specify the valueField option within the commonSeriesSettings object only if you use a series template. In all other cases, specify it for each series individually in the series array.

visible

Specifies whether the series is visible or not.

Type: Boolean
Default Value: true
NOTE
When the series is invisible, the marker of its legend item is faded.
See Also
  • Series | show() - shows the series at runtime.
  • Series | hides() - hides the series at runtime.

width

Specifies the width of the series line in pixels. Applies only to line-like series.

Type: Number
Default Value: 2