Hi,

excuse me, solved. It was enough to change "document" with the control name. Works fine

Hi,

this solution works for me. When there are two graphs on page only first set background. Any trick for this situation?

Thanks

Hi,

I've tried your proposed solution above and it doesn't seem to make a difference for me, please could you elaborate?

I've also put a breakpoint inside the refreshCompleted function and it doesn't even go in there when I do an export of the chart.

Could really do with this being resolved as it's fundamental to our project...

Here's my script:

$(contentdiv).igDataChart({
dataSource: stackeddatanew,
width: chartsettings.ChartWidth + '%', // '100%',
height: chartsettings.ChartHeight + '%', //'100%',
title: '',
isHightlightEnabled: chartsettings.ChartHighlightEnabled,
axes: [{
name: axiss.AllAxis[0]["AxisName"],
type: axiss.AllAxis[0]["AxisTypeString"],
//label: xtitle, //xcolumn,
title: axiss.AllAxis[0]["AxisTitle"], //xcolumn,
gap: axiss.AllAxis[0]["AxisGap"],
},
{
name: axiss.AllAxis[1]["AxisName"], //"Count",
type: axiss.AllAxis[1]["AxisTypeString"],
title: axiss.AllAxis[1]["AxisTitle"] //"Count"
}],
series: [function () {
var seriesObj = {
name: "parent",
xAxis: axiss.AllAxis[0]["AxisName"],
yAxis: axiss.AllAxis[1]["AxisName"], //"Count",
type: columntype,
outline: seriess.AllSeries[0]["Outline"],
//title: seriess.AllSeries[numseries]["ValueMemberPath"],
//isHighlightingEnabled: true,
series: newseriesobj
};
//seriesObj.radius = 0;
return seriesObj;
}()],
horizontalZoomable: chartsettings.ChartHorizontalZoomable,
verticalZoomable: chartsettings.ChartVerticalZoomable,
windowResponse: chartsettings.WindowResponse,
legend: { element: "legendtile_" + tileid },
refreshCompleted: function () {
var context,
canvas = document.querySelector("canvas"),
h = parseInt(canvas.getAttribute("height")),
w = parseInt(canvas.getAttribute("width"));

context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(0, 0, w, h);
}
});

Hi Michael Lui,

I'm providing you and approach to achieve that. You have to handle the "refreshCompleted" event of the chart and color its background canvas with the desired color. This will change the color of the whole chart, and when you export it as an image - it will not be transparent. The code has to be as the following:

refreshCompleted: function () {
     var context,
          canvas = document.querySelector("canvas"),
          h = parseInt(canvas.getAttribute("height")),
          w = parseInt(canvas.getAttribute("width"));

   context = canvas.getContext('2d');

   context.fillStyle = "blue";
   context.fillRect(0, 0, w, h);

}

Thanks.  It works for the plot area, but what about the whole image including the area of the axis' labels, titles, etc?  Right now, the chart background color displayed on the page is controlled by the style sheet ".ui-chart-container", which doesn't have any affects on the exportImage.  Please advise, thanks.