[Chartjs]-ChatJS 2.8 chaning x-Axis font style and color

by

1👍

✅

Instead of specifying the fontFamily and fontColor for the scaleLabel which is the scale title you need to specify it in the ticks part, to achieve this just change scaleLabel to ticks

Live example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="favicon.ico">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
  <link href="https://fonts.cdnfonts.com/css/benchnine" rel="stylesheet">
  <style>
    @import url('https://fonts.cdnfonts.com/css/benchnine');
  </style>
</head>

<body>
  <h1 style='font-family:"BenchNine";'>BenchNine 222 444</h1>
  <div class="reportGraph" style="width:860px;margin:auto;">
    <canvas id="chartJSContainer" height="250"></canvas>
  </div>
  <script>
    var options = {
      type: "bar",
      data: {
        datasets: [{
          label: "20. June. 2021 01:08",
          data: [98, 92, 94, 98, 100, 96, 28, -18, 96, 70],
          borderColor: "black",
          backgroundColor: "transparent",
          type: "line",
          borderWidth: 1,
          lineTension: 0,
          fill: false
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              min: -100,
              max: 100
            }
          }],
          xAxes: [{
            labels: ["111", "222", "333", "444", "555", "666", "777", "888", "999", "000"],
            ticks: {
              fontFamily: "BenchNine",
              fontColor: "red"
            }
          }]
        },
        responsive: true
      }
    };
    var chart = new Chart(document.getElementById("chartJSContainer"), options);
  </script>
</body>

</html>

Leave a comment