Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format?

Update: I am currently constructing my graph using Unix timestamps in milliseconds. Other sections of this prototype convert those dates using the toDateString method of the Date class (e.g. Fri Aug 5 2016).

Answer №1

To customize the date format for each x-axis tick in Chart.js, you can utilize the ticks.userCallback within the scales.xAxes option. If you are using the version of Chart.js that includes moment.js, formatting dates is simple. However, if you are working with timestamps in milliseconds, you have the flexibility to tailor the labels as needed.

options: {
    scales: {
        xAxes: [{
            ticks: {
                userCallback: function(label, index, labels) {
                    return moment(label).format("DD/MM/YY");
                }
             }
        ]}
     }
 }

Check out this fiddle for a demonstration: https://jsfiddle.net/leighking2/q5ak7p3h/

Answer №2

For version 3.4, achieving this can be done in the following way:

 settings: {
        axes: {
            horizontal: {
                tickmarks: {
                    // Add a dollar sign to each tickmark
                    customFormat: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }
        }
    }

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

javascript Initiate JSON parsing with preset value

In order to parse JSON into a JavaScript object with data, I am providing a simple example below: var IsTrue = true; var Number = 9; var Object = { a : 1}; var Array = [10,6]; var jStr = '{"ask" : IsTrue, "value" : Number, "obj" : Object, "arr" : Ar ...

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

The POST request encountered an error with status code 500 while being processed by the Express.js framework in the IncomingMessage

My current challenge involves creating a HTTP request for a CRUD application using JS. The aim is to add a new user account record to the Logins database. However, every time I attempt this request, it results in a 500 error: To test this, I have written ...

Javascript problem with closing the browser window in Selenium WebDriver

Here are a couple of inquiries: Firstly: Is there a method to initiate the browser on a specific URL (instead of about:blank) while also setting the history length to 0 when starting on that URL? Secondly: I suspect this question is related to the one me ...

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

Tips for maintaining the data on a page continuously updating in AngularJS

I have this code snippet: $cookieStore.put('profileData', $scope.profileData); var profileData = $cookieStore.get('profileData'); $scope.init = function(){ var profileData = $cookieStore.get('pr ...

From the hue of mossy green to the fiery shade of ruby red,

I managed to create a simple green circle using THREE.Shape. Now, I am interested in changing the color of the circle so that it transitions from green in the middle to red at the border. Although I found an example on this website, I'm struggling t ...

Caution: PHP's move_uploaded_file() function is unable to successfully relocate the audio file

I've implemented a straightforward Record Wave script using Recorder.js Encountering an Issue Recording works fine Playback of my recording is successful Downloading the recorded file from blob works smoothly The problem arises when trying to uploa ...

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Does anyone know a method to insert HTML into an iFrame specifically for IE? I have been using execCommand insertHtml in Chrome and Firefox, but it doesn't seem to work in IE. I was able to paste HTML into a content editable div using pasteHTML, howe ...

Change the div attribute when clicking on a corresponding link

For the full code, please visit: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview Here is an angular ui bootstrap accordion with nested panels: <uib-accordion close-others="oneAtATime"> <div ng-repeat="sub in subdivisions"> < ...

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

I've been attempting to display the updated value of the totalQuestions variable in the HTML, but I keep encountering the following error. Can someone point out where I went wrong? https://i.sstatic.net/mEEMS.jpg HTML <label><span class="r ...

The compatibility between Polymer JS and Rails Turbolinks is problematic

Currently, I am facing a challenge in integrating PolymerJs with a Ruby on Rails project that has Turbolinks enabled. The issue arises when I click on a link - the new page loads correctly but my Polymer components do not reinitialize. They appear as if no ...

The AJAX POST function is not functioning properly when clicking on contextmenus

Can someone please assist me? I am having trouble sending data via ajax post to my nodejs server from contextmenus. It is not functioning as expected. Although the ajax request does not give any error alert, the data is not being sent successfully. I hav ...

The backbone view is having trouble processing the data from this.model.toJSON()

I've been working on a Backbone code implementation to display all modifications before adding data to my model. However, every time I try to add something from my form, my view returns "this.model.toJSON() is not a function" and I can't figure o ...

Is there a way to search for the keyword "/test/" within a lengthy string using Regular Expressions?

When faced with a string structured like this: const myString = /example/category/modify?itemID=someID&type=number How can I efficiently extract the segment "/category/" by employing: const subSegment = myString.match(...); My framework of choice i ...

What is the best way to invoke a Javascript function within the same file using PHP?

I am facing an issue with my PHP file named "PhpCallJavascript". I am attempting to call the function CreateSVG() from within the PHP code. However, it seems that it is not working. Do I need to incorporate AJAX here? Or perhaps there is another solutio ...

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

The incorporation of zoom disrupts the smooth scrolling capability of the menu

My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code: body { zoom:90%; } Unfortunately, when I click on a menu o ...

How can state be efficiently communicated from a parent component to a child component in React?

As I embark on my first React project, I have encountered a recurring issue that has left me scratching my head. Whenever I pass state to a child component within an empty-dependency useEffect and then update the state, the child fails to reflect those cha ...

Getting the number of ticks from an rxjs Observable is a simple process that involves extracting

Is there a way to track how many times this observable has run? this.clock = Observable.interval(1000).map(function(value){ if(value == 0){ return value * 100 / 60; } return value * 100 / 60; }).take(61); I would like to kno ...