score:4
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:
- create an in-memory temporary canvas of equal size as your chart.
- fill the temp canvas with white
drawimage
the chartjs canvas over the white-filled temp canvas- create an image from the temp canvas.
here'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>
score:0
you can solve this pretty simply, if you're willing to change the code in chart.js.
there's a function in chart.js called clear. you can find the clear function by searching for clearrect. the clear function is called every time chart.js redraws the chart, so that's where we'll set the background. right below the line with clearrect, add the following lines.
...
chart.ctx.clearrect(0,0,chart.width,chart.height);
// add these 3 lines
chart.ctx.rect(0, 0, chart.width, chart.height);
chart.ctx.fillstyle="#fff"; // put your desired background color here
chart.ctx.fill();
...
score:3
why don't you try to use css? a canvas element is just like a normal html element right? so you can either set it's background colour or set it's background to an image using css.
$('#mychart').css('background-color', 'rgba(0, 0, 0, 0)'); // this worked for me but i'm guessing you can set a background image using css like you normally do.
score:17
here's a solution that works perfectly, also when saving to an image file (like png). i'm blatantly copying this from @etimberg at the chartjs issue tracker.
chart.plugins.register({
beforedraw: function(chartinstance) {
var ctx = chartinstance.chart.ctx;
ctx.fillstyle = "white";
ctx.fillrect(0, 0, chartinstance.chart.width, chartinstance.chart.height);
}
});
this should go before your chart in the source.
Source: stackoverflow.com
Related Query
- Chart.js line chart set background color
- set background color to save canvas chart
- how to set chart.js grid color for line chart
- Chart.js - Color specific parts of the background in a line chart
- Remove background color in chartjs line chart
- How to change background color of labels in line chart from chart.js?
- Chart JS Line Graph multitooltipkey background color issue
- Is it possible to set the background color of a sector in a radar chart in Chart.js?
- react-chartjs-2 how to set multiple background levels within a line chart
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
- Line chart Change background color of shaded region on hover (Chartjs)
- ChartJS set color of Line chart points depending on Y Axis
- Chart.js - How to set a line chart dataset as disabled on load
- Chart area background color chartjs
- How set color family to pie chart in chart.js
- chart.js Line chart with different background colors for each section
- Unable to parse color in line chart (angular-chart.js)
- How to set a full length background color for each bar in chartjs bar
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add gradient background to Line Chart [vue-chart.js]
- How to set single color on each bar in angular chart js
- How to add multiple background color in line charts
- Apply color only to lower part of Chart.js line chart
- How to add area with break on line chart with fill color
- Change Axis Line color in Chart created using chart.js
- How to use segment property to color line / border color based on value in chart js?
- Set minimum number of steps in line chart
- change stroke line color in chart according to datasets in react native
- Chart js background color changes on click
- How to use set the color for each bar in a bar chart using chartjs?
More Query from same tag
- Combo Bar Line Chart with Chart.js
- django 'LineChart' object has no attribute 'get'
- Adding a Date adapter for Time Cartesian axis from a cdn
- how to modify and make labels box width fixed without changes of chart.js
- Updating Chartjs Data with Response from POST Call?
- interactive Button doesn't hide the chart as I intended
- How to change axis font in PrimeFaces and Chart.js
- Chart.JS multiple plugins do not operate
- Chart.js - Multiple generateLegend() functions on same page
- Chart.js How to get min-max values of X axis?
- How to filter Chart JavaScript Dashboard by Year through dropdown after the MySQL count query?
- ChartJs: Different color fill between points makes lines straight...need curves (lineTension)
- is it possible to sum up the properties of an array of objects and to filter it according to another property?
- Update Chart JS with date range selector
- How to access all data in a function with ChartJs?
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- i want display chart based on selected charts using chartJS
- How do i find area under the graph
- how to remove odd number from yaxes in chartjs using angular?
- I want to draw a horizontal line
- Android WebView HTML5 canvas error
- math.max() doesn't work in IE
- TS how can I use a class variable inside method?
- How to avoid detached HTMLCanvasElements when updating canvas with JavaScript?
- chartjs : uncaught exception: 0 and X are too far apart with stepSize of Y
- Setting Common labels and background color common for all the charts in ChartJs
- chart.js plotting timeseries
- Chartjs isn't rendering bar chart, even though chart variable shows correctly when console logged
- How to set a time scale to a ChartJS chart from JSON?
- chart.js won't display the chart in IE