I have a pie chart displaying using JqPlot. I would be interested in changing the actual colors of the slice, and have had no luck so far.

I came across this link and tried the solution, but I'm not sure if I'm putting it in the wrong place (Have tried inserting it in a few locations in the code) as when I have it in, the pie chart no longer displays (and in fact stops the rest of the charts on the page from displaying).

Here is the javascript code for the pie chart:

$(document).ready(function () {
        var data = [['US',33], ['IE',30], ['GB',23], ['AU',7], ['CA',4], ['RoW',7]];
        var plot1 = jQuery.jqplot('Countries', [data],
        {
            seriesDefaults: {
                // Make this a pie chart.
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    // Put data labels on the pie slices.
                    // By default, labels show the percentage of the slice.
                    sliceMargin: 5,
                    showDataLabels: true,
                }
            },
            legend: { show: true, border: false, /*placement: 'outsideGrid', location: 'w'*/location: 'e', border: 'none' },
            grid: {borderWidth:0, shadow:false, background: '#FFFFFF'}

        }
      );
    });

Does anyone have any ideas?

I have a pie chart displaying using JqPlot. I would be interested in changing the actual colors of the slice, and have had no luck so far.

I came across this link and tried the solution, but I'm not sure if I'm putting it in the wrong place (Have tried inserting it in a few locations in the code) as when I have it in, the pie chart no longer displays (and in fact stops the rest of the charts on the page from displaying).

Here is the javascript code for the pie chart:

$(document).ready(function () {
        var data = [['US',33], ['IE',30], ['GB',23], ['AU',7], ['CA',4], ['RoW',7]];
        var plot1 = jQuery.jqplot('Countries', [data],
        {
            seriesDefaults: {
                // Make this a pie chart.
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    // Put data labels on the pie slices.
                    // By default, labels show the percentage of the slice.
                    sliceMargin: 5,
                    showDataLabels: true,
                }
            },
            legend: { show: true, border: false, /*placement: 'outsideGrid', location: 'w'*/location: 'e', border: 'none' },
            grid: {borderWidth:0, shadow:false, background: '#FFFFFF'}

        }
      );
    });

Does anyone have any ideas?

• javascript
• jqplot
• pie-chart

• 1 have a look at seriesColors - jqplot.com/docs/files/jqPlotOptions-txt.html – Neil Commented Sep 18, 2012 at 11:43
• 1 @Neil That worked perfectly. Do you want to put your link as an answer and I will mark it as correct? – 109221793 Commented Sep 18, 2012 at 12:29

1 Answer 1

You can apply seriesColors to an options object eg:

options =
{
    seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575" ]
}

The relevant documentation can be found at jqPlot Options.