Buy now
Charts
Customizable responsive charts, including: Line chart, Bar chart and Pie chart.
Around component
Make sure to link to Chartist css and js files in your document: vendor/chartist/dist/chartist.min.css and vendor/chartist/dist/chartist.min.js. Use this page as a reference.
Data attributes API
Around added extra layer of data attributes to access the core features of the plugin right in HTML document. There are 3 main attributes:
data-line-chart | data-bar-chart | data-pie-chart - to pass in data in JSON format to be displayed in line, bar or pie chart format respectively.data-options - to pass in additional options in JSON format.data-series-color - to assign individual color to each data set. Data passed in JSON format.
Check the code examples below.
For more features / options visit plugin website:
http://gionkunz.github.io/chartist-js/index.htmlLine chart
Company 1
Company 2
Company 3
<!-- Line chart: Multiple lines of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm">
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #4e54c8;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #ff9d50;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f74f78;"></div>
<span class="d-inline-block align-middle">Company 3</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}' data-options='{"axisY": {"onlyInteger": true}}' data-series-color='{"colors": ["#4e54c8", "#ff9d50", "#f74f78"]}'></div>// Line chart: Multiple lines of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #4e54c8;")
span.d-inline-block.align-middle Company 1
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #ff9d50;")
span.d-inline-block.align-middle Company 2
.border.rounded-1.py-1.px-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f74f78;")
span.d-inline-block.align-middle Company 3
// Chart
.ct-chart.ct-perfect-fourth(data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}', data-options='{"axisY": {"onlyInteger": true}}', data-series-color='{"colors": ["#4e54c8", "#ff9d50", "#f74f78"]}')
Bar chart
Company 1
Company 2
<!-- Bar chart: Multiple bars of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm">
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f74f78;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #ff9d50;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-bar-chart='{"labels": ["2015", "2016", "2017", "2018", "2019", "2020"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f74f78", "#ff9d50"]}'></div>// Bar chart: Multiple bars of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f74f78;")
span.d-inline-block.align-middle Company 1
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #ff9d50;")
span.d-inline-block.align-middle Company 2
// Chart
.ct-chart.ct-perfect-fourth(data-bar-chart='{"labels": ["2015", "2016", "2017", "2018", "2019", "2020"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f74f78", "#ff9d50"]}')
Pie chart
Company 1
Company 2
Company 3
<!-- Pie chart: Multiple slices of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm">
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #6a9bf4;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #16c995;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
<div class="border rounded-1 py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f74f78;"></div>
<span class="d-inline-block align-middle">Company 3</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#6a9bf4", "#16c995", "#f74f78"]}'></div>// Pie chart: Multiple slices of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #6a9bf4;")
span.d-inline-block.align-middle Company 1
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #16c995;")
span.d-inline-block.align-middle Company 2
.border.rounded-1.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f74f78;")
span.d-inline-block.align-middle Company 3
// Chart
.ct-chart.ct-perfect-fourth(data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#6a9bf4", "#16c995", "#f74f78"]}')