<link rel="stylesheet" href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css">
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<script>
$(document).ready(function() {
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 15
};
var responsiveOptions = [
['screen and (min-width: 641px) and (max-width: 1024px)', {
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: function(value) {
return value;
}
}
}],
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function(value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart', data, {
showPoint: true,
});
});
</script>
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row">
<div class="container-fluid d-flex justify-content-center">
<div class="col-sm-8 col-md-6">
<div class="card">
<div class="card-header">Simple Bar Chart</div>
<div class="card-body">
<div class=" ct-chart ct-square chartjs-render-monitor"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #f9f9fa
}
.page-container {
margin-bottom: 100px
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
@media (max-width:991.98px) {
.padding {
padding: 1.5rem
}
}
@media (max-width:767.98px) {
.padding {
padding: 1rem
}
}
.padding {
padding: 5rem
}
.card {
background: #fff;
border-width: 0;
border-radius: .25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
margin-bottom: 1.5rem
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(19, 24, 44, .125);
border-radius: .25rem
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(19, 24, 44, .03);
border-bottom: 1px solid rgba(19, 24, 44, .125)
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}
card-footer,
.card-header {
background-color: transparent;
border-color: rgba(160, 175, 185, .15);
background-clip: padding-box
}