Restrict the number of labels on Chart.js exclusively for smaller displays

How to Limit the Number of Labels on a Chart.js Line Chart

I am looking for a way to decrease the number of labels on my line chart only when it is viewed on a small device. The solution provided in the previous post suggests using the following code:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 12
    }
}]

While this solution works well, I would like to maintain all 24 labels when viewing the chart on a desktop screen (lg). However, I want to hide half of the labels when the chart is displayed on a smartphone (xs).

This is how my chart currently looks on both desktop and smartphone: https://i.sstatic.net/9kH4c.png

https://i.sstatic.net/lFVDt.png

javascriptvue.jsresponsive-designchart.js

Answer №1

In this specific scenario, a check is performed to determine if the window size is smaller than 600px. If true, a tick limit of 12 is set; otherwise, the tick limit is 24.

    xAxes: [{
            type: 'time',
            ticks: {
                autoSkip: true,
                maxTicksLimit: determineTickLimit()
            }
    }]
        
    function determineTickLimit(){
        return window.innerWidth < 600 ? 12 : 24
    }

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

Why does the React input value keep its value when the modal is re-rendered, despite the state being updated correctly?

Take a look at this sandbox link for the code snippet: Sandbox Showcased below is a table structure: https://i.sstatic.net/3F3Mc.png By clicking on the 'edit' button, a modal window opens up as shown below allowing you to edit input fields (onC ...

javascriptreactjsreact-hooksmodal-dialogbootstrap-5

What exactly is the purpose of the colon in JavaScript's import statement?

Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...

javascriptnode.jstypescriptes6-modulesadonis.js

Vue 3 project experiencing issue with Bootstrap 5 tabs failing to update upon tab click

Currently, I'm in the process of developing a vue3 application with bootstrap 5. As part of this project, I am implementing tabs. Although I can successfully click on the tabs, I have encountered an issue where the tab-content remains fixed on the ini ...

javascriptvue.jstabsbootstrap-5bootstrap-vue

Troubleshooting Recursive Logic Problem with hasOwnProperty in JavaScript and JSON

JSON data with a specific problem highlighted by the comment // doesn't get parsed currently: var oarsObject = [{ "coordinateReferenceSystem": "26782,15851 <-- not in a value", "positionReferenceType": "geogWgs84", "geogWgs84": ...

javascriptjqueryjson

Small jumps occur when implementing the scrollTop jquery animation

I've encountered an issue with the scrollTop jquery animation that I can't seem to resolve. It seems to micro-jump right before the animation, especially when there is heavier content. I'm puzzled as to why this is happening... Here's ...

javascriptjqueryhtmlmousewheelscrolltop

Troubleshooting Angular 2 ng-if issues

Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...

javascripthtmlcssangularjs

Issue with multiple dropdown menus not closing when clicked on

The current implementation provides the functionality to convert select boxes into list items for styling purposes. However, a drawback of the current setup is that once a dropdown is opened, it can only be closed by clicking on the document or another dr ...

javascriptjqueryhtmlcss

PHP is unable to show items containing special characters such as double quotes and apostrophes

I am facing an issue with ordering food items. Names that do not contain apostrophes work fine, but those like Pasqua Nero D'Avola Sicilia are causing problems. I have tried replacing ' with \', but the issue persists. Here is the relev ...

javascriptphpwebdynamic-loading

The POST function in jQuery often returns the [Object object] result

Looking to extract a string from a PHP file using jQuery's post method. function getString(string) { return $.ajax({ type: 'POST', url: 'scripts/getstring.php', data: { 'string': string } ...

javascriptjqueryajax

vue-authenticate: Can you point me to the location where the $auth variable is defined?

I'm currently working on integrating Vue-authenticate, but I've encountered an issue with the sample code provided in their documentation: new Vue({ methods: { login: function () { this.$auth.login({ email, password }).then(function ...

vue.jsvue-authenticate

mongoose.js now prevents update methods from returning documents

Is it feasible to avoid fetching any data from the database after performing the SOME_MODEL.findOneAndUpdate() operation? I could potentially utilize the lean() and select() methods. However, all I really require is a callback confirming the successful up ...

javascriptmongodbexpressmongoose

Determining if a specific time falls within a certain range in JavaScript

I'm currently working on a Node.js application, but I have limited experience with Javascript. As part of my application, I need to implement validations for events and ensure that no two events can run simultaneously. To achieve this, I have set up ...

javascriptnode.js

how to sort arrays in javascript

When it comes to filtering items based on specific criteria like fruit and vegetable filters, what is the most effective method to retrieve items that meet both filter requirements? fruitfilter: [] = [{fruitname: "apple"} , {fruitname: "orange"}] vegeta ...

javascripttypescript

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

Fetch the user's email address from Auth0 using an asynchronous function

I am trying to load the user's email from Auth0 and store it in a constant. However, I am getting an arrow. I cannot identify the error. Can anyone help me find a solution? const userEmailInfo = async () => { auth0Client = await auth.createClien ...

javascriptnode.jsauth0sveltekit

What is the method to assign an initial value to React.createRef()?

Scrolling management in my component is handled through a ref that represents the current scroll value. I've chosen to use refs instead of state and setState because using setState while the user is scrolling would result in a choppy and unresponsive ...

javascriptreactjsuse-ref

Tips for changing the state of a parent DOM element from a child component several levels deep in a React application

I am currently incorporating both react-router-dom and Material-UI into my application. Below is a basic example I have created using the following files: routes.tsx import { Outlet, createBrowserRouter } from "react-router-dom" const App = () ...

javascriptreactjsmaterial-uireact-router-dom

"Receiving a 404 error when sending a POST request, but getting

When attempting to send a POST request, I encountered a 404 error response from the server. Strangely, when sending a GET request, I received a 200 response. I have experimented with different methods: $.ajax({ type:"POST", url: "script.php", ...

javascriptphpajaxpostxmlhttprequest

Issue with Ajax communication to PHP script causing data not to be sent

I am developing a web application that functions as an extensive form which will later be converted into a PDF document. Upon submission of the form, all input data is sent to a PHP file where they are stored as variables to be included in the PDF. Some of ...

javascriptphpajax

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss