<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() { // Create a simple bi-polar bar chart
var chart = new Chartist.Bar('.ct-chart', {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
}, {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 2 === 0 ? value : null;
}
}
});
// Listen for draw events on the bar chart
chart.on('draw', function(data) { // If this draw event is of type bar we can use the data to create additional content if(data.type === 'bar') { // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value data.group.append(new Chartist.Svg('circle', { cx: data.x2, cy: data.y2, r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5 }, 'ct-slice-pie')); }
});
});
</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">PEAK CIRCLES 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" style="display: block; 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
}