Can vue-chartjs version 3.5.1 be configured to work with momentjs for custom date formatting in chart.js?

I have been using 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23404b4251570d495063110d1a0d17">[email protected]</a>
with 
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c6c5d59dd3d8d1c2c4dac3f0839e859e81">[email protected]</a>
and attempting to format dates in my options like this:

scales: {
  xAxes: [ {
      type: 'time',
      time: {
        unit: 'full',
        displayFormats: {
          'full': 'DD/MM/YYYY HH:mm:ss'
        }
      }
    }
  ],
}

Unfortunately, it is not working. I believe I need to include moment.js or chartjs-adapter-moment, but since vue-chartjs is a third-party library that cannot be altered, I am unsure how to proceed without the option to add moment.js. Any suggestions?

EDIT 1:

I attempted the following solutions:

import Chart from 'chart.js';
import adapter from 'chartjs-adapter-moment';
Chart.plugins.register(adapter);

import { Line, mixins } from 'vue-chartjs';

And also tried:

import Chart from 'chart.js';
import 'chartjs-adapter-moment';
import { Line, mixins } from 'vue-chartjs';

Neither of these methods helped.

EDIT 2:

I also tried:

import Chart from 'chart.js';
import adapter from 'chartjs-adapter-moment';
Chart.register(adapter);

import { Line, mixins } from 'vue-chartjs';

Additionally, I added the following line to BaseCharts.js within the node-modules folder after importing Chart:

import 'chartjs-adapter-moment'

Unfortunately, this approach also did not work.

javascriptvue.jsdatetimechart.jsmomentjs

Answer №1

Our Vue application seamlessly integrates vue-chartjs and chartjs-adapter-luxon. Within our app, we have a specific module that imports ChartJS to utilize all the necessary features, along with importing the luxon adapter for added functionality. While we do not utilize moment.js in our implementation, I believe it can also be easily integrated in a similar manner.

import {
  Chart as ChartJS,
  Filler,
  Title,
  Tooltip,
// and more
} from 'chart.js'
import 'chartjs-adapter-luxon'

ChartJS.register(
  Filler,
  Title,
  Tooltip,
  ... // and more 
)

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

Need help adding color to your PlotlyJS barpolar chart background?

After creating a PlotlyJS barpolar chart, I noticed an issue with the background color where the bars end. The background color seems to be stuck on white, as shown in the image. (Please ignore the transparent black rounded square in the background, as it ...

javascriptplotly

What is the best way to extract several form elements and assign a new attribute to each of them?

<form name="myform"> <fieldset> <legend>Delivery Information</legend> <p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size=&qu ...

javascriptformsdominput

Using Typescript to pass a property as one of the keys in an object's list of values

In my React Native project, I need to pass a string value from one component to another. The different options for the value can be found in the ScannerAction object: export const ScannerAction = { move: 'move', inventory: 'inventory&apo ...

javascriptreactjstypescriptparameter-passing

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

What is the best way to automatically populate a specific value into an input field every time it is reset?

When it comes to HTML Forms, the reset event fires prior to the actual clearing of form fields. <form id="wrapper-form" <input id="something-needs-to-be-filled-after-each-reset" /> </form> If I set up an event listener for the rese ...

javascripthtmlforms

How to extract the rotation of the world from the THREE JS matrixWorld

Is there a way to retrieve the world rotation of an Object3D in three.js? I am aware of how to obtain the world position of an Object3D using object.matrixWorld, but I am unsure about how to acquire the world rotation of an object. This information is cru ...

javascriptthree.jsrotationposition

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

After experimenting with different browser compatibility, I have discovered a way to clear all fields when clicking the "New" button. By using the code onClick="history.go(0)", the fields are successfully emptied in IE but unfortunately fail in Mozilla. ...

javascripthtmlcross-browser

The Google Maps feature encountered an error (ReferenceError: google is not defined)

Utilizing the Google Maps API on my website to display multiple locations has been successful so far. However, an issue arises when attempting to determine the distance between two sets of latitude and longitude coordinates - resulting in an error message ...

javascriptangulartypescriptapi

Adding items to an array within a jQuery each loop and performing a jQuery ajax request

I am trying to loop through an array, push the results into a JavaScript array, and then access the data outside of each loop and AJAX call. Can anyone explain how to do this? This is what I have attempted: var ides = ["2254365", "2255017", "2254288", ...

javascriptjqueryarraysajax

issue concerning slide functionality and ajax integration

I'm facing an issue with the structure of my HTML. Here is the setup I have: <div id ="slide1"> <form method="post" id="customForm" action=""> //my content - name, email, mypassword, pass2 </for ...

javascriptjqueryajax

removing the http:// or https:// from a JavaScript string

I am dealing with the following collection of strings http://example.com https://example.com http://www.example.com Is there a way to remove the http:// or https:// prefixes from these URLs? ...

javascript

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" t ...

javascriptjqueryhtmlopencart

Show a component when there is no input value, then conceal it when an input value is present

Recently, I attempted to position a paragraph absolutely in relation to an input element. My goal is to conceal the paragraph when the input has a value, and reveal it when the input is empty. Here is the code snippet I created, however, it doesn't ...

javascripthtmlcss

Vue.js: what is the source of this information?

I have been following the Vue.js documentation and implemented this specific example. Shown below is the index.html file: <html> <head> <link rel="stylesheet" href="index.css"> <script src=" ...

vue.jsaxios

A more efficient method for tallying values within an object (JavaScript, React)

Is there a more efficient way to determine the count of items with a specific key/value pair in a React state? When the list is large, this method may become a bottleneck. To illustrate the question, consider the following simplified example: class App ...

javascriptarraysobjectreactjs

Encountering TypeScript errors when utilizing it to type-check JavaScript code that includes React components

My JavaScript code uses TypeScript for type checking with docstring type annotations. Everything was working fine until I introduced React into the mix. When I write my components as classes, like this: export default class MyComponent extends React.Compo ...

javascriptreactjstypescriptcheckjs

Two-column layout with consistent height vertically, but varying heights on individual rows

By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...

javascriptjquerycss

Implementing dynamic tab switching using Ajax and jQuery to add active classes

I am currently working on creating ajax-based tabs by loading specific divs within each tab. In order to achieve this, I need to dynamically add an active class to identify which tab is open at any given time. Unlike bootstrap tabs, the difference here lie ...

javascriptjqueryajaxbootstrap-4tabs

Element not recognized: <my-company-form-extra> - have you properly registered this component?

I've been attempting to render a component using the is directive <template> <div> <v-tabs v-model="currentTab" fixed-tabs> <v-tab v-for="(item, i) in tabItems" :key="i">{{ item }} < ...

typescriptvue.jsnuxt.jsdirective

Ways to prompt the debugger to pause whenever a specific script file is called during execution in Edge/Chrome debugger

I am currently in the process of debugging a Typescript web application, which is quite new to me as I have never delved into web development before. This particular project entails multiple script files and various libraries. While running the applicatio ...

javascripttypescriptdebugginggoogle-chrome-devtoolsmicrosoft-edge