Clear Up
SharpKit Reference

Pie Class

Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different categories that also have a meaning as a whole. As with all other series, the Pie Series must be appended in the series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the pie series could be:

var store = Ext.create('', {
            fields: ['name', 'data'],
            data: [
            { 'name': 'metric one',   'data': 10 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data':  5 },
            { 'name': 'metric four',  'data':  2 },
            { 'name': 'metric five',  'data': 27 }
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: store,
            theme: 'Base:gradients',
            series: [{
            type: 'pie',
            angleField: 'data',
            showInLegend: true,
            tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
            // calculate and display percentage on hover
            var total = 0;
            store.each(function(rec) {
            total += rec.get('data');
            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
            highlight: {
            segment: {
            margin: 20
            label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'

In this configuration we set pie as the type for the series, set an object with specific style properties for highlighting options (triggered when hovering elements). We also set true to showInLegend so all the pie slices can be represented by a legend item.

We set data as the value of the field to determine the angle span for each pie slice. We also set a label configuration object where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.

We set contrast to true to flip the color of the label if it is to similar to the background color. Finally, we set the font family and size through the font parameter.

Namespace: Ext.chart.series



Name Description
angleField The store record field name to be used for the pie angles. The values bound to this field name must be positive real numbers. Defaults to: false
colorSet An array of color values which will be used, in order, as the pie slice fill colors.
donut Whether to set the pie chart as donut chart. Default's false. Can be set to a particular percentage to set the radius of the donut chart. Defaults to: false
field Alias for angleField.
highlightDuration The duration for the pie slice highlight effect. Defaults to: 150
lengthField The store record field name to be used for the pie slice lengths. The values bound to this field name must be positive real numbers. Defaults to: false
style An object containing styles for overriding series styles from Theming. Defaults to: {}
xField Alias for angleField.


Name Description
drawSeries() Draws the series for the current chart.
unHighlightItem(object) Un-highlights the specified item. If no item is provided it will un-highlight the entire series.
© Copyright 2005-2011 SharpKit. All rights reserved.