Home>
<!DOCTYPE html><htmllang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> <title>Document</title></head><body><div class="container"> <div class="row"> <div class="col-6"> <canvas id="layanan" width="340px" height="340px"></canvas> </div> <div class="col"> <canvas id="layanan_subbagian" width="240px" height="240px"></canvas> </div> </div></div><!--<div>--><!----><!--</div>--></body><script> $(function() {
let ctx= document.getElementById("layanan").getContext('2d');
let data= {
datasets: [{
data: {{ data|safe }},
backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
}],
labels: {{ labels|safe }}
};
let myDoughnutChart= new Chart(ctx, {
type: 'pie',
data:data,
options: {
responsive: false
maintainAspectRatio: false
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
let ctx_2= document.getElementById("layanan_subbagian").getContext('2d');
let data_2= {
datasets: [{
data: {{ data|safe }},
backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
}],
labels: {{ labels|safe }}
};
let myDoughnutChart_2= new Chart(ctx_2, {
type: 'bar',
data: data_2,
options: {
responsive: false
maintainAspectRatio: false
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
</script></html>
-
Answer # 1
-
Answer # 2
By default, divs take up the entire line. It’s not so clear what you want to get exactly, but make them, for example, line-block, then they will behave like pictures and can be on the same line:
.col-6, .col { display: inline-block }
Related questions
- javascript : Block scrolling by clicking on the arrows
- javascript : Console gives error "Uncaught TypeError: Cannot read properties of null (reading 'style')" [duplicate]
- javascript : How to change the color of the scale in the video?
- javascript : How to highlight one whole line in long HTML text
- javascript : How to emulate safari browser on windows
- javascript : Console throws an error: Uncaught TypeError: Cannot set properties of null (setting 'src')
- javascript : Why won't the animation start?
- javascript : Dropdown menu on click
- javascript : Wrong handler in JS media requests
By default, divs take up the entire line. It’s not so clear what you want to get exactly, but make them, for example, line-block, then they will behave like pictures and can be on the same line: