Establishing the earliest date on the X Axis in a scatter plot created with ChartJS

When plotting my data points with numerical values for the Y coordinate and date values for the X coordinate, I noticed that the scatter plot starts the X axis at 1976 even though my earliest date is in 2018. Is there a way to set the starting value of the X axis? Here is an example of how my data and options are formatted. Date Format: 2018/06/30

data: {
    datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: 10,
            y: ‘2018/06/30’
        }, {
            x: 0,
            y: ‘2018/06/01’
        }, {
            x: 100,
            y: ‘2018/06/04’
        }]
    }]
}
options: {
    scales: {
        xAxes: [{
            type: 'time',
                     ticks: {
                     suggestedMin: ‘2018/01/01’,
            }
        }]
    }
}

I have tried passing new Date(‘2018/01/01’) as the suggestedMin value, and I also attempted using Min instead of suggestedMin without success.

Answer №1

Here is an example of how we can set a minimum starting point on the x-axis:

data: {
    datasets: [
        {
            label: 'Scatter Dataset',
            data: [
                {
                    x: 10,
                    y: ‘2018/06/30’
                }, {
                    x: 0,
                    y: ‘2018/06/01’
                }, {
                    x: 100,
                    y: ‘2018/06/04’
                }
            ]
        }
    ]
},

options: {
    scales: {
        xAxes: [{
            type: 'time',
            ticks: {
                suggestedMin: '2018/01/01',
            },
            time: {
                min:2018/01/01,
                max:2028/02/02
            }
        }]
    }
}

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

Buttons failing to vanish after being clicked

Hey there! I've been working on a code snippet that displays 2 buttons based on the user's query, such as 'Yes' and 'No'. The idea is that once a button is clicked, both buttons should vanish. To achieve this functionality, I ...

Unraveling modified JSON data in handlebars: a guide

I'm trying to customize the display of JSON keys with different names. Specifically, I want to show the months as jan, feb, mar... etc. Here is my current approach: However, instead of seeing jan, feb, mar..., my output shows 1, 2, 3, 4... I'm ...

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Struggling to make this contact form function properly, I've tried to follow the example provided at . Unfortunately, all my efforts lead to a fatal error: "Call to undefined function http_response_code() in /hermes/bosoraweb183/b1669/ipg.tenkakletcom ...

Utilizing my function and the Math.max method to analyze a collection of object data

If I have an array containing objects with hundreds of fields structured like the example below: [ { "designation":"419880 (2011 AH37)", "discovery_date":"2011-01-07T00:00:00.000", "h_mag":19. ...

What could be causing my Switch statement case to not trigger with exact string matches?

Switch Statements are causing me trouble... The following switch statement never matches any cases and always falls back to the default case. I attempted to remove the default case, added type-checks to the variables involved, and even manually retyped th ...

Deliver a prompt reply from an external asynchronous function

Is there a way to send a response from a function that operates asynchronously outside of the express route? In my scenario, the function is designed to listen for events from SocketIO. How can I achieve sending a response from this function? setTimeout ...

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

Having trouble implementing render props for a toggle button that reveals/hides child components

My goal is to display or hide a couple of child components based on a toggle click using the original HTML structure provided. However, I am encountering an issue where the EditToggle link needs to be displayed next to the h2 element inside the "subtitle-c ...

Converting Large XLSX File (over 600MB) to CSV Using Node.js

Currently, I am facing an issue with converting a large XLSX file, which is over 600mb in size, to CSV format. The conversion process works perfectly fine with smaller files that are less than 3MB. However, when it comes to larger files, the program star ...

Is there a way to superimpose text onto an image within a ReactJS/NextJS application?

I'm facing issues with applying CSS styles properly in my ReactJS/NextJS application. I am working on a component that displays an image with text overlaid on it. Despite testing the styles on w3schools, I cannot seem to get them to work correctly in ...

A complex valueOf function in Javascript

What is the purpose of using ({}).valueOf.call(myvar)? This expression converts any value to an object. If the input is already an object, it remains unchanged; however, if it is a primitive type, it gets converted to an instance of a wrapper type. I ...

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...

My element is not being animated by Elementbyclass

Without Using JQUERY The animation I'm trying to create isn't functioning properly. I attempted to utilize document.getElementsByClassName, but it's not working as expected. There are no errors, but the element is not animating correctly. ...

Combining values from multiple arrays into a single array using JavaScript/Reactjs

I am working with an array that contains arrays as its values. My goal is to generate an output that includes all the array values. Please note: The input array and its elements (arrays) do not have a fixed length. Input: array = [ [a,b], [c,d,e], ...

Retrieve the $ionicConfigProvider within a Controller

In my controller file named ProfileController.js, I am trying to change the text of the back button. After doing some research, I found this code snippet: $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left'); How can ...

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

I have developed a PHP script that takes some time to execute and displays multiple "echo" statements as the progress is being made. The script connects to an FTP server, deletes all contents, and then uploads new files. Everything is functioning correctly ...

Loop over a generated form with fields using ng-repeat

I am facing an issue where I have an ng-repeat loop and I need to submit the values of input fields within it to a generated form. Using ng-model did not work for me. Is there a way to access the input names inside the form tag? <li ng-repeat="group ...

Mastering the placement of script tags in your Next.js application with Next Script

I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...

There seems to be an issue with Datatable not being able to apply filtering or

When using the JQuery Datatable plugin processing serverside, I am encountering an issue where the table is not getting refreshed when the dropdown selection is changed. The goal is to pass a value through the datatable to my PHP class which retrieves reco ...

The error message "Uncaught TypeError: Unable to access property 'url' of an undefined object - Google Image API" appeared

I am facing an issue with generating 5 random images. The first row, from flicker, is working fine. However, the second row from Google is only returning 4 images and showing an error in the console: Uncaught TypeError: Cannot read property 'url&apos ...