Chartist.js

Display graphically quantitative data on your websites.

Area chart

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-plugin-tooltip/dist/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-plugin-tooltip/dist/chartist-plugin-tooltip.min.js"></script>
Copy

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

<script src="../../assets/js/components/hs.chartist-area.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.HSChartistArea.init('.js-area-chart');
  });
</script>
Copy

Basic example

1AM2AM3AM4AM5AM6AM7AM8AM9AM10AM11AM12AM1PM2PM3PM4PM5PM6PM7PM8PM9PM10PM11PM12PM0255075100125150
<!-- Area Chart -->
<div class="js-area-chart chart--points-invisible"
     data-series='[[
           {"meta":"Bitcoin","value":"70"},
           {"meta":"Bitcoin","value":"52"},
           {"meta":"Bitcoin","value":"47"},
           {"meta":"Bitcoin","value":"58"},
           {"meta":"Bitcoin","value":"38"},
           {"meta":"Bitcoin","value":"40"},
           {"meta":"Bitcoin","value":"57"},
           {"meta":"Bitcoin","value":"40"},
           {"meta":"Bitcoin","value":"31"},
           {"meta":"Bitcoin","value":"53"},
           {"meta":"Bitcoin","value":"60"},
           {"meta":"Bitcoin","value":"43"},
           {"meta":"Bitcoin","value":"70"},
           {"meta":"Bitcoin","value":"52"},
           {"meta":"Bitcoin","value":"47"},
           {"meta":"Bitcoin","value":"58"},
           {"meta":"Bitcoin","value":"38"},
           {"meta":"Bitcoin","value":"40"},
           {"meta":"Bitcoin","value":"57"},
           {"meta":"Bitcoin","value":"40"},
           {"meta":"Bitcoin","value":"31"},
           {"meta":"Bitcoin","value":"53"},
           {"meta":"Bitcoin","value":"60"},
           {"meta":"Bitcoin","value":"43"}
         ]
       ]'
     data-labels='["1AM","2AM","3AM","4AM","5AM","6AM","7AM","8AM","9AM","10AM","11AM","12AM","1PM","2PM","3PM","4PM","5PM","6PM","7PM","8PM","9PM","10PM","11PM","12PM"]'
     data-labels-qty="12"
     data-labels-start-from="1"
     data-height="205"
     data-mobile-height="100"
     data-high="150"
     data-chart-padding='{"top": 5}'
     data-offset-x="30"
     data-offset-y="30"
     data-is-show-axis-x="false"
     data-is-show-axis-y="true"
     data-is-hide-area="true"
     data-line-colors='["#8069f2"]'
     data-line-dasharrays="[0]"
     data-line-width='["2px"]'
     data-is-line-smooth="[true]"
     data-fill-opacity="1"
     data-fill-colors='["#8069f2"]'
     data-stroke-color-axis-x="#eeeef1"
     data-stroke-dasharray-axis-x="none"
     data-text-size-x="12px"
     data-text-color-x="#8b8e9f"
     data-text-offset-top-x="15"
     data-text-align-axis-x="center"
     data-text-size-y="12px"
     data-text-color-y="#868e96"
     data-is-show-tooltips="true"
     data-tooltip-custom-class="chart-tooltip chart-tooltip--sections-blocked chart-tooltip__meta--text-muted small text-white text-nowrap p-2"
     data-tooltip-currency="USD "
     data-is-show-points="true"
     data-point-custom-class="chart__point--donut chart__point--border-xs border-primary rounded-circle"
     data-point-dimensions='{"width":15,"height":15}'></div>
<!-- End Area Chart -->
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-is-fill-colors-gradient if true, then data-fill-colors should have 2 parameters for each graphic. Required for gradient graphs.

For example:

