I'm playing around with the Google pie chart API.
Everything is working fine, except for the options for stroke: and strokeWidth: . No matter what I set them to, nothing changes.
I have a dark background colour, and the lines between the slices are white. I'm trying to change them to the same colour as the background. I also can't change the width of these lines.
Here is my code:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('poll-chart')).
draw(data, {
title:"",
fontSize: "12",
legend: "none",
width: 200,
height: 200,
chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" }
});
}
</script>
I am referencing the Google API from the options on this page:
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Configuration_Options
I'm not sure if I am doing something wrong or not.
Your help or guidence would be much appreciated!
Thanks, Michael.
EDIT:
Ok, so it seems that the properties I was messing with are concerned with the outer stroke of the whole chart and not for each slice. I am still stuck though. Does anyone know how I can close the white gaps between the slices? I cannot find anything on Google about this.
While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.
In a particular screen size, the Google pie chart will display properly. But if you want to load Google pie chart properly in different screen resolution, it needs to responsive. To make Google pie chart responsive, HTML and JavaScript code need to be modified.
Plot area is a window with in the Chart area. It contains the actual chart itself, and includes plotted data, data series, category, and value axis.
Use pieSliceBorderColor
. This might have been added since this question was asked but for any future reference this is how you do it. Note: this will only work on a 2D pie chart
new google.visualization.PieChart(document.getElementById('poll-chart')).
draw(data, {
title:"",
fontSize: "12",
legend: "none",
width: 200,
height: 200,
chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" },
// add this line
pieSliceBorderColor : "#5A5A5A"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With