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>from Dashboard grid - Chart.JS and CSS- issue widening two small horizontal bar graphs - noob question
No comments:
Post a Comment