I am trying to place two charts next to each other with some padding or margins between the columns. I have no issues if the columns contain text but not working with the canvas tag. If I place them side-by-side with no margin it works okay, but adding a margin causes the chart to wrap to the next line.
I've tried adding gutters, padding, container vs container-fluid. Adding mx-# will sometimes work but snap to the next line on resize.
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55, 40],
}]
};
var options = {
maintainAspectRatio: true,
scales: {
y: {
stacked: true,
grid: {
display: true,
color: "rgba(255,99,132,0.2)"
}
},
x: {
grid: {
display: false
}
}
}
};
new Chart('bar-chart', {
type: 'bar',
options: options,
data: data
});
new Chart('bar-chart2', {
type: 'bar',
options: options,
data: data
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="container-fluid">
<div class="row p-2 bg-dark ">
<div class="col-6 bg-white shadow rounded">
<h3>Col1</h3>
<canvas id="bar-chart"></canvas>
</div>
<div class="col-6 bg-white shadow rounded">
<h3>Col2</h3>
<canvas id="bar-chart2"></canvas>
</div>
</div>
</div>
Since you're using two col-6, they take up the whole space (12 cols) so adding a margin forces the second to go the next line, i suggest putting your content inside another div inside col-6 with some padding:
.mycanvas {
padding: 10px;
}
<div class="col-6">
<div class="mycanvas bg-white shadow rounded">
<h3>Col1</h3>
<canvas id="bar-chart"></canvas>
</div>
</div>
<div class="col-6">
<div class="mycanvas bg-white shadow rounded">
<h3>Col2</h3>
<canvas id="bar-chart2"></canvas>
</div>
</div>
Related
I have this setup. If you open this snippet with full page, you will see that an second overflow scrollbar appears. I actually want that the width adapts to the shrinking.
Its because the sm:ml-80 margin.
I dont know why. If you wonder why i have it like this, there is actually an sidebar witch i did not included here for simplicity.
I have marked the div with id="thisdiv". This div exceeds the width.
let v = new Vue({
el: "#app",
data(){
return {
rows: [
{
name: 'User',
},
{
name: 'Jänner',
},
{
name: 'Februar',
},
{
name: 'März',
},
{
name: 'April',
},
{
name: 'Mai',
},
{
name: 'Juni',
},
{
name: 'Juli',
},
{
name: 'August',
},
{
name: 'September',
},
{
name: 'Oktober',
},
{
name: 'November',
},
{
name: 'Dezember',
},
],
}
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="flex">
<div class="sm:ml-80"></div>
<div class="transition mt-14 w-full p-2">
<div class="mx-auto max-w-7xl">
<div class="w-full">
<div class="flex flex-col">
<div class="flex justify-between">
<div id="thisdiv" class="max-w-screen-md overflow-auto">
<div>
<table class="my-2">
<thead class="bg-white border-b">
<tr class="text-blue-500">
<th
v-for="row in rows"
scope="col"
class="text-sm font-medium px-6 py-4 text-left"
>
{{ row.name }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableData" class="bg-gray-100 border-b">
<td
v-for="col in data"
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
>
{{ col }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is the html and tailwind I'm using in Angular 12.
<div class="grid gap-5 grid-cols-1 lg:grid-cols-3 justify-items-center">
<div
*ngFor="let v of featuredVideos"
class="rounded-2xl overflow-hidden"
style="height: 220px"
>
<youtube-player
[videoId]="v.videoId"
suggestedQuality="highres"
[height]="220"
[width]="350"
></youtube-player>
</div>
</div>
And I have this in the Typescript file:
featuredVideos = [
{
name: 'rxjsVideo',
videoId: 'DAGrVyKR_P4'
},
{
name: 'tipsVideo',
videoId: 'JINJQk7ggoo'
},
{
name: 'angMaterialVideo',
videoId: 'gSvxYv2VgHc'
}
];
The videos are responsive when small, but in medium they overlap each other. Is there a way to condense their ratios when the screen gets slightly smaller so they stay in their own cell?
I'm facing an unknown issue only when I'm swiping between last (swiper-slide) to first (swiper-slide) and same as first to last, but when I do just a half swipe, then the RedialBar looks good.
I set the loop: true. I have 3 Slides. Inside all Slide, i have a very simple APEX RadialBar/Circle Chart's. Everything works nice. But when I slide 1 to 2 Good. 2 to 3 Good. But when I slide 3 to 1 then the RadialBar series does not render. And same problem when I slide 1 to 3. So if I just do a half slide (just a little swipe), then the RadialBar render perfectly.
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
effect: 'slide'
})
mySwiper.on('slideChange', function () {
console.log('slide changed');
});
});
// Apex Chart
let options = {
series: [50],
chart: {
height: 200,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
size: '70%',
}
},
},
stroke: {
lineCap: 'round'
},
labels: ['Country'],
};
let chart = new ApexCharts(
document.querySelector("#demo-chart-1"),options
);
let chart2 = new ApexCharts(
document.querySelector("#demo-chart-2"),options
);
let chart3 = new ApexCharts(
document.querySelector("#demo-chart-3"),options
);
chart.render();
chart2.render();
chart3.render();
body {
background-color: #a3d5d3;
}
.india,
.canada,
.japan {
height: 100;
border: 1px solid green;
display: grid;
place-items: center;
}
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1-->
<div class="swiper-slide">
<section class="india">
<p class="gas-header">INDIA</p>
<div id="demo-chart-1"></div>
</section>
</div>
<!-- Slide 2-->
<div class="swiper-slide">
<section class="canada">
<p class="gas-header">CANADA</p>
<div id="demo-chart-2"></div>
</section>
</div>
<!-- Slide 3-->
<div class="swiper-slide">
<section class="japan">
<p class="gas-header">JAPAN</p>
<div id="demo-chart-3"></div>
</section>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
I found the following pagination implemented with vue. I would like to centre the pagination bar horizontally. I have tried different approaches (adding class="text-center" and style="text-align: center !important;" to both the nav and v-pagination tags) but none of them worked. Any ideas how I could fix that?
The code from the codepen:
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
Using flexbox, add this style to your '.pagination' class:
.pagination {
display: flex;
justify-content: center;
}
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<div class="row text-center">
<div class="col">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
Wrap your main div within .container > .row > .col
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
Bootstrap has also some builtin classes to make the div centered horizontally and vertically. I have used .d-flex .justify-content-center to the div that I wanted to be centered aligned. Also, I have used .text-center on row to center the texts.
hope it'll help
-Flex https://getbootstrap.com/docs/4.3/utilities/flex/
I have a problem with ChartJs, because I try to put in interior of a div with class="col-6", it's only working if that class="row" and don't understand why.
pie-chart.components.ts:
ngOnInit() {
this.labels = ["ONE", "TWO", "THREE"];
this.chartInit();
}
chartInit() {
let chartElement = this.elementRef.nativeElement.querySelector("#myChart");
chartElement.width = 750;
chartElement.height = 750;
this.pieChart = new Chart(chartElement, {
type: "outlabeledPie",
data: {
labels: this.labels,
datasets: [
{
backgroundColor: [
"#FF3784",
"#36A2EB",
"#4BC0C0",
"#F77825",
"#9966FF",
"#00A8C6",
"#379F7A",
"#CC2738",
"#8B628A",
"#8FBE00"
],
data: [1, 2, 3]
}
]
},
options: {
plugins: {
legend: false,
outlabels: {
text: "%l %p",
color: "white",
stretch: 20,
font: {
resizable: true,
minSize: 12,
maxSize: 25
}
}
},
responsive: true
}
});
}
pie-chart.components.html:
<canvas id="myChart" height="750" width="750"></canvas>
home.components.html:
<div class="row">
<div class="col-6 text-center">
Available books
<app-pie-chart></app-pie-chart>
</div>
<div class="col-6 text-center">
Lended books
<app-pie-chart></app-pie-chart>
</div>
</div>
The code that is working (but I don't want this version):
<div class="row">
<div class="row text-center">
Available books
<app-pie-chart></app-pie-chart>
</div>
<div class="row text-center">
Lended books
<app-pie-chart></app-pie-chart>
</div>
</div>
So how can I display that two pie charts in interior of that two divs? And the second question is: why is only working in a div with class="row", and in a div without class or with other class it doesn't display anything?
Thank you!