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

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

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>
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. 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.
Previous Bootstrap tagsinput
Next Charts - Bar chart
Contact Us