Skip to content

Instantly share code, notes, and snippets.

@MohamedAlaa MohamedAlaa/index.html

forked from enjalot/index.html
Last active Jul 3, 2017
What would you like to do?
Show value in Pie Chart example with D3.js
<!DOCTYPE html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<style type="text/css">
.slice text {
font-size: 16pt;
font-family: Arial;
<script type="text/javascript">
var w = 300, //width
h = 300, //height
r = 100, //radius
color = d3.scale.category20c(); //builtin range of colors
data = [{"label":"one", "value":20},
{"label":"two", "value":50},
{"label":"three", "value":30}];
var vis ="body")
.append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return data[i].value; }); //get the label from our original data array

This comment has been minimized.

Copy link

denisinla commented Jul 22, 2014

Working fiddle ;)


This comment has been minimized.

Copy link

andreaj8 commented May 15, 2015

Hello ,
I used your example with Success in HTML

But I need to export the graph in SVG , All Other Charts works perfectly , but the PIE no .
Do you have any idea?
(in svg is not drawn correctly, they appear only parts of the pie , and misaligned)


This comment has been minimized.

Copy link

sanj-sri88 commented Jul 3, 2017

I want to use your example inside of table .
Table should be generate dynamic according to json array data and inside of table, last column I want to show PIE chart .
Please can you suggest me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.