2

I'm learning JavaScript, CSS, and Chart.JS. I've been given some code to reverse engineer and learn. My final task is to widen the two horizontal graph divs to the left, without overlapping with the large vertical bar graph.

Basically, I just want my two small graphs to expand to the left in width. Codepen is here: https://codepen.io/tenebris_silentio/pen/VwaGdaP

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    </head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" type="text/css">

<script>
  
var doughnut = document.getElementById('doughnut');
var doughnutConfig = new Chart(doughnut, {
    type: 'horizontalBar',
    data: {
        labels: ['data-1', 'data-2', 'data-3', 'data-4', 'data-5'],
        datasets: [{
            label: '# of data',
            data: [11, 30, 20, 1, 12],
            backgroundColor: ['rgba(0, 230, 118, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255,99,132,1)', 'rgba(233,69,132,1)', 'rgba(111,22,77,13)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
    }
});
//pie chart
var pie = document.getElementById('pie');
var doughnutConfig = new Chart(pie, {
    type: 'horizontalBar',
    data: {
        labels: ['rwwrerewrewewrerw', 'rwerewrewrewrew', 'rwerweewrewrew', 'rwerewewrewrewewr'],
        datasets: [{
            label: '# of data',
            data: [11, 30, 20, 14],
            backgroundColor: ['rgba(0, 230, 118, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255,99,132,1)', 'rgba(233,69,132,1)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
    }
});
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
    type: 'bar',
    data: {
        labels: ['data-1', 'data-2', 'data-3'],
        datasets: [{
            label: '# of data',
            data: [30, 25, 20],
            backgroundColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 11)'],
            borderWidth: 1
        }]
    },
    options: {
      legend: {
    display: false,
  },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
    }
})
</script>
    <style>
      :root {
    --grey-d1: #585858;
    --grey-d2: #F4F4F4;
    --grey-d3: #000000;
    --red-1: #F2B8D1;
    --red-2: #F04B92;
    --red-3: #EB1E77;
    --red-4: #AD1257;
    --white: #FFFFFF;
    --blue: #329EF4;
    --grey: #eeeeee;
}
html, body {
    font-family: 'roboto';
    height: 100%;
    background-color: var(--grey);
}
.card-1, .card-2, .card-3 {
    background-color: white;
    border-radius: 20px;
    box-shadow: 2px 2px 5px 2px #D7D7D7;
}
.chart-lbl {
    margin-left: 5%;
    font-size: 12px;
    color: var(--grey-d3);
    opacity: 0.8;
}
.divider {
    background-color: var(--grey-d2);
    height: 2px;
    margin: auto;
    width: 98%;
}

/*  media queries*/

@media only screen and (min-width: 320px) {
    .bar-chart-container {
        margin: 5% 5% 5% 5%;
        width: 90%;
        height: 70%;
    }
    .dashboard-container {
        display: grid;
        grid-template: 17% 17% 17% 17% 17% 17% / repeat(1, 1fr);
        grid-gap: 20px;
        padding: 5% 0 25% 0;
    }
    .doughnut-chart-container, .pie-chart-container {
        margin: 5% auto 5% auto;
        width: 100%;
    }
    .card-1, .card-2, .card-3 {
        border-radius: 10px;
    }
    /*doughnut chart*/
    .card-1 {
        grid-row: 1 / 3;
    }
    /*pie chart*/
    .card-2 {
        grid-row: 3 / 5;
    }
    /*bar chart*/
    .card-3 {
        grid-row: 5 / 7;
    }
}
@media only screen and (min-width: 400px) {
    .dashboard-container {
        margin: 0 5% 0 5%;
    }
}
@media only screen and (min-width: 800px) {
    .dashboard-container {
        grid-template: 19% 19% 19% 19% 12% 12% / repeat(2, 1fr);
        margin: 10% 10% 0 10%;
    }
    /*doughnut chart*/
    .card-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    /*pie chart*/
    .card-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
    /*bar chart*/
    .card-3 {
        grid-column: 1 / 3;
        grid-row: 3 / 7;
    }
}
@media only screen and (min-width: 1000px) {
    .dashboard-container {
        grid-template: repeat(6, 15%) / repeat(11, 1fr);
        grid-gap: 10px;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .doughnut-chart-container, .pie-chart-container {
        margin: 3% 0 5% 0;
        width: 100%;
    }
    /*doughnut chart*/
    .card-1 {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }
    /*pie chart*/
    .card-2 {
        grid-column: 1 / 5;
        grid-row: 4 / 7;
    }
    /*bar chart*/
    .card-3 {
        grid-column: 5 / -1;
        grid-row: 1 / 7;
    }
    main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90vh;
        width: 80vw;
        margin: 5vh 10vw 0 10vw;
    }
}
@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1500px;
    }
}
@media screen and (min-width: 1500px){
    .dashboard-container{
        max-width: 1200px;
    }
}
</style>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Portfolio Review Overview</title>
        
        </head>
        <body>
            <div class="container">
                <main>
                    <div class="dashboard-container">
                        <div class="card-1">
                            <h4 class="chart-lbl">
                                Horizontal Bar Graph 2
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="doughnut-chart-container">
                                <canvas class="doughnut-chart" id="doughnut">
                                </canvas>
                            </div>
                        </div>
                        <div class="card-2">
                            <h4 class="chart-lbl">
                                Horizontal Bar Graph 1
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="pie-chart-container">
                                <canvas class="pie-chart" id="pie">
                                </canvas>
                            </div>
                        </div>
                        <div class="card-3">
                            <h4 class="chart-lbl">
                                <h2>Bar Chart</h2>
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="bar-chart-container">
                                <canvas class="bar-chart" id="bar">
                                </canvas>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
            </script>
            <script src="js/generate_chart.js">
            </script>
        </body>
    </html>

1 Answer 1

5
+50

Given the nature of the grid display, you can't really expand the cards to the left without breaking the layout. What was needed was a readjustment in the grid-template for .dashboard-container.

Here is the updated codepen.

Here is a gist with the same contents of the pen but in a single html file.

There where some issues with margins and paddings, misuse of the fr unit in grid template properties and inconsistency in media queries breakpoints.

1
  • 1
    Thank you. Your explanation is very helpful. Sep 23, 2020 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.