CODEWITHSUNDEEP
chart.js
Dev Dev
Dev Dev

Reputation: 387

ChatJS 2.8 chaning x-Axis font style and color

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>

Upvotes: 1

Views: 469

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

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>

Upvotes: 1

Related Questions