Chart.js: [BUG] using two charts at the same page breaks parent's padding.
Hey guys how is it going?
Im trying to use Chart.js in order to build my data visualization part of my project.
But I'm having a problem trying to use 2 canvas one above each other.
It seems like when using only 1 chart everything is fine but when using two like I mentioned it seems to break the parent div padding .
Using 2.6.0 version
What I tried :
Wrapping them inside another div.
Wrapping each with his own div.
Using grid in CSS each taking a row, but still same problem.
Using floats and or several display and position config.
Relative position worked but they overlap each other.
bits of code :
`
ืืืืฆืข ืฉืขืชื
13
ืืจืืื ืืืืืฆืข ืืฉืขืืช ืฉื 6% ืืืืืฉ ืฉืขืืจ
ืืืืฆืข ืฉืืจ ืืืื
243.2
ืืจืืื ืืืืืฆืข ืืฉืืจ ืืืืื ืฉื 6% ืืืืืฉ ืฉืขืืจ
</div>
</div>
</div>
<canvas id="hourChart" width="400" height="120"></canvas>
<canvas id="payChart" width="400" height="120"></canvas>
(wrapper-user-stats is the parent, only padding 20px in css)
(the canvas css only have background color, border radius and margin-top)
`
var hourChart = document.getElementById('hourChart').getContext('2d');
var myHourChart = new Chart(hourChart, {
type: 'bar',
data: {
labels: [['23.02.2017','ืืื ืจืืฉืื'],
'Blue','5',6,7,5,1,4,2,5,7,8],
datasets: [{
label: 'ืฉืขืืช ืืืื',
data: [12, 15,5,6,7,5,1,4,2,5,7,8,],
backgroundColor: '#f67a82',
borderWidth:0,
borderColor: '#c5c5c5',
hoverBorderWidth:2,
}],
},
options: {
title: {
display: true,
text: 'ืกืืืืกืืืงื ืฉืขืชืืช ืืืืืช',
fontSize: 20
},
legend: {
display: true,
labels: {
}
}
}
});
var payChart = document.getElementById('payChart').getContext('2d');
var myPayChart = new Chart(payChart, {
type: 'bar',
data: {
labels: [['23.02.2017','ืืื ืจืืฉืื'],
'Blue','5',6,7,5,1,4,2,5,7,8],
datasets: [{
label: 'ืฉืขืืช ืืืื',
data: [12, 15,5,6,7,5,1,4,2,5,7,8,],
backgroundColor: '#f67a82',
borderWidth:0,
borderColor: '#c5c5c5',
hoverBorderWidth:2,
}],
},
options: {
title: {
display: true,
text: 'ืกืืืืกืืืงื ืฉืขืชืืช ืืืืืช',
fontSize: 20
},
legend: {
display: true,
labels: {
}
}
}
});`
Pics :
With two canvas :
http://imgur.com/yEwrdDv
With one canvas : (otherwise same code)
http://imgur.com/TXNqqFZ
TheWiggleStorm
All 4 comments
@TheWiggleStorm this is likely due to how we detect resizes of the chart container. Adding a <div> around each canvas should fix the issue
etimberg
on 17 Aug 2017
@etimberg Thank you friend, but as i've told you, I've already tried that. (what I tried section)
any other ideas?
TheWiggleStorm
on 17 Aug 2017
Did you try a dedicated parent for each canvas, relatively positioned with no padding?
This is only required if your chart is responsive (default), else you don't need these wrappers. When responsive, you also don't need to specify width and height on the canvas.
.chart-wrapper {
position: relative;
}
md5-d5ef5bba618d8d39cfd81ae502d03caa
md5-905597c0323b18940ba589d382939d9a
If that doesn't work, can you provide a jsfiddle that reproduces your issue?
simonbrunel
on 17 Aug 2017
@simonbrunel I did try to put them in the same div with position realetive, probably got the wrong idea from the documentary.
Anyways, worked like a charm!
Thanks guys
TheWiggleStorm
on 17 Aug 2017
Related issues
gabrieldesouza
ยท
3Comments
benmccann
ยท
3Comments
Woogles
ยท
3Comments
SylarRuby
ยท
3Comments
frlinw
ยท
3Comments
Most helpful comment
Did you try a dedicated parent for each canvas, relatively positioned with no padding?
This is only required if your chart is responsive (default), else you don't need these wrappers. When responsive, you also don't need to specify width and height on the canvas.
If that doesn't work, can you provide a jsfiddle that reproduces your issue?