Chart.js

Simple yet flexible JavaScript charting for designers & developers.

Chart.js documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="./node_modules/chart.js/dist/Chart.min.css">

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

        
          <script src="./node_modules/chart.js/dist/Chart.min.js"></script>

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

        
          <script src="./assets/js/hs.chartjs.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF CHARTJS
              // =======================================================
              document.querySelectorAll('.js-chart').forEach(item => {
                HSCore.components.HSChartJS.init(item)
              })
            });
          </script>

Line chart

Updating line chart

Use "gradientPosition": {"x0": 0, "y0": 0, "x1": 0, "y1": 200} to set position for gradient.

Strong line chart

Line chart with grid

Bar chart

Updating bar chart

Doughnut chart

Updating doughnut chart

Half circle chart

Updating half circle chart

Bubble chart

Matrix chart

ChartJS methods

Parameters Description Default value
options.scales.yAxes.ticks.prefix Preffix for yAxes. false
options.scales.yAxes.ticks.postfix Postfix for yAxes. false
options.scales.yAxes.ticks.metric Metric output for axes (1k, 1kk, etc..). false
options.responsive Responsive chart. true
options.maintainAspectRatio Maintain the original canvas aspect ratio (width / height) when resizing. false
options.legend.display Legend for chart. false
options.tooltips.enabled Enable or disable tooltips. false
options.tooltips.prefix Prefix for tooltip text. false
options.tooltips.postfix Postfix for tooltip text. false
options.tooltips.yearStamp Added year after title. true
options.tooltips.hasIndicator Add indicator for tooltip. false
options.tooltips.indicatorWidth Width indicator. 8px
options.tooltips.indicatorHeight Height indicator. 8px
options.tooltips.lineMode Set line tooltip type. false
options.tooltips.lineWithLineColor Set color for line. null
options.tooltips.lineWithLineBottomOffset Offset of the top for line. 7
options.tooltips.lineWithLineBottomOffset Offset of the bottom for line. 43
options.gradientPosition Gradient position. { x0: 0, y0: 0, x1: 0, y1: 0 }

Matrix methods

Parameters Description Default value
options.matrixBackgroundColor.color Set color for matrix chart. null
options.matrixBackgroundColor.accent Set accent color for matrix chart. Usually this is the maximum value from datasets. null
options.matrixBackgroundColor.nullColor Set custom color for empty items in matrix chart. false
options.matrixBackgroundColor.additionToValue Add addition value to value of item in matrix chart. 5
options.matrixLegend.container Wrapper for custom legends. 5
options.matrixLegend.stepSize Step size for legends. max / 10
options.matrixLegend.metric Metric output for legend values (1k, 1kk, etc..). false