<!DOCTYPE html>
<html>

<head>
    <title>Doughnut Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> -->
</head>

<body>
    <div style="position: relative; height:50vh; width:80vw; margin-left: 60em;" class="chart-container">
        <canvas id="myChart" style="width:50px; height:50px;"></canvas>
    </div>

    <div style=" height:50vh; width:80vw; margin-left: 60em;" class="chart-container">
        <canvas id="myChart22" style="width:50px; height:50px; margin-top: -250px; float: right; margin-right: 50px;"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'green'],
                datasets: [{
                    data: [10, 20, 30, 20],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 46)'
                    ]
                }]
            }
        });

        var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
        var yValues = [55, 49, 44, 24, 15];
        var barColors = ["red", "green", "blue", "orange", "brown"];

        new Chart("myChart22", {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: "World Wine Production 2018"
                }
            }
        });
    </script>
</body>

</html>