Bootstrap 5 Chartjs vertical bar chart snippet

Utilities Bootstrap 5Free+ CSS+ JS

Bootstrap 5 Chartjs vertical bar chart snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

2.6k views38 downloads5 years ago

gosnippets.com/preview/bootstrap-5-chartjs-vertical-bar-chart-snippet

Source Code

1
2<div class="page-content page-container" id="page-content">
3    <div class="padding">
4        <div class="row">
5            <div class="container-fluid d-flex justify-content-center">
6                <div class="col-sm-8 col-md-6">
7                    <div class="card">
8                        <div class="card-header">Bar chart</div>
9                        <div class="card-body" style="height: 420px">
10                            <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
11                                <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
12                                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
13                                </div>
14                                <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
15                                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
16                                </div>
17                            </div> <canvas id="chart-line" width="299" height="200" class="chartjs-render-monitor" style="display: block; width: 299px; height: 200px;"></canvas>
18                        </div>
19                    </div>
20                </div>
21            </div>
22        </div>
23    </div>
24</div>
25<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js'></script>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1 2<div class="page-content page-container" id="page-content"> 3 <div class="padding"> 4 <div class="row"> 5 <div class="container-fluid d-flex justify-content-center"> 6 <div class="col-sm-8 col-md-6"> 7 <div class="card"> 8 <div class="card-header">Bar chart</div> 9 <div class="card-body" style="height: 420px"> 10 <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"> 11 <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> 12 <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div> 13 </div> 14 <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"> 15 <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div> 16 </div> 17 </div> <canvas id="chart-line" width="299" height="200" class="chartjs-render-monitor" style="display: block; width: 299px; height: 200px;"></canvas> 18 </div> 19 </div> 20 </div> 21 </div> 22 </div> 23 </div> 24</div> 25<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js'></script>