E. Ancuta E. Ancuta - 1 month ago 24
CSS Question

chart.js renders outside div and canvas

My charts are rendering correctly, but they are overlapping on the same spot and change between themselves depending on where I mouseover (both graphs are in exactly the same position even though their canvas and div elements are not). Here are the images to show the div and canvas locations:

Canvas 1
Canvas 2

I am not familiar with CSS so I used some tutorial snippets to get a temporary layout before I begin to change the style and colours, but I need help on positioning these elements correctly.

Here is the HTML code:

<div id="awp" class="tabcontent">
<div class="dropdown">
<button onclick="dropMenu(1)" class="dropbtn">Choose Dates</button>
<div id="myDropdown1" class="dropdown-content">
<a id="2016" onClick="addData(myChart, 'check' , 2)">Last 3 Months</a>
<a id="5m" onClick="removeData(myChart)">Test 3</a>
<a id="testNew">Bye bye</a>
<a id = "2015" onClick="addMoreData(myChart)">does</a>
</div>
</div>
<h3>Recreated in chart.js first graphs</h3>

<div class="contain1">
<canvas id="results-graph" class="cyo" width="600" height="500"></canvas>
</div>

<div class="contain2">
<canvas id="results-graph2" class="oem" width="600" height="500"></canvas>
</div>


Here is the CSS:

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

.contain1 {
width: 600px;
height: 500px;
float: left;
overflow: auto;
}

.contain2 {
width: 600px;
height: 500px;
float: right;
overflow: auto;
}

.cyo {
display: block;
width: 600px;
height: 500px;
}

.oem {
display: block;
width: 600px;
height: 500px;
}


Here is the chart code:

<script>
var data = [12, 19, 13, 5, 21, 13];

var ctx = document.getElementById("results-graph");


var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data,
yAxisID: 'A',
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}

]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}

}, {
id: 'B',
type: 'linear',
position: 'right',

ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',

}
}]
}
}
});


</script>
<script>
var data2 = [12, 19, 13, 5, 21, 13];
var ctx2 = document.getElementById("results-graph");

var myChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data2,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data2,
yAxisID: 'A',
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}

]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}

}, {
id: 'B',
type: 'linear',
position: 'right',

ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',

}
}]
}
}
});</script>

Answer Source

You did not change the that is why the second graph did not generate.

var ctx2 = document.getElementById("results-graph2");

Also you can provide background and border like this.

            backgroundColor: ['rgba(0,0,0,1)'],
            borderColor: ['rgba(0,0,0,1)']

JSFiddle: here