AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Charts

Customizable responsive charts, including: Line chart, Bar chart and Pie chart.

Around component
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.html

Line chart

Company 1
Company 2
Company 3
W1W2W3W4W5W6W7W8W9051015
<!-- Line chart: Multiple lines of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm">
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #448c74;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #edcb50;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #ed5050;"></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": ["#448c74", "#edcb50", "#ed5050"]}'></div>
// Line chart: Multiple lines of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #448c74;")
    span.d-inline-block.align-middle Company 1
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #edcb50;")
    span.d-inline-block.align-middle Company 2
  .border.text-nowrap.rounded-pill.py-1.px-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #ed5050;")
    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": ["#448c74", "#edcb50", "#ed5050"]}')

Bar chart

Company 1
Company 2
201720182019202020212022050001000015000
<!-- Bar chart: Multiple bars of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm">
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #448c74;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #edcb50;"></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": ["#448c74", "#edcb50"]}'></div>
// Bar chart: Multiple bars of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #448c74;")
    span.d-inline-block.align-middle Company 1
  .border.text-nowrap.rounded-pill.py-1.px-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #edcb50;")
    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
42%25%33%
<!-- Pie chart: Multiple slices of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm pb-1">
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #448c74;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #edcb50;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #ed5050;"></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": ["#448c74", "#edcb50", "#ed5050"]}'></div>
// Pie chart: Multiple slices of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm.pb-1
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #448c74;")
    span.d-inline-block.align-middle Company 1
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #edcb50;")
    span.d-inline-block.align-middle Company 2
  .border.text-nowrap.rounded-pill.py-1.px-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #ed5050;")
    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": ["#448c74", "#edcb50", "#ed5050"]}')

Donut chart

Company 1
Company 2
Company 3
42%25%33%
<!-- Donut chart: Multiple slices of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-sm pb-1">
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #448c74;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #edcb50;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
  <div class="border text-nowrap rounded-pill py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle rounded-circle me-1" style="width: .75rem; height: .75rem; background-color: #ed5050;"></div>
    <span class="d-inline-block align-middle">Company 3</span>
  </div>
</div>

<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-options='{"donut": true, "donutWidth": 80}' data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#448c74", "#edcb50", "#ed5050"]}'></div>
// Donut chart: Multiple slices of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-sm.pb-1
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #448c74;")
    span.d-inline-block.align-middle Company 1
  .border.text-nowrap.rounded-pill.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #edcb50;")
    span.d-inline-block.align-middle Company 2
  .border.text-nowrap.rounded-pill.py-1.px-2.mb-2
    .d-inline-block.align-middle.rounded-circle.me-1(style="width: .75rem; height: .75rem; background-color: #ed5050;")
    span.d-inline-block.align-middle Company 3

// Chart
.ct-chart.ct-perfect-fourth(data-options='{"donut": true, "donutWidth": 80}', data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#448c74", "#edcb50", "#ed5050"]}')