Changing the Size of X-Axis Labels Font in a Line Chart Using ChartJS

Struggling with adjusting the font size of x-axis labels in my line chart design using ChartJS. I've attempted to set the x-axis ticks to my desired size, but the font size remains unchanged:

options:{
     scales:{
          xAxis: [{
               ticks:{
                    fontSize: 6,
               }
           }]
       }
}

The code for my chart successfully adjusts the font size of the yAxis labels, but the same technique doesn't work for the xAxis:

var myChart= new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
              labels: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
              datasets: [{ 
                  data: [1200,1500,1600,1800,1400,600,1330], 
                  borderColor:"rgba(0,150,255, 1)",
                  borderWidth: 3,
                  lineTension: 0,
                  pointBackgroundColor: "white",
                  pointBorderColor: "rgba(0,150,255, 1)",
                  pointBorderWidth: 3,
                  pointRadius: 4,
                  fill: false
                }
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              tooltips:{enabled:false},
              legend:{
                  display:false
              },
              scales:{
                  yAxes:[{
                      ticks:{
                          max:2000,
                          min:0,
                          fontColor: 'black',
                          fontSize: 8,
                      }
                  }],
                  xAxis:[{
                      ticks:{
                          fontColor:'black',
                          fontSize: 6,
                      }
                  }]
              },
              title: {
                display: true,
                fontSize: 15,
                fontColor: "black",
                text: 'Calories'
              },
              annotation:{
                events:["click"],
                annotations:[
                  {
                    drawTime: "beforeDatasetsDraw",
                    type: "box",
                    xScaleID: "x-axis-0",
                    yScaleID: "y-axis-0",
                    xMin: "Monday",
                    xMax: "Sunday",
                    yMin: 1200,
                    yMax: 1500,
                    backgroundColor: "rgba(0,255,0,0.5)",
                    borderColor: "rgb(0, 255, 0)",
                    borderWidth: 1,
                    onClick: function(e) {
                      console.log("Box", e.type, this);
                    }
                  }
                ]
              }
            }
          });

Any advice on how to solve this issue would be appreciated.

Answer №1

Update xAxis => xAxes

xAxes:[{
  ticks:{
  fontColor:'black',
  fontSize: 8,
 }
}]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In order to extract a value from a different webpage, I must first make a request to that webpage and extract the XML value from it

I have been working on a project that requires displaying currency exchange rates. To achieve this, I initially tried using AngularJS to call another webpage for the exchange rate values, but I encountered issues as AngularJS can only make JSON/Rest URL ca ...

unable to properly assess the functionality of the timeout feature within the useEffect hook

I've been working on a lazyload image loader component that only loads images if they have been visible for more than 500ms. Although the functionality is working as expected, I'm facing challenges when it comes to writing a test to validate its ...

Leveraging req.files for uploading multiple files at once

When it comes to handling a multiple file upload on the client side, I have encountered an issue with my HTML code. Here is what it looks like: form(method='post', enctype='multipart/form-data')#createReportForm input(type='file ...

Creating a JSON object in AngularJS is a simple and straightforward process

Is it a good practice to create a JSON object in AngularJS this way? Or is there a better solution to achieve the desired format? Edit question: I am trying to create an object in JSON format as shown below. I have written the code but facing difficulty ...

The click functionality is not functioning properly within the .each() loop

For my event handler, I am trying to use click() but it doesn't seem to be working. Here is the code snippet: $('.ajax-close').click(function( event ){ event.preventDefault(); alert('hi'); $( ' ...

The Node.js application successfully receives an emit event from the browser, however, the browser does not receive any emit

I'm having trouble understanding why the node.js server can connect and receive an emit() from the browser, but when I try to emit() back from node.js it doesn't reach the browser. Am I overlooking something here? The console log displays "Test ...

Use jQuery's $.post method to validate the form field and prevent submission if there are any errors

I am trying to validate a form field on submit and block the submission if an ajax response message is returned. Below is the JS code I have: $('form.p_form').submit(function (){ var description = $.trim($('#f9').val()); var aa = $.pos ...

AngularJSError

I am completely new to AngularJS and I've been tasked with debugging someone else's code. While debugging in Google Chrome, I encountered the following error: TypeError: accountService.logIn(...).success is not a function. The issue lies with ...

"The issue with the nested nth-child property is that it only affects the first element it is applied to

Having trouble with the nth-child property. The issue lies with the #subnav element. I'm unsure why nth-child isn't working as expected (supposed to change border color and width). Here's the problem and code snippet : <div class=" ...

Discovering ways to determine if multiple strings are present within a single string using JavaScript

After writing this function, I noticed it only worked with a single string value. contains(input, words) { let input1 = input.split(' '); for (var i = 0; i < input1.length; i++) { if (input1[i] === words) { ...

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

Webgrid columns lose their width after a postback event

I'm working on a simple webgrid that has 3 columns: View columns: grid.Columns( grid.Column("Applicant Name", format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId }, null), style: "AppN ...

What is the best way to show "no results found" message in a jQuery search list?

Everything is working smoothly. Does anyone have any suggestions on how to display a message saying "No results found"? This is the code I'm using: http://jsfiddle.net/UI_Designer/8p426fog/4/ $(".my-textbox").keyup(function() { var val = $( ...

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

Get rid of the strange border on the material dialog

I am struggling with the Angular material 6 dialog component as it is displaying a strange border. I have attempted to remove it using the code below, without success. Interestingly, when I apply the style inline in the browser, it works fine. Any suggesti ...

It is impossible to remove or trim line endings with regex in Node.JS

I'm having trouble with using process and util in a NodeJS script. Even after trimming, line breaks persist in the resulting string (as seen in the console.log() output below). I'm unsure why this is happening. var util = require("util"); proces ...

Steps for updating a text section beneath a carousel

I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance. I've atte ...

Uncover the content of a base64 encoded string and convert it into

A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...

Utilizing Selenium for the Upload of an APK Document

I've encountered an issue during my test. I'm attempting to upload an APK file, but the process seems to halt at that stage. My attempts with simple sendKeys using the file path and an AutoIT script have both proven unsuccessful. Below is my in ...