Area 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-area-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 area charts
                      $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
                    });
                  </script>
                
              

Basic example

                      
                        <!-- Area Chart -->
                        <div class="js-area-chart u-area-chart"
                             data-height="16rem"
                             data-mobile-height="16rem"
                             data-offset-x="30"
                             data-offset-y="0"
                             data-postfix="m"
                             data-is-show-area="true"
                             data-is-show-line="false"
                             data-is-show-point="true"
                             data-is-full-width="true"

                             data-is-stack-bars="true"
                             data-is-show-axis-x="false"
                             data-is-show-axis-y="true"
                             data-is-show-tooltips="true"
                             data-tooltip-description-position="center"
                             data-tooltip-custom-class="u-area-chart__tooltip"

                             data-align-text-axis-x="center"
                             data-fill-opacity=".8"
                             data-fill-colors='["#ffc107", "#377dff"]'
                             data-stroke-width=".0625rem"
                             data-stroke-color="#f0f4f7"
                             data-stroke-dash-array="0"
                             data-text-size-x=".75rem"
                             data-text-color-x="#77838f"
                             data-text-offset-top-x="10"

                             data-text-size-y=".75rem"
                             data-text-color-y="#77838f"
                             data-points-colors='["#ffc107", "#377dff"]'
                             data-series='[[
                                {"meta": "Orders", "value": 2000},
                                {"meta": "Orders", "value": 6000},
                                {"meta": "Orders", "value": 5500},
                                {"meta": "Orders", "value": 7000},
                                {"meta": "Orders", "value": 6000},
                                {"meta": "Orders", "value": 7500}
                              ], [
                                {"meta": "Visits", "value": 3000},
                                {"meta": "Visits", "value": 5000},
                                {"meta": "Visits", "value": 4000},
                                {"meta": "Visits", "value": 7000},
                                {"meta": "Visits", "value": 6500},
                                {"meta": "Visits", "value": 7000}
                             ]]'
                             data-labels='["Jan", "Feb", "Apr", "May", "Jun", "Jul"]'></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. Each value corresponds to a point on the graph. Also, this data is displayed in the tooltip that appears when you hover over the cursor.

Screenshot example:

Image Description

data-labels

Labels along the X axis.

Screenshot example:

Image Description

data-height

Chart height.

data-mobile-height

Chart height at resolution less than 768 px.

data-high

Highest value on the chart.

Screenshot example:

Image Description

data-low

The lowest value on the graph. Can be negative. In this case, the graph will go below the zero point.

Screenshot example:

Image Description

data-offset-x

The offset from the edge of the chart to the labels along the X axis.

data-offset-y

The offset from the edge of the chart to the labels along the Y axis.

data-postfix

Postfix is put after each label on the Y axis.

Screenshot example:

Image Description

data-align-text-axis-x

Align labels to the X axis. Possible values:
  • left
  • right
  • center

data-is-show-area

Determines whether the graph itself is visible.

data-is-show-line

Determines whether the strokes of the graphs are shown.

Screenshot example:

Image Description

data-is-show-point

Determines whether the points on the graph are shown.

data-is-full-width

Stretches the chart for the entire width of the grid.

data-is-show-axis-x

Determines whether lines will be displayed against the background of the chart along the X axis.

data-is-show-axis-y

Determines whether lines will be displayed against the background of the chart along the Y axis.

data-is-show-tooltips

Determines whether hover prompts specified in the data-series attribute are displayed.

data-tooltip-description-position

Determines which side of the description will be specified in the tooltip. Possible values:
  • left
  • right

data-tooltip-custom-class

Adds additional classes to the prompt.

data-fill-opacity

Opacity of the charts.

data-fill-colors

Fill color.

data-stroke-color

Stroke color.

data-stroke-dash-array

If the value of the attribute is 0, then the lines on the background are solid. If greater than 0, then determines the distance between the line generators lines.

data-text-size-x

The font size for labels on the X axis.

data-text-size-y

The font size for labels on the Y axis.

data-text-offset-top-x

The distance from the text to the chart is along the x-axis.

data-text-offset-top-y

The distance to the right of the text to the graph along the Y axis.

data-text-color-y

The text color of labels in the Y axis.

data-points-colors

Colors of points on the graph.
Contact Us