Background color for jqplot pie chart

Question

I have a page and I have two pie charts on the page, I want to display a different background color for the 2 charts, but it is embedded in the css file! is it possible to use any color? or make it transparent? my code is:

PieTimer[index] = jQuery.jqplot(PieTimerId, TimerValuesArray, { seriesDefaults: { shadow: false, seriesColors: ["#13e837", "#6e869b"], renderer: jQuery.jqplot.PieRenderer, rendererOptions: { highlightMouseOver: false, diameter: 40, padding: 0, showDataLabels: false, startAngle: 270, sliceMargin: 0, shadowOffset: 0, shadowAlpha: 0, shadowDepth: 0, drawBorder: false, shadow: false, borderWidth: 0 } }, legend: { show: false, location: 'w'} } ); 

I am wondering if I can set a property (for example: backgroundcolor ...) when drawing a chart? 10x

Answer 1

According to the jqPlot options page , you have an option called grid , where you can set all the grid options, one of these options is the background color.

 grid: { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc', // *Color of the grid lines. background: '#fffdf6', // CSS color spec for background color of grid. borderColor: '#999999', // CSS color spec for border around grid. borderWidth: 2.0, // pixel width of border around grid. shadow: true, // draw a shadow for grid. shadowAngle: 45, // angle of the shadow. Clockwise from x axis. shadowOffset: 1.5, // offset from the line of the shadow. shadowWidth: 3, // width of the stroke for the shadow. shadowDepth: 3, // Number of strokes to make when drawing shadow. // Each stroke offset by shadowOffset from the last. shadowAlpha: 0.07, // Opacity of the shadow renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. rendererOptions: {} // options to pass to the renderer. Note, the default // CanvasGridRenderer takes no additional options. }, 

Usage example:

 var plot1 = jQuery.jqplot ('chart1', [data], { seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer }, grid: { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc', // CSS color spec of the grid lines. background: '#ffff66', // CSS color spec for background color of grid. borderColor: '#999999', // CSS color spec for border around grid. borderWidth: 2.0, // pixel width of border around grid. shadow: true, // draw a shadow for grid. shadowAngle: 45, // angle of the shadow. Clockwise from x axis. shadowOffset: 1.5, // offset from the line of the shadow. shadowWidth: 3, // width of the stroke for the shadow. shadowDepth: 3 }, legend: { show:true, location: 'e' } } ); 

I hope this can help you!