score:196
i had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and i found a simpler way to do it, hope it will help :)
use these chart.js options:
// boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainaspectratio: false,
score:-6
let canvasbox = reactdom.finddomnode(this.refs.canvasbox);
let width = canvasbox.clientwidth;
let height = canvasbox.clientheight;
let charts = reactdom.finddomnode(this.refs.charts);
let ctx = charts.getcontext('2d');
ctx.canvas.width = width;
ctx.canvas.height = height;
this.mychart = new chart(ctx);
score:-3
add div
and it will solve the problem
<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>
score:0
i had the same kind of scaling issue's using angular cli. was able to get it working by removing this line from the index.html:
<script src="node_modules/chart.js/dist/chart.bundle.min.js"></script>
and then in the angular-cli.json file, in the scripts section, using this:
"scripts": ["../node_modules/chart.js/dist/chart.bundle.min.js"]
source: mikebarr58
score:0
i tried multiple answers on this thread and what worked for me was that (note i am using reactjs), checking my previous props passed into the chart component. when i was resizing my dom, the chart was getting re-drawn with empty data.
componentdidupdate(prevprops: chartprops) { if(prevprops.data !== props.data) renderchart(); }
score:0
the accepted - responsive:true, maintainaspectratio:false
- did not work for my scenario.
but i found we can simply call the update
method on the chart.
so i found myself tweaking values inside matchmedia listeners .. like so:
myradarchart.options.scales.r.pointlabels.font.size = "1rem";
myradarchart.update();
score:1
if anyone is having problems, i found a solution that doesn't involve sacrificing responsiveness etc.
simply wrap your canvas in a div container (no styling) and reset the contents of the div to an empty canvas with id before calling the chart constructor.
example:
html:
<div id="chartcontainer">
<canvas id="mychart"></canvas>
</div>
js:
$("#chartcontainer").html('<canvas id="mychart"></canvas>');
//call new chart() as usual
score:1
i tried to resize canvas using jquery but it din't work well. i think css3 is the best option you can try on, if you want on hover zooming at certain level.
following hover option from other codepan link:
.style_prevu_kit:hover{
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
follow my codepan link:
score:1
here is the official dokumentation: https://www.chartjs.org/docs/latest/general/responsive.html
detecting when the canvas size changes can not be done directly from the canvas element. chart.js uses its parent container to update the canvas render and display sizes. however, this method requires the container to be relatively positioned and dedicated to the chart canvas only. responsiveness can then be achieved by setting relative values for the container size (example):
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
score:2
i was having the same problem. i was able to solve it by setting option:
responsive: false,
maintainaspectratio: true,
showscale: false,
and in css, set the width of the container div the same as the canvas:
#canvascontainer {
width: 300px;
}
canvas {
width: 300px;
}
score:3
i had a similar problem and found your answer.. i eventually came to a solution.
it looks like the source of chart.js has the following(presumably because it is not supposed to re-render and entirely different graph in the same canvas):
//high pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicepixelratio) {
context.canvas.style.width = width + "px";
context.canvas.style.height = height + "px";
context.canvas.height = height * window.devicepixelratio;
context.canvas.width = width * window.devicepixelratio;
context.scale(window.devicepixelratio, window.devicepixelratio);
}
this is fine if it is called once, but when you redraw multiple times you end up changing the size of the canvas dom element multiple times causing re-size.
hope that helps!
score:6
as jcmiller11 suggested, setting the width and height helps. a slightly nicer solution is to retrieve the width and height of the canvas before drawing the chart. then using those numbers for setting the chart on each subsequent re-draw of the chart. this makes sure there are no constants in the javascript code.
ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;
function drawchart() {
ctx.canvas.width = ctx.canvas.originalwidth;
ctx.canvas.height = ctx.canvas.originalheight;
var chartctx = new chart(ctx);
mynewbarchart = chartctx.bar(data, chartsettings);
}
score:7
i had to use a combination of multiple answers here with some minor tweaks.
first, it is necessary that you wrap the canvas element within a block-level container. i say to you, do not let the canvas element have any siblings; let it be a lonely child, for it is stubborn and spoiled. (the wrapper may not need any sizing restrictions placed on it, but for safety it may be good to have a max-height applied to it.)
after assuring that the previous conditions are met, when initiating the chart, make sure the following options are used:
var options = {
"responsive": true,
"maintainaspectratio": false
}
if you want to adjust the height of the chart, do so at the canvas element level.
<canvas height="500"></canvas>
do not try to deal with the child in any other manner. this should result in a satisfyingly, properly laid-out chart, one that stays in its crib peacefully.
score:21
in ios and android the browser hides the toolbar when you are scrolling, thereby changing the size of the window which inturn lead chartjs to resize the graph. the solution is to maintain the aspect ratio.
var options = {
responsive: true,
maintainaspectratio: true
}
this should solve your problem.
score:29
this works for me:
<body>
<form>
[...]
<div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
<canvas id="cv_values"></canvas>
<script type="text/javascript">
var indicatedvaluedata = {
labels: ["1", "2", "3"],
datasets: [
{
[...]
};
var cv_values = document.getelementbyid("cv_values").getcontext("2d");
var mychart = new chart(cv_values, { type: "line", data: indicatedvaluedata });
</script>
</div>
</form>
</body>
the essential fact is that we have to set the size of the canvas in the div-tag.
score:64
what's happening is chart.js multiplies the size of the canvas when it is called then attempts to scale it back down using css, the purpose being to provide higher resolution graphs for high-dpi devices.
the problem is it doesn't realize it has already done this, so when called successive times, it multiplies the already (doubled or whatever) size again until things start to break. (what's actually happening is it is checking whether it should add more pixels to the canvas by changing the dom attribute for width and height, if it should, multiplying it by some factor, usually 2, then changing that, and then changing the css style attribute to maintain the same size on the page.)
for example, when you run it once and your canvas width and height are set to 300, it sets them to 600, then changes the style attribute to 300... but if you run it again, it sees that the dom width and height are 600 (check the other answer to this question to see why) and then sets it to 1200 and the css width and height to 600.
not the most elegant solution, but i solved this problem while maintaining the enhanced resolution for retina devices by simply setting the width and height of the canvas manually before each successive call to chart.js
var ctx = document.getelementbyid("canvas").getcontext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var mydoughnut = new chart(ctx).doughnut(doughnutdata);
Source: stackoverflow.com
Related Query
- Resize Chart Independently From Legend in ChartJS for Canvas Download
- Chart.js canvas resize of pie / doughnut chart
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart.js canvas resize
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- Resize chart.js canvas for printing
- Can't resize react-chartjs-2 doughnut chart
- set background color to save canvas chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Chart.js pie chart not showing in Google Chrome canvas
- React chart : prevent chart's canvas scaling with height and width
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- canvas fill text vanishes when hovering over chartjs pie chart
- Chart js 2.x renders the canvas invisible
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Chart Js flickering or switching as i move mouse on canvas
- Create a chart on a dynamically created canvas in Angular-chart.js
- cant resize range of Y axis of chart in HTML/PHP
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- Chart.js: get chart data from canvas
- Chart js, Canvas is null polymer project
- Chart.js canvas and chart width gets overwritten when redrawn
- How to load chart data to an appended canvas
- Unable to set width and height on canvas in chart js
- How to get the data attribute of the canvas chart created using chartjs
- Bug in canvas class in chart js
- Binding Chart to Canvas height width
- Chart.js reduce canvas size without changing the size of the chart
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
More Query from same tag
- Dynamic line chart with chart.js and PHP
- How to create stacked bar chart using react-chartjs-2?
- How to add "shadow" on hovering bar chart?
- Chart.js - barchart - plugin labels
- Changing line color below specific value in Chart.js
- How to remove a vertical line from the canvas of react-chartjs-2?
- Unable to display point values without mouse hover
- How do you output the correct value for Chart.js Radar graph on label?
- The bar that contains a low value is almost invisible on the chartjs
- Using chart.js version 1.0.2 and 2.0 together
- y axis Formatting with Metric prefix 1000=> 1k Chart.js
- VueJS : How to group by based on response data columns
- How to grouping Label In Char JS
- yAxis labels are being cut off in ngEchars (Echarts)
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- Get the data from node.js for Chart.js
- Using data from API with Chart JS
- chart.js not getting linked with online database and php
- Change label color Y and X axis chart.js
- Parsing an unnamed JSON array into React component
- Drawing line chart in chart.js placing dots only when value changes
- Detect onHover being complete on a Chart.js doughnut chart
- How to fix chart looking blurry in ChartJS?
- How to display half hour ticks on x-axes
- Cross Browser Support for Chart.js
- Chart.js doesn't show anything
- I cant get Legend to work for my chartjs donut chart
- json file to charts
- Chart.js Currency Tooltip
- ChartJS: Grouped Stacked Bar Chart not Grouping