---
{
	"title": "Charts and graphs - Customizing pie charts",
	"language": "en",
	"category": "Plugins",
	"description": "Customizing a pie chart to create a donut chart.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "piecustom",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-en.html">Charts and graphs - Simple and easy</a></li>
	<li><a href="labelsandreferencevalue-en.html">Labels and reference values</a></li>
	<li><a href="custom-en.html">Customization, custom presets and multiple charts and graphs types</a></li>
	<li><a href="piecustom-en.html">Customizing pie charts (current)</a></li>
	<li><a href="testing-en.html">Specific test cases</a></li>
</ul>

<hr />

<section>
	<h2>Donut preset <code>wb-charts-donut</code></h2>

	<details>
		<summary>View code</summary>
		<pre><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
		}
	}
};</code></pre>
	</details>

	<table class="wb-charts wb-charts-donut table">
		<caption>Donut preset <code>wb-charts-donut</code></caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7.7</td>
				<td>10.10</td>
				<td>4.4</td>
				<td>14.14</td>
				<td>15.15</td>
				<td>7.7</td>
				<td>23.23</td>
				<td>8.8</td>
				<td>12.12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Default</h2>
	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{ }'</code></pre>

	<table class="wb-charts wb-charts-pie table">
		<caption>Defaults</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7</td>
				<td>10</td>
				<td>4</td>
				<td>14</td>
				<td>15</td>
				<td>7</td>
				<td>23</td>
				<td>8</td>
				<td>13</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Segment labelling</h2>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			}
		}
	}
}'</code></pre>

	<pre><code>&lt;table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true } } } }'&gt;</code></pre>

	<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true } } } }'>
		<caption>Segment labeling</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7</td>
				<td>10</td>
				<td>4</td>
				<td>14</td>
				<td>15</td>
				<td>7</td>
				<td>23</td>
				<td>8</td>
				<td>13</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Donut hole</h2>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45
		}
	}
}'</code></pre>

	<pre><code>&lt;table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45 } } }'&gt;</code></pre>

	<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45 } } }'>
		<caption>Donut hole</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7</td>
				<td>10</td>
				<td>4</td>
				<td>14</td>
				<td>15</td>
				<td>7</td>
				<td>23</td>
				<td>8</td>
				<td>13</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Tilted pie</h2>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'</code></pre>

	<pre><code>&lt;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 } } }'&gt;</code></pre>
	<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 } } }'>
		<caption>Tilted pie</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7</td>
				<td>10</td>
				<td>4</td>
				<td>14</td>
				<td>15</td>
				<td>7</td>
				<td>23</td>
				<td>8</td>
				<td>13</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Rectangular pie</h2>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 5000,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'</code></pre>

	<pre><code>&lt;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 } } }'&gt;</code></pre>

	<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 } } }'>
		<caption>Rectangular pie</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7</td>
				<td>10</td>
				<td>4</td>
				<td>14</td>
				<td>15</td>
				<td>7</td>
				<td>23</td>
				<td>8</td>
				<td>13</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Hovering effect</h2>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'</code></pre>

	<pre><code>&lt;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 } }'&gt;</code></pre>

	<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 } }'>
		<caption>Hovering effect</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7.7</td>
				<td>10.10</td>
				<td>4.4</td>
				<td>14.14</td>
				<td>15.15</td>
				<td>7.7</td>
				<td>23.23</td>
				<td>8.8</td>
				<td>12.12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Decimal precision</h2>

	<p><strong>Plugin settings:</strong></p>
	<pre><code>data-wb-charts = '{
	"decimal": 1
}'</code></pre>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'</code></pre>

	<pre><code>&lt;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 }'&gt;</code></pre>

	<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 }'>
		<caption>Decimal precision</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7.7</td>
				<td>10.10</td>
				<td>4.4</td>
				<td>14.14</td>
				<td>15.15</td>
				<td>7.7</td>
				<td>23.23</td>
				<td>8.8</td>
				<td>12.12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labelling threshold</h2>

	<p><strong>Plugin settings:</strong></p>
	<pre><code>data-wb-charts = '{
	"decimal": 1
}'</code></pre>

	<p><strong>Flot settings:</strong></p>
	<pre><code>data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1,
				"threshold": 0.08
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'</code></pre>

	<pre><code>&lt;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 }'&gt;</code></pre>

	<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 }'>
		<caption>Labelling threshold</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7.7</td>
				<td>10.10</td>
				<td>4.4</td>
				<td>14.14</td>
				<td>15.15</td>
				<td>7.7</td>
				<td>23.23</td>
				<td>8.8</td>
				<td>12.12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Starting angle</h2>

	<p><strong>Plugin settings:</strong></p>
	<pre><code>data-wb-charts = '{
	"decimal": 1
}'</code></pre>

	<p><strong>Flot settings:</strong></p>
	<pre><code>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
	}
}'</code></pre>

	<pre><code>&lt;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 }'&gt;</code></pre>

	<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 }'>
		<caption>Start Angle</caption>
		<thead>
			<tr>
				<td></td>
				<th>Series 1</th>
				<th>Series 2</th>
				<th>Series 3</th>
				<th>Series 4</th>
				<th>Series 5</th>
				<th>Series 6</th>
				<th>Series 7</th>
				<th>Series 8</th>
				<th>Series 9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Default</th>
				<td>7.7</td>
				<td>10.10</td>
				<td>4.4</td>
				<td>14.14</td>
				<td>15.15</td>
				<td>7.7</td>
				<td>23.23</td>
				<td>8.8</td>
				<td>12.12</td>
			</tr>
		</tbody>
	</table>
</section>
