PieSeries

An object defining a series of the pie type.

Type: Object

PieSeriesType ChartJS

For details on the pie series type, refer to the Pie topic.

View Demo

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.

Show Example:
jQuery

In this example, the continent field of the data source is set as the argument field for the chart series using the argumentField option.


                                    

                                    

argumentType

Specifies the required type for series arguments.

Type: String
Default Value: undefined
Accepted Values: 'numeric' | 'datetime' | '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.

When using the widget as an ASP.NET MVC Control, specify this option using the ChartDataType enum. This enum accepts the following values: Numeric, DateTime and String.

Show Example:
jQuery

Here, the 'year' field of the 'dataSource' array is intentionally set in the 'numeric' format. To convert the values of this field into the proper format, the argumentType option is used.


                                    

                                    

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.

Show Example:
jQuery

In the following example, the segment border is colored in lightblue and has a 2-pixel width.


                                    

                                    

color

Specifies a series color.

Type: String
Default Value: undefined

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

Show Example:
jQuery

In this example, the chart series is drawn in the 'steelblue' color.


                                    

                                    

hoverMode

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

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

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.

When using the widget as an ASP.NET MVC Control, specify this option using the PieChartSeriesInteractionMode enum. This enum accepts the following values: OnlyPoint and None.

Show Example:
jQuery

Use the drop-down list below to change the hoverMode option. To see the effect, hover over a point on the chart.


                                    

                                    

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.

Show Example:
jQuery

In this example, the style of a hovered point is changed.


                                    

                                    

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

Show Example:
jQuery

Here, the point labels and their connectors are displayed. The label's format option is also changed.


                                    

                                    

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.

Show Example:
jQuery

In this example, the chart has 7 points. Initially, the point labels are displayed as the label's visible option is set to true and the series' maxLabelCount value equals 7. If you check the "6" radio button below the chart, the maxLabelCount option will be equal 6, which is less than the number of points in the chart series. As a result, the point labels 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.

Show Example:
jQuery

In this example, the minSegmentSize option is set to 5. Therefore, the points that represent the smallest values (here it is the values of the 'Antarctica' and 'Australia' points) are displayed as 5-degree slices.


                                    

                                    

segmentsDirection

Deprecated

Use the segmentsDirection option instead.

Specifies the direction in which the PieChart series points are located.

Type: String
Default Value: 'clockwise'
Accepted Values: 'clockwise' | 'anticlockwise'

selectionMode

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

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

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.

When using the widget as an ASP.NET MVC Control, specify this option using the PieChartSeriesInteractionMode enum. This enum accepts the following values: OnlyPoint and None.

Show Example:
jQuery

Change the value of the series' selectionMode option using the drop-down menu below. Then, click one of the points to see the effect.


                                    

                                    

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.

Show Example:
jQuery

In this example, the style of a selected point is changed using the selectionStyle option.


                                    

                                    

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

startAngle

Deprecated

Use the startAngle option instead.

Specifies a start angle for a pie chart in arc degrees.

Type: Number
Default Value: 0

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.

Show Example:
jQuery

In this example, the 'info' field of the data source is set as the tag field using the series' tagField option. Click a point to display the information stored in the tag field.


                                    

                                    

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.

Show Example:
jQuery

In this example, the population field of the data source is set as the value field for the chart series using the valueField option.