Charts
Display graphically quantitative data on your websites.
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>
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 |
|---|---|
|
|
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:
|
|
|
Labels along the X axis.
Screenshot example:
|
|
|
Chart height. |
|
|
Chart height at resolution less than 768 px. |
|
|
Highest value on the chart.
Screenshot example:
|
|
|
The lowest value on the graph. Can be negative. In this case, the graph will go below the zero point.
Screenshot example:
|
|
|
The offset from the edge of the chart to the labels along the X axis. |
|
|
The offset from the edge of the chart to the labels along the Y axis. |
|
|
Postfix is put after each label on the Y axis.
Screenshot example:
|
|
|
Align labels to the X axis. Possible values:
|
|
|
Determines whether the graph itself is visible. |
|
|
Determines whether the strokes of the graphs are shown.
Screenshot example:
|
|
|
Determines whether the points on the graph are shown. |
|
|
Stretches the chart for the entire width of the grid. |
|
|
Determines whether lines will be displayed against the background of the chart along the X axis. |
|
|
Determines whether lines will be displayed against the background of the chart along the Y axis. |
|
|
Determines whether hover prompts specified in the data-series attribute are displayed. |
|
|
Determines which side of the description will be specified in the tooltip. Possible values:
|
|
|
Adds additional classes to the prompt. |
|
|
Opacity of the charts. |
|
|
Fill color. |
|
|
Stroke color. |
|
|
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. |
|
|
The font size for labels on the X axis. |
|
|
The font size for labels on the Y axis. |
|
|
The distance from the text to the chart is along the x-axis. |
|
|
The distance to the right of the text to the graph along the Y axis. |
|
|
The text color of labels in the Y axis. |
|
|
Colors of points on the graph. |
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>
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 |
|---|---|
|
|
The data on which the graphics will be based. |
|
|
Chart height. |
|
|
Highest value on the chart. |
|
|
The width of the individual column. |
|
|
Stroke color. |
|
|
Determines whether lines are displayed against the background of the graph along the X axis. |
|
|
Determines whether lines are displayed against the background of the graph along the Y axis. |