data-fill-colors='[
  ["transparent","transparent"],
  ["rgba(252,213,59,.2)","rgba(255,255,255,.1)"]
]'
data-line-colors Graph line colors.
data-line-width Width of the graphs lines.
data-line-dasharrays Defines the width of the interrupt lines of the graphs. If the value is 0 or absent, then the line is solid.
data-stroke-color-axis-x the lines’ colour along the X axis in the background.
data-stroke-color-axis-y the lines colour of the graph along the Y axis in the background.
data-dasharray-color-axis-x the lines colour on the background on the X axis on the background.
data-dasharray-color-axis-y the lines color on the background along the Y axis on the background.
data-is-side-stroke-hidden-axis-x if true, it removes side-lines in the background
data-labels-qty The number of labels displayed on the X axis.
data-labels-start-from determines from which account the label on the X axis to start the counting of the displayed labels.
data-is-show-area Determines whether the graph itself is visible.
data-is-show-point Determines whether the points on the graph are shown.
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-align-axis-x Label text alignment along the X axis. Possible values:
  • left
  • right
  • center
Default value: left
data-text-align-axis-y Label text alignment along the Y axis. Possible values:
  • start
  • end
  • center
Default value: start
data-text-offset-top-y The distance to the right of the text to the graph along the Y axis.
data-text-color-x The text color of labels in the X axis.
data-text-color-y The text color of labels in the Y axis.
data-points-colors Colors of points on the graph.
data-is-hide-area if true, the graph will be indicated only by a line.
data-is-hide-line if true, the graph will not have a line.
data-is-tooltip-divided includes a mode in which the tooltip is divided into two separate parts.

Screenshot example:

Image Description
data-tooltip-badge-markup sets mark-up for points.
data-is-tooltips-append-to-body if true, then tooltips are positioned relative to the browser window.
data-is-tooltip-reverse-data if true, it changes the display order of value and description.
data-tooltip-currency prefix substituted before value in tooltips.
data-is-tooltip-currency-reverse if true, then puts the value before the currency sign in tooltips..
data-is-show-points determines whether points are shown on the graph.
data-point-custom-class adds extra classes to the points on the graph.
data-point-dimensions determines the size of points on the graph.
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-width width of the chart.
data-is-full-width Stretches the chart for the entire width of the grid.
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-prefix prefix which is put before each label on 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-chart-padding defines paddings from the edges of the area in which the graph is located.

Bar chart

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-plugin-tooltip/dist/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-bar-labels/src/scripts/chartist-bar-labels.js"></script>
              <script src="../../assets/vendor/chartist-plugin-tooltip/dist/chartist-plugin-tooltip.min.js"></script>
Copy

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

<script src="../../assets/js/components/hs.chartist-bar.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.HSChartistBar.init('.js-bar-chart');
  });
</script>
Copy

Basic example

MonTueWedThuFriSatSunMonTueWedThu0255075100125150175200
<!-- Bar Chart -->
                    <div class="js-bar-chart"
                         data-series="[
				                         [40,124,61,124,200,0,0,169,108,124,173],
				                         [30,114,51,114,126,0,0,159,98,114,136],
				                         [20,104,41,104,109,0,0,104,64,104,126]
				                       ]"
                         data-labels='["Mon","Tue","Wed","Thu","Fri","Sat","Sun","Mon","Tue","Wed","Thu"]'
                         data-is-stack-bars="true"
                         data-is-show-axis-x="false"
                         data-is-show-axis-y="true"
                         data-is-show-label-axis-x="true"
                         data-is-show-label-axis-y="true"
                         data-height="260"
                         data-mobile-height="200"
                         data-high="200"
                         data-offset-axis-x="23"
                         data-offset-axis-y="30"
                         data-low="0"
                         data-distance="52"
                         data-stroke-width="40"
                         data-mobile-stroke-width="20"
                         data-stroke-color='["#fcd53b","#07d7f7","#8069f2"]'
                         data-is-grid-solid-line="true"
                         data-grid-line-color="#eeeef1"
                         data-label-color-axis-x="#4a4e69"
                         data-label-font-size-axis-x="14px"
                         data-label-color-axis-y="#868e96"
                         data-label-font-size-axis-y="14px"
                         data-is-show-tooltips="true"
                         data-postfix="%"
                         data-tooltip-custom-class="chart-tooltip chart-tooltip--black small text-white px-2 py-1"></div>
<!-- End Bar Chart -->
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-stroke-width The width of the individual column.
data-mobile-stroke-width the width of a single column at a resolution below 768px
data-stroke-color Stroke color.
data-series The data on which the graphics will be based.
data-labels labels along the X axis.
data-is-horizontal-bars if true, then the graph is not built from bottom to top, but from right to left.

Screenshot example:

Image Description
data-height Chart height.
data-mobile-height graph height at a resolution below 768px.
data-high Highest value on the chart.
data-low the smallest value in the graph. May be negative. In this case, the graph will go below the zero point.
data-distance distance between posts.
data-is-full-width if true, the graphic becomes adaptive in width. defines indents from the edges of the area in which the graph is located.
data-chart-padding indent from the edge of the graph to the labels along the X axis.
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.
data-offset-axis-x indent from the edge of the graph to the labels along the X axis.
data-offset-axis-y indent from the edge of the graph to the labels along the Y axis.
data-is-stack-bars if true, then turns on the mode in which several columns merge into one.

Screenshot example:

Image Description
data-labels-qty The number of labels displayed on the X axis.
data-labels-start-from determines from which account the label on the X axis to start the counting of the displayed labels.
data-is-show-label-axis-x if false, it does not show labels on the X axis.
data-is-show-label-axis-y if false, it does not show labels on the Y axis.
data-label-color-axis-x Label text color along the X axis.
data-label-color-axis-y Label text colour on Y axis.
data-label-font-size-axis-x The font size of labels along the X axis.
data-label-font-size-axis-y Label font size on the Y axis.
data-text-offset-top-x Distance from the top of the text to the graph on the X axis.
data-is-show-tooltips determines whether hints are shown, the values ​​of which are taken from the data-series attribute.
data-tooltip-custom-class adds extra classes to the tooltip.
data-tooltip-currency prefix substituted before value in tooltips.
data-is-grid-solid-line if true, the lines on the background become solid.
data-grid-line-color color lines on the background.
data-is-show-bar-labels if true, then static labels appear on the columns, the values ​​of which are taken from the data-series attribute.
data-is-stroke-rounded if true, the columns will have rounding.

Donut chart

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-plugin-tooltip/dist/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-plugin-tooltip/dist/chartist-plugin-tooltip.min.js"></script>
Copy

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

<script src="../../assets/js/components/hs.chartist-donut.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 donut charts
    $.HSCore.components.HSChartistDonut.init('.js-donut-chart');
  });
</script>
Copy

Basic example 

<!-- Donut Chart -->
<div class="js-donut-chart position-relative d-flex mx-auto" style="width: 240px; height: 240px;"
     data-series='[
		                       {"meta":"Available - ","value":65},
		                       {"meta":"Spent - ","value":35}
		                     ]'
     data-border-width="8"
     data-start-angle="0"
     data-fill-colors='["#8069f2","#eeeef1"]'
     data-is-show-tooltips="true"
     data-tooltip-currency="%"
     data-is-tooltip-currency-reverse="true"
     data-tooltip-custom-class="chart-tooltip chart-tooltip--none-triangle chart-tooltip--centered chart-tooltip--black small text-white text-nowrap px-2 py-1"></div>
<!-- End Donut Chart -->
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-fill-colors determines the colors of the fractions of the graph.
data-series Data on the basis of which the graph will be built. The percentage of graph shares.
data-border-width determines the width of the graphs.
data-start-angle determines from which angle the chart will begin.
data-is-show-tooltips determines whether hints are shown, the values of which are taken from the attribute data-series.
data-tooltip-badge-markup sets markup for points.
data-is-tooltip-reverse-data if true, it changes the display order of value and description.
data-tooltip-custom-class adds extra classes to the tooltip.
data-tooltip-currency prefix substituted before value in tooltips.
data-is-tooltip-currency-reverse if true, then puts the value before the currency sign in tooltips.
data-slice-margin determines the distance between the segments of the graph.

Screenshot example:

Image Description

Pie chart

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

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

<script src="../../assets/js/components/hs.chartist-pie.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 pie charts
    $.HSCore.components.HSChartistPie.init('.js-pie-chart');
  });
</script>
Copy

Basic example 

<!-- Pie Chart -->
<div class="js-pie-chart position-relative d-flex mx-auto" style="width: 240px; height: 240px;"
                         data-fill-colors='["#8069f2","#eeeef1"]'
                         data-series="[50,50,50]"
                         data-start-angle="180"></div>
<!-- End Pie Chart -->
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-fill-colors determines the colors of the fractions of the graph.
data-start-angle determines from which angle the chart will begin.
data-series Data on the basis of which the graph will be built. The percentage of graph shares.