I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image always downloads with a transparent background, which is not what I need. I tried many options, nothing really worked.
And suggestions?
Here's one way to get a fully-opaque version of your ChartJS:
Wait until the chart is fully animated out and complete. You can do this by adding the onAnimationComplete property to the chart.
In the onAnimationComplete function:
drawImage the ChartJS canvas over the white-filled temp canvasHere's how that might be done:
var ctx = document.getElementById(canvas).getContext(2d);
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
onAnimationComplete:function(){
var tcanvas=document.createElement('canvas');
var tctx=tcanvas.getContext('2d');
tcanvas.width=ctx.canvas.width;
tcanvas.height=ctx.canvas.height;
tctx.fillStyle='white';
tctx.fillRect(0,0,tcanvas.width,tcanvas.height);
tctx.drawImage(canvas,0,0);
var img=new Image();
img.onload=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});
Here's example code and a Demo:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var lineChartData = {
labels : [January,February,March,April,May,June,July],
datasets : [
{
label: My First dataset,
fillColor : rgba(220,220,220,0.2),
strokeColor : rgba(220,220,220,1),
pointColor : rgba(220,220,220,1),
pointStrokeColor : #fff,
pointHighlightFill : #fff,
pointHighlightStroke : rgba(220,220,220,1),
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: My Second dataset,
fillColor : rgba(151,187,205,0.2),
strokeColor : rgba(151,187,205,1),
pointColor : rgba(151,187,205,1),
pointStrokeColor : #fff,
pointHighlightFill : #fff,
pointHighlightStroke : rgba(151,187,205,1),
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById(canvas).getContext(2d);
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
onAnimationComplete:function(){
var tcanvas=document.createElement('canvas');
var tctx=tcanvas.getContext('2d');
tcanvas.width=ctx.canvas.width;
tcanvas.height=ctx.canvas.height;
tctx.fillStyle='white';
tctx.fillRect(0,0,tcanvas.width,tcanvas.height);
tctx.drawImage(canvas,0,0);
var img=new Image();
img.onload=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js></script>
<h4>ChartJS line chart</h4>
<div style=width:30%>
<div>
<canvas id=canvas height=450 width=600></canvas>
</div>
</div>
<h4>Fully opaque chart as image</h4>
