- Skip to main content
- Skip to "About this site"

# Charts and graphs - Customizing pie charts

- Documentation
- Questions or comments?

- Charts and graphs - Simple and easy
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types
- Customizing pie charts (current)
- Specific test cases

## Donut preset `wb-charts-donut`

View code

    // FYI - The "Donut" preset is already defined by default, this are just to show an example on you may reproduce it in your own preset.
    window[ "wb-charts" ] = {
    	flot: {
    		donut: {
    			series: {
    				pie: {
    					show: true,
    					radius: 1,
    					label: {
    						show: true,
    						radius: 1,
    						threshold: 0.08
    					},
    					tilt: 0.5,
    					innerRadius: 0.45,
    					startAngle: 1
    				}
    			},
    			grid: {
    				hoverable: true
    			}
    		},
    	charts: {
    		donut: {
    			decimal: 1
    		}
    	}
    };

Donut preset `wb-charts-donut`
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Default

Flot settings:

    data-flot = '{ }'

Defaults
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Segment labelling

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1
    			}
    		}
    	}
    }'

    <table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true } } } }'>

Segment labeling
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Donut hole

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1
    			},
    			"innerRadius": 0.45
    		}
    	}
    }'

    <table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45 } } }'>

Donut hole
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Tilted pie

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5
    		}
    	}
    }'

    <table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>

Tilted pie
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Rectangular pie

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 5000,
    			"label": {
    				"show": true,
    				"radius": 1
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5
    		}
    	}
    }'

    <table class="wb-charts wb-charts-pie wb-charts-nolegend table" data-flot='{"series": { "pie": { "radius": 5000,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>

Rectangular pie
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7 | 10 | 4 | 14 | 15 | 7 | 23 | 8 | 13

## Hovering effect

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5
    		}
    	},
    	"grid": {
    		"hoverable": true
    	}
    }'

    <table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }'>

Hovering effect
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Decimal precision

Plugin settings:

    data-wb-charts = '{
    	"decimal": 1
    }'

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5
    		}
    	},
    	"grid": {
    		"hoverable": true
    	}
    }'

    <table class="wb-charts wb-charts-pie wb-charts-decimal-1 table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>

Decimal precision
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Labelling threshold

Plugin settings:

    data-wb-charts = '{
    	"decimal": 1
    }'

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1,
    				"threshold": 0.08
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5
    		}
    	},
    	"grid": {
    		"hoverable": true
    	}
    }'

    <table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>

Labelling threshold
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

## Starting angle

Plugin settings:

    data-wb-charts = '{
    	"decimal": 1
    }'

Flot settings:

    data-flot = '{
    	"series": {
    		"pie": {
    			"radius": 1,
    			"label": {
    				"show": true,
    				"radius": 1,
    				"threshold": 0.08
    			},
    			"innerRadius": 0.45,
    			"tilt": 0.5,
    			"startAngle": 1
    		}
    	},
    	"grid": {
    		"hoverable": true
    	}
    }'

    <table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5, "startAngle": 1 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>

Start Angle
| Series 1 | Series 2 | Series 3 | Series 4 | Series 5 | Series 6 | Series 7 | Series 8 | Series 9
Default | 7.7 | 10.10 | 4.4 | 14.14 | 15.15 | 7.7 | 23.23 | 8.8 | 12.12

Date modified:
  2015-03-10