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-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-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-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>

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>

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