ChatJS 2.8 chaning x-Axis font style and color

Question

I have a ChartJS 2.8 code below. I want to change the font-family (style) of the x-Axis by applying a custom font and also changing x-Axis labels to red color. I tried as below and it is not working. Any help please? Note: Please keep the library 2.8.0, do not change it. Thanks.

<!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"],
                            scaleLabel: {
                                fontFamily: "BenchNine",
                                fontColor: "red"
                            }
                        }
                        ]
                    },
                    responsive: true
                }
            };
            var chart = new Chart(document.getElementById("chartJSContainer"), options);
        </script>
    </body>
</html>

Does one of these posts answer your question? https://stackoverflow.com/a/65464252/2358409, https://stackoverflow.com/a/61974056/2358409 — uminder, Jun 20 '21 at 09:30

score 1 · Accepted Answer · answered Jun 20 '21 at 09:59

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>

ChatJS 2.8 chaning x-Axis font style and color

1 Answers1