Bar Chart

Display graphically quantitative data on your websites.

Official documentation

For more detailed information and examples, see the official documentation: Chartist .

How to use?

Copy-paste the stylesheets <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
<link rel="stylesheet" href="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">
Copy

Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.

<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
<script src="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/components/hs.chartist-bar-chart.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of chartist bar charts
    $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
  });
</script>
Copy

Basic example 

<div class="js-bar-chart"
   data-series='[
     [10,8,5,7,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8]
   ]'
   data-is-show-axis-x="false"
   data-is-show-axis-y="false"
   data-height="62px"
   data-high="10"
   data-low="0"
   data-distance="5"
   data-stroke-width="6"
   data-stroke-color="#19a0ff"></div>
Copy

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-series="".

Attribute Description

data-series

 The data on which the graphics will be based.

data-height

 Chart height.

data-high

 Highest value on the chart.

data-stroke-width

 The width of the individual column.

data-stroke-color

 Stroke color.

data-is-show-axis-x

 Determines whether lines are displayed against the background of the graph along the X axis.

data-is-show-axis-y

 Determines whether lines are displayed against the background of the graph along the Y axis.
Previous Charts - Area chart
Next Circles (Pie chart)
Contact Us