Configuration

An object that defines configuration options for the dxPieChart widget.

dataSource

Specifies a data source for the chart.

Type: Array

To provide data for a chart, introduce an array of objects. These objects must contain a property representing an argument value and property(ies) representing the value(s) that corresponds to that argument in each series. Assign this array to the dataSource property. In addition, specify which data source field must be used as a source for arguments and which one(s) as a source for values. To do this, use the argumentField and valueField properties of the series object. For details, refer to the Use Common Data Source topic.

Show Example:
jQuery

In this example, the data source is declared as an array of objects, each of which contain the 'continent' and 'population' fields. The 'continent' field is used as an argument field for the pie series. The 'population' field is used as a value field for the pie series.


                                    

                                    

done

A callback function that is called when chart rendering is complete.

Type: function
Default Value: Empty function ($.noop)

Show Example:
jQuery

In this example, when chart rendering is complete, a message with the corresponding content appears.


                                    

                                    

incidentOccured

Specifies a callback function that is called when an error or warning occurs.

Type: function
Default Value: Empty function ($.noop)

When an error or warning occurs, nothing passes to the browser console, but the function specified for the incidentOccured option is called. Information about the incident is available via the parameter of the function. For example, you will be notified when data is input in the wrong format, or when the chart container is too small.

Show Example:
jQuery

Use the check box below to change the size of the chart container. When checking the check box, the chart container becomes too small to display the chart. As a result, an error occurs. The function assigned to the incidentOccured field is used to receive the message about the error. Uncheck the check box to restore the previous size of the chart container.


                                    

                                    

legend

Specifies dxPieChart legend options.

Type: Object

The dxPieChart widget can include a legend. It helps you distinguish and identify the points of the displayed series. Each point is presented by an item on the legend. An item marker identifies the point's (slice's) color. An item label displays a value corresponding to the point. Use the legend property to set up dxPieChart legend options to the required values. To learn more about the legend and its options, refer to the Legend topic.

Show Example:
jQuery

In this example, the legend's horizontalAlignment and verticalAlignment options are changed.


                                    

                                    

margin

Specifies the blank space between the chart's extreme elements and the boundaries of the area provided for the widget (see size) in pixels.

Type: Object

Set the required values for the left, right, top and bottom margins using the corresponding properties of the margin object.

PieChartMargin ChartJS

palette

Sets the name of the palette to be used in the chart. Alternatively, an array of colors can be set as a custom palette to be used within this chart.

Type: Array|String
Default Value: 'default'

Use this property to set a predefined or custom palette. The colors listed in the specified palette will be used to draw series points (chart slices), their labels and tooltips. If the number of points is greater than the number of colors in a palette, the palette colors are repeated, but slightly modified.
You can define a custom palette and use it in your charts. To learn how to do this, refer to the Palettes topic.

Show Example:
jQuery

This example shows how to create a custom palette and apply it to a chart.


                                    

                                    

pointClick

Specifies a function that is called when a series data point is clicked.

Type: function

When implementing a callback function for this property, use the object that represents the currently clicked point. To access this object, use the function's parameter or the this object.

For information on which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn more about handling click operations, and to see an example, refer to the Click Handling topic.

Show Example:
jQuery

Click one of the points on the chart, and information on this point will appear below.


                                    

                                    

pointHover

Specifies the function that is called when a data point is hovered over.

Type: function

When implementing a callback function for this property, use the object that represents the currently hovered point. To access this object, use the function's parameter or the this object.

To learn about which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn more about handling hover operations and to see an example, refer to the Hover Handling topic.

Show Example:
jQuery

Hover over one of the points on the chart, and information on this point will appear below.


                                    

                                    

pointSelected

Specifies the function that is called after a series data point has been selected.

Type: function

When implementing a callback function for this property, use the object that represents the currently selected point. To access this object, use the function's parameter or the this object.

To learn about which point members you can use, refer to the Point class description. For instance, you can access the series to which the point belongs. To learn about which series members you can use, refer to the description of any series type in the chart Series Types section.

To learn how to select a point, refer to the Selection Handling topic.

Show Example:
jQuery

In this example, a click on a point makes this point selected. This selection is handled by the function specified in the pointSelected option. Here, this function displays information about the selected point.


                                    

                                    

pointSelectionMode

Specifies whether a single point or multiple points can be selected in the chart.

Type: String
Default Value: 'single'
Accepted Values: 'single' | 'multiple'

To set the points to highlight along with the selected point, set the series | selectionMode option.

To learn how to select a point, refer to the Selection Handling topic.

Show Example:
jQuery

In this example, click a point to select/deselect this point. The pointSelectionMode option is set to multiple so that you can select multiple points.


                                    

                                    

redrawOnResize

Indicates whether to redraw the chart when the size of the parent browser window changes or a mobile device is rotated.

Type: Boolean
Default Value: true
Accepted Values: true|false

The size of the chart is never changed when its container has a fixed size. Alternatively, its size changes proportionally when the parent window size changes and the redrawOnResize is set to true.

series

Specifies options for the series of the dxPieChart widget.

Type: {object|Array
Default Value: undefined

A series represents a grouping of related data points. The most important characteristic of a series is its type, which determines a particular visual representation of data. You can find more details on each series type in the corresponding topics in the Series help section.
To define a series, assign an object defining the series to the series configuration object. In the series' object, specify the series type, data source fields and other options.

size

Specifies the size of the widget in pixels.

Type: Object

The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widget is not displayed.

If you need to set a particular size for the widget, different from the container's size, use the size configuration object. Assign a height and width in pixels to height and width properties.

Show Example:
jQuery

In this example, the size of the chart is set smaller than the size of the chart container using the size option.


                                    

                                    

theme

Sets the name of the theme to be used in the chart.

Type: String
Default Value: 'default'

Use this property to set a predefined or custom theme. The options defining chart appearance will be set to the values that are set in the specified theme. You can override some of these values within the chart's configuration object. To learn more about themes and their implementation and customization, refer to the Themes topic.

Show Example:
jQuery

In this example, a custom theme is defined on the base of the default theme and then applied.


                                    

                                    

title

Specifies a title for the chart.

Type: Object|String

Use this property to set the text to be displayed as a chart title. If you need to specify the title's position on the chart, assign an object to the title property with the required title options specified. In this instance, set the title's text using the text property. When a text is not specified for a title, the widget is displayed without a title.

Show Example:
jQuery

In the example below, the chart's title text is assigned directly to the title field.


                                    

                                    

tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about a hovered series point. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this. To learn more about tooltips and their options, refer to the Tooltips topic.

Show Example:
jQuery

In this example, tooltips are enabled. Hover over any point to see a tooltip.


                                    

                                    

tooltipHidden

A callback function that is called when a point tooltip becomes hidden.

Type: function
Default Value: Empty function ($.noop)

The point tooltip becomes invisible when another point is hovered. In addition, you can hide a tooltip in code, using the hideTooltip() method of the chart or point.

When a tooltip is made hidden, you can perform specific actions. To do this, implement a callback function and assign it to the tooltipHidden option. When implementing this callback function, use the object that represents the point whose tooltip becomes hidden. To access this object, use the function's parameter or the this object.

Show Example:
jQuery

In this example, when a tooltip is made hidden, the function assigned to the tooltipHidden option is called. When a tooltip is shown, the function assigned to the tooltipShown option is called. These functions display messages with corresponding content.


                                    

                                    

tooltipShown

A callback function that is called when a point tooltip becomes shown.

Type: function
Default Value: Empty function ($.noop)

The point tooltip becomes visible when the point is hovered. In addition, you can show a tooltip in code, using the showTooltip() method of the chart or point.

When a tooltip is made shown, you can perform specific actions. To do this, implement a callback function and assign it to the tooltipShown option. When implementing this callback function, use the object that represents the point whose tooltip becomes shown. To access this object, use the function's parameter or the this object.

Show Example:
jQuery

In this example, when a tooltip is made hidden, the function assigned to the tooltipHidden option is called. When a tooltip is shown, the function assigned to the tooltipShown option is called. These functions display messages with corresponding content.