chart.js renders outside div and canvas

Question

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 1

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