Charts

Chart.js provides simple yet flexible JavaScript charting for designers & developers.

Some of these scripts may not be required depending on the used chart.

// Javascript
<script src="js/vendor/moment-with-locales.min.js"></script>
<script src="js/vendor/Chart.bundle.min.js"></script>
<script src="js/vendor/chartjs-plugin-rounded-bar.min.js"></script>
<script src="js/vendor/chartjs-plugin-crosshair.js"></script>
<script src="js/vendor/chartjs-plugin-datalabels.js"></script>
<script src="js/vendor/chartjs-plugin-streaming.min.js"></script>
<script src="js/cs/charts.extend.js"></script>

if (document.getElementById('lineChart')) {
  const lineChartEl = document.getElementById('lineChart').getContext('2d');
  const lineChart = new Chart(lineCharlineChartEl, {
    type: 'line',
    options: {
      plugins: {
        crosshair: ChartsExtend.Crosshair(),
        datalabels: {display: false},
      },
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            gridLines: {display: true, lineWidth: 1, color: Globals.separatorLight, drawBorder: false},
            ticks: {beginAtZero: true, stepSize: 5, min: 50, max: 70, padding: 20, fontColor: Globals.alternate},
          },
        ],
        xAxes: [{gridLines: {display: false}, ticks: {fontColor: Globals.alternate}}],
      },
      legend: {display: false},
      tooltips: ChartsExtend.ChartTooltipForCrosshair(),
    },
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [
        {
          label: '',
          data: [60, 54, 68, 60, 63, 60, 65],
          borderColor: Globals.primary,
          pointBackgroundColor: Globals.primary,
          pointBorderColor: Globals.primary,
          pointHoverBackgroundColor: Globals.primary,
          pointHoverBorderColor: Globals.primary,
          borderWidth: 2,
          pointRadius: 3,
          pointBorderWidth: 3,
          pointHoverRadius: 4,
          fill: false,
        },
      ],
    },
  });
}

<div class="sh-35">
  <canvas id="lineChart"></canvas>
</div>

You may find more examples in Interface.Plugins.Charts.html file which is initialized by js/plugins/charts.js. Also, it might be helpfull to take a look at js/cs/charts.extend.js.