<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() {
data = {
'labels': [01, 02, 03, 04],
'series': [
[0, 2, 5, 6]
]
};
new Chartist.Line('.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">Line chart</div>
<div class="card-body" style="height: 420px">
<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;">
<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;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
</div>
<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;">
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
</div>
</div>
<div class=" ct-chart ct-square chartjs-render-monitor" style="display: block; width: 550px; height: 400px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #f9f9fa
}
.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
}