Charts and graphs - Customizing pie charts

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: