All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery PieChart - DoughnutSeries

An object defining a series of the doughnut type.

Type:

Object

All the settings in this section are specified as follows:

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

  • The commonSeriesSettings.doughnut object
    Specifies settings for all series of the doughnut type.

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

View Demo

DoughnutSeriesType DonutSeriesType ChartJS

argumentField

Specifies the data source field that provides arguments for series points.

Type:

String

Default Value: 'arg'

When defining a series, set the argumentField property to the corresponding field from the data source.

argumentType

Specifies the required type for series arguments.

Type:

String

Default Value: undefined
Accepted Values: 'datetime' | 'numeric' | 'string'

By default, the series arguments have the same type as the values of a corresponding data source field. If the data source field values are numeric, the series arguments will also be numeric, etc. However, you can convert the data source values to another type. In this instance, specify the required type using the argumentType option.

Use the ChartDataType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Numeric, DateTime, and String.

border

An object defining the series border configuration options.

Type:

Object

To set custom border settings for the series, use the border object within the series configuration object.

color

Specifies a series color.

Type:

String

Default Value: undefined

Use this option to paint all pie slices in one color.

hoverMode

Specifies the chart elements to highlight when a series is hovered over.

Type:

String

Default Value: 'onlyPoint'
Accepted Values: 'none' | 'onlyPoint'

The following values are available.

  • onlyPoint
    Changes the appearance of the hovered point only.
  • none
    The appearance of the hovered series is not changed.

To set custom options for the 'hover' style (which is applied when a series is hovered over), use the hoverStyle configuration object.

Use the PieChartSeriesInteractionMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: OnlyPoint and None.

hoverStyle

An object defining configuration options for a hovered series.

Type:

Object

To set a custom 'hover' style for the series, use the hoverStyle object within the series configuration object.

label

An object defining the label configuration options.

Type:

Object

Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label options for the series.

View Demo

maxLabelCount

Specifies how many points are acceptable to be in a series to display all labels for these points. Otherwise, the labels will not be displayed.

Type:

Number

Default Value: undefined

When there is a series with a large number of points, the point labels may overlap each other and make a chart difficult to read. In this instance, it is better to display the point labels depending on their quantity. To specify the maximum amount of the labels to be displayed, set the required number to the maxLabelCount field. If the number of the points on a series exceeded the number assigned to the maxLabelCount field, the point labels for this series will not be displayed.

minSegmentSize

Specifies a minimal size of a displayed pie segment.

Type:

Number

Default Value: undefined

When you visualize data with small and large numbers, the small numbers are represented by very small pie slices. It makes them difficult to click, select or hover over. In this case, use the minSegmentSize option to set the minimal size of a displayed pie segment.

selectionMode

Specifies the chart elements to highlight when the series is selected.

Type:

String

Default Value: 'onlyPoint'
Accepted Values: 'none' | 'onlyPoint'

The **PieChart** widget comes with an API that allows you to select a series or a particular point in code. Use the selectionMode property to specify which series elements to select when the series is selected.

  • onlyPoint
    Changes the appearance of the selected point only.
  • none
    The appearance of the selected series is not changed.

To set custom options for the 'selected' style (which is applied when a series is selected), use the selectionStyle configuration object.

Use the PieChartSeriesInteractionMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: OnlyPoint and None.

selectionStyle

An object defining configuration options for the series when it is selected.

Type:

Object

The PieChart widget comes with API members that allow you to select the series in code. To set a custom 'selected' style for the series, use the selectionStyle object within the series configuration object.

smallValuesGrouping

Specifies chart segment grouping options.

Type:

Object

If you need to group specific chart segments into one, use the options of the smallValuesGrouping configuration object.

You can group segments in two different modes. Use a 'topN' mode to group all segments that have an index that is equal to or greater than the value of the topCount option. To group all segments with the value less than the value of the threshold option, use a 'smallValueThreshold' mode.

By default, the resulting segment is called "others". To change this name, specify the groupName option.

View Demo

tagField

Specifies the name of the data source field that provides data about a point.

Type:

String

Default Value: 'tag'

When setting a data source, you can pass extra information about a point. For this purpose, add a separate field to the data source in addition to the argument and value fields. To set specified data to the point instance, set the series' tagField property to the name of the field with the information. In this instance, when clicking/hovering/selecting a point in the chart, you can access the data associated with this point using the point's instance.

valueField

Specifies the data source field that provides values for series points.

Type:

String

Default Value: 'val'

When defining a series, set the valueField property to the corresponding field from the data source.