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
- Javascript and chart.js, how to add euro currency to y label
- Can you set bar thickness to align with the x-axis scale in ChartJS?
- Extract data from an array of Object
- Is there a way to apply css on chart.js V3.7.0 tooltip without it being custom or external?
- Chart.js displays bar as overflown even below the x-axis
- Using ChartJs with MVC 5 Razor
- Chart.js - style legend: smaller circles
- JavaScript implementation doesnt work (Chart.js)
- Chart js - Line chart - How to hide the data label on the line?
- Chart js: bar width
- Chart.js reduce canvas size without changing the size of the chart
- chart.js not working in browser with django. no error for template and static folder setting
- Chart.js custom tooltipTemplate index
- Vue-Chartjs not rendering graph
- Primeng line chart not updating automatically,only update on window refresh
- Two pie charts in one flexbox container
- How can i iterate or get all object out of array with object key in Chart.js
- How to set subscript text in Chart.js axis title
- Ability to rotate y axis title in chart.js
- Chart.js runs in JSFiddle but not local "Chart is not defined"
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- Export chart and table both to pdf
- chartjs resizing very quickly (flickering) on mouseover
- How to add external scripts and css in latest angular-cli
- how I can get label name when user click on particular area in doughnut chart.js? I am not able to find the index of selected area for chart.js
- Generate PDF from chart and table
- Chart.js display x axis labels ON ticks in bar chart, not between
- How to dynamically link json data to chart.js
- Problems hovering over ChartJS bar chart after being redrawn
- Chart in other module