Hide and Show Behavior - Use this chart-level attribute to allow allowing a user to hide and unhide a series by clicking the chart legend markers. Upon hiding/showing a series, the With Rescale setting will result in the pie chart automatically recalculating the percent values displayed on the label to factor in the selection change. Selecting a slice of the pie will highlight and explode the slice.

Legend size - To decrease the amount of space between the pie chart and legend, the legend size attribute can be set to a value, in pixels or percent. Click the Increase Legend Size or Decrease Legend Size buttons to trigger a change in the legend size in relation to the chart. A dynamic action is used to update the region size. Refer to the ojChart API guide for more information on this setting.

For more information on the Pie chart settings, refer to the Oracle JET Cookbook Pie Chart: Hide & Show and Pie Chart: Animations examples.

Pie Other Threshold - Use this chart-level attribute to attribute to aggregate small slices of the chart into an "Other" node. The attribute can be used to specify the smallest slice that will be displayed as a ratio of the total pie value.

Label Position - The series-level attribute is set to Center, rendering the label in the center of the slice.

Sorting - Donut chart slices can be sorted based on the values. Through the use of Dynamic actions, use the Ascending/Descending buttons to the top right of the chart to change the sorting of the data items on the charts.

For more information on the Pie chart sort settings, refer to the Oracle JET Cookbook Pie Chart: Sorting example.

JavaScript Code - Use this chart-level attribute to define a JavaScript function, to customize the chart attributes and data, allowing you to extend your chart to incorporate attributes not declaratively available in Oracle Application Express. The code used in this example is as follows:

function( options ){ 

    // Create a data label function that takes a dataContext argument. The dataContext contains information on the data item,
    // including id, series, group, value, data, seriesData, groupData and component. The function should return the desired data label string or number.
    this.donutSliceLabel = function( dataContext ){
        var series_name,
            percent = Math.round( dataContext.value/dataContext.totalValue*100 );
        
        if ( dataContext.seriesData ) {
            series_name = dataContext.seriesData.name;
        } else {
            // NOTE: when defining an 'Other' segment, there is no associated entry in dataContext.seriesData for that new segment
            // Ensure a default label 'Other' is defined in this instance.
            series_name = 'Other';
        }
        return series_name + " " + percent + "% ( " + dataContext.value + " )";
    }
    
    // Pass the data label function to the chart dataLabel attribute.
    // dataLabel: A JET function that returns a custom data label. The function takes a dataContext argument, provided by the chart.
    // Review API guide for details: http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#dataLabel
    options.dataLabel = donutSliceLabel; 
    return options; 
}

Label Position - The series-level attribute is set to Outside Slice, to ensure lengthy labels are visible, and rendered outside the slice of the donut.

For more information on the custom label settings, refer to the Oracle JET Cookbook Chart: Data Label Callback example.

Link Target - Use this series-level attribute to define a JavaScript call to set the value of a hidden page item to the currently selected product ID.

Dynamic Action - Define a dynamic action, to be triggered upon a change to the hidden page item. That action will trigger a refresh of the Orders bar chart, to reflect the orders associated with the selected product.

Page Items To Submit - Ensure this series-level attribute is set to the name of the hidden page item, to ensure its value is used at the time of processing the chart SQL query.