An object that defines configuration options for the dxPieChart widget.
Specifies adaptive layout options.
When your scenario provides the capability to change the size of the widget container, this container may become too small for the widget to display all of its elements. In this case, the adaptive layout removes accessory widget elements, thus saving space for the most important ones. The elements are being removed in the following sequence.
- Chart margins
- Title margins or the whole title
- Point labels (can be saved by setting the adaptiveLayout | keepLabels option to true)
To specify the container's size to be small enough for the layout to begin adapting, use the height and width options of the adaptiveLayout object.
Specifies animation options.
To make your chart "live", enable animation for it. To do this, set the enabled option of the animation object to true. In this instance, the chart series will appear in motion. The animation object provides more options to set up chart animation. Refer to their description for details.
Specifies a callback function that returns an object with options for a specific point label.
Information on the label to be customized
A configuration object for the label
By default, all point labels on a chart are displayed identically. But you can specify different appearance for specific labels using the customizeLabel field. Assign a function to this field. This function should return an object with options that should be changed for a certain label. Refer to the label object description to learn about the options that can be changed.
When implementing a callback function for this option, you can access the following fields of the function's parameter.
The argument of the label's point.
The value of the label's point.
The tag of the label's point.
The index of the label's point in the points array.
In addition, these values can be accessed using the this object.
Specifies a callback function that returns an object with options for a specific point.
Information on the point to be customized
A configuration object for the point
By default, all the points of a pie are displayed identically. But you can specify different appearance for certain points using the customizePoint field. Assign a function to this field. This function should return an object with options that should be changed for a certain point. The following pie options can be changed.
When implementing a callback function for this option, use the argument or value of a point. They can be accessed using the following fields of the function's parameter.
The argument of the point.
The value of the point.
The tag of the point.
The index of the point in the points array.
In addition, these values can be accessed using the this object.
Specifies a data source for the chart.
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 Data Binding topic.
Specifies the diameter of the pie.
This option accepts a number that identifies the ratio between the pie's diameter and the container's width or height (depending on which of them is lesser). For example, assume that the widget's container is 300x500 pixels and the diameter option is set to 0.5. Then, the resulting diameter of the pie will be:
0.5 * min(300,500) = 0.5 * 300 = 150 pixels
Use the onDone option instead.
Use the onDrawn option instead.
Use the onIncidentOccurred option instead.
Specifies dxPieChart legend options.
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.
Use the onLegendClick option instead.
Specifies the appearance of the loading indicator.
Usually, the widget is quick enough to draw itself instantly for a viewer. There are, however, cases, when the widget takes longer to be drawn. In such cases, displaying the loading indicator is recommended. To display the loading indicator, assign true to the show field of the loadingIndicator object. Use other fields of this object to change the appearance of the loading indicator.
Specifies the blank space between the chart's extreme elements and the boundaries of the area provided for the widget (see size) in pixels.
Set the required values for the left, right, top and bottom margins using the corresponding properties of the margin object.
A handler for the disposing event.
Assign a function to perform a custom action when you dispose of this component.
A handler for the done event.
A handler for the drawn event.
If you need to perform specific actions when the widget has finished drawing itself, assign a callback function to the drawn option. When implementing this function, you can access the drawn widget using the function's parameter.
A handler for the incidentOccurred event.
When an error or warning appears, the widget notifies you by passing a message to the browser console. This message contains the ID of the incident, a brief description, and a link to the Errors and Warnings section where further information about this incident can be found. However, you can handle errors and warnings in the way that you require. To do this, implement a callback function performing the required actions and assign it to the onIncidentOccurred option. Within this function, you can use information about the incident that occurred. This information can be accessed from the target field of the object passed to the callback function as a parameter. This information includes the following.
Contains the ID of the incident. The full list of IDs can be found in the Errors and Warnings section.
Contains the type of the incident. This field equals 'error' for errors or 'warning' for warnings.
Contains the argument of the incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of the data source field that was not specified correctly, or the name of the option that was not set properly.
Contains the text passed to the browser console. This text includes the content of the args field, if there are any.
Contains the name of the widget that produced the error or warning.
Contains the currently used version of the ChartJS library.
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, the widget produces a warning. The function assigned to the onIncidentOccurred field is used to display the warning message under the widget. Uncheck the check box to restore the previous size of the chart container.
A handler for the legendClick event.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the point that corresponds to the clicked legend item. To learn about point members you can use, refer to the description of the Point object.
NOTE: A click on the legend causes the pointClick event to fire after the legendClick event. To prevent this behavior, assign true to the jQueryEvent.cancel field of the object passed to the legendClick event handler as the argument.
Alternatively, you can navigate to a specific URL when the legendClick event fires. For this purpose, assign this URL to the onLegendClick option.
To learn more about handling click operations, and to see an example, refer to the Click Handling topic.
A handler for the optionChanged event.
Provides function parameters.
Assign a function to perform a custom action after an option of the component is changed.
A handler for the pointClick event.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the clicked series point. To learn about point members, refer to the description of the Point object.
NOTE: The function handling the pointClick event is also called when a user clicks the legend, but only if it is not canceled in the legendClick event handler.
Alternatively, you can navigate to a specific URL when the pointClick event fires. For this purpose, assign this URL to the onPointClick option.
To learn more about how to handle click operations, and to see an example, refer to the Click Handling topic.
A handler for the pointHoverChanged event.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose hover state has been changed. To identify whether this point was hovered over or hovered out, call its isHovered() method. To discover point fields and methods, refer to the Point class description.
To learn more about how to handle hover operations, refer to the Hover Handling topic.
A handler for the pointSelectionChanged event.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose selection state has been changed. To identify whether this point was selected or deselected, call its isSelected() method. To discover point fields and methods that you can use, refer to the Point class description.
To learn more about how to handle selection, refer to the Selection Handling topic.
A handler for the tooltipHidden event.
The point's tooltip becomes invisible when a user hovers the mouse cursor over another series point. 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 by handling the tooltipHidden event. To do this, implement a handling function and assign it to the onTooltipHidden option. When implementing this function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose tooltip becomes hidden.
A handler for the tooltipShown event.
The point's tooltip appears when a user hovers the mouse cursor over the point. In addition, you can show a tooltip in code, using the showTooltip() method of the chart or point.
When a tooltip appears, you can perform specific actions by handling the tooltipShown event. To do this, implement a handling function and assign it to the onTooltipShown option. When implementing this function, use the object passed to it as its parameter. Among the fields of this object, you can find the series point whose tooltip appears.
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.
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.
Notifies a widget that it is embedded into an HTML page that uses a path modifier.
Use the onPointClick option instead.
Use the onPointHoverChanged option instead.
Use the onPointSelectionChanged option instead.
Specifies whether a single point or multiple points can be selected in the chart.
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.
Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates.
When this option is set to true, the widget will be redrawn automatically in case the size of its parent window changes.
NOTE: To redraw the widget after the size of its container has changed, call the render() method of the widget instance.
Specifies how the chart must behave when series point labels overlap.
Series point labels display series point values. If the series in your pie chart contains a large number of points, point labels may overlap. In this case, specify how the chart must resolve overlapping using the resolveLabelOverlapping option. To hide certain labels, set this option to 'hide'. Labels to be hidden will be determined automatically. To resolve overlapping by shifting labels from their positions, set the resolveLabelOverlapping option to 'shift'. In this case, we recommend displaying label connectors so that pie segments are connected with their labels.
Specifies whether or not the widget supports right-to-left representation.
The most common scenario is switching all the widgets to a right-to-left reading order. In this instance, set the DevExpress.rtlEnabled field to true. If you need to switch the reading order in a particular widget, use the rtlEnabled configuration option of this widget.
Specifies options for the series of the dxPieChart widget.
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.
Specifies the size of the widget in pixels.
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.
Sets the name of the theme to be used in the chart.
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, their implementation and customization, refer to the Themes topic.
Specifies a title for the chart.
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.
Specifies tooltip options.
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.
Use the onTooltipHidden option instead.
Use the onTooltipShown option instead.