Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

Google Chart API - Pie Chart Stroke options not taking affect

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.

Upvotes: 7

Views: 7981

Answers (1)

Matt Dodge
Matt Dodge

Reputation: 11142

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"
    });

Upvotes: 11

Related Questions