JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.pie.js"></script>
	<div id="content">
		<div class="demo-container">
			<div id="placeholder" class="demo-placeholder"></div>
		</div>
	</div>

CSS

* {	padding: 0; margin: 0; vertical-align: top; }

body {
	font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}

a {	color: #069; }
a:hover { color: #28b; }

h2 {
	margin-top: 15px;
	font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
}

h3 {
	margin-left: 30px;
	font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
	color: #666;
}

p {
	margin-top: 10px;
}


#content {
	width: 880px;
	margin: 0 auto;
	padding: 10px;
}


.demo-container {
	width: 850px;
	height: 450px;
	padding: 20px 15px 15px 15px;
	margin: 15px auto 30px auto;
	border: 1px solid #ddd;
	background: #fff;
	background: linear-gradient(#f6f6f6 0, #fff 50px);
	background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.pie-link
{
    color:White;
    font-weight:bold;
}
.demo-placeholder {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

.legend table {
	border-spacing: 5px;
}

JavaScript

$(function () {
	        var data = [],
			series = 4;

	        //for (var i = 0; i < series; i++) {
	            data[0] = {
	                label: "<a class='pie-link' href='#'>News</a>",
	                data: 22
	            }

	            data[1] = {
	                label: "<a class='pie-link' href='#'>Misc</a>",
	                data: 22
	            }

	            data[2] = {
	                label: "<a class='pie-link' href='#'>Events</a>",
	                data: 22
	            }

	            data[3] = {
	                label: "<a class='pie-link' href='#'>Disclaimer</a>",
	                data: 22
	            }
	        //}

	        var placeholder = $("#placeholder");

	        placeholder.unbind();

	        $.plot(placeholder, data, {
	            series: {
	                pie: {
	                    show: true,
	                    radius: 1/2,
	                    startAngle: 3 / 4,
	                    label: {
	                        show: true,
	                        radius: 1 / 4,
	                        formatter: labelFormatter,
	                        background: {
	                            color: "#1d1d1d"
	                        }
	                    }
	                }
	            },
	            legend: {
	                show: false
	            },
	            grid: {
	                hoverable: true,
	                clickable: true
	            }
	        });

	        $('.pie-link').click(function (e) {
	            alert($(this).html());
	        });
	    });

	function labelFormatter(label, series) {
		return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "</div>";
	}