How can momentjs be integrated into Highchart Vue?

I am currently integrating vue-highcharts with moment.js.

<template>
    <highcharts :constructor-type="'stockChart'" :options="stockOptions" :updateArgs="[true, false]"></highcharts>
</template>

<script>
...
    stockOptions: {
       series: [{
          data: ''
       }],
       plotOptions: {
          series: {
                turboThreshold: 0
          }
       },
       chart: {
            type: 'area'
       },
       time: {
            timezone: 'America/Sao_paulo'
       }
    }
...
</script>

However, I encountered the following error:

Highcharts Error #25
Can't find Moment.js library
Using the global.timezone option requires the Moment.js library to be loaded.

What steps should I take to resolve this issue?

javascriptvue.jshighchartsmomentjs

Answer №1

To ensure that Highcharts can access the moment.js library from the global window scope, you must first add it there. Begin by importing two essential modules:

import Moment from "moment";
import MomentTimeZone from "moment-timezone";

Next, assign the imported modules to the window object and invoke the moment-timezone module function:

window.moment = Moment
MomentTimeZone();

For a working demonstration, refer to this live example: https://codesandbox.io/s/n0v72938j

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

Executing an Ajax callback function to navigate to a different page

I must handle ajax errors globally by capturing 901 error codes in my header.jsp. There is an error message displayed in the browser console: GET https://localhost:8443/SSApp/Pan/report?&vessel…namax%20Tanker%20Pool%20Limited&rptTitle=Activit ...

javascriptjqueryajax

Transforming the storage mechanism within Redux

I am looking to modify the overall state of Redux (commonly referred to as storage). Below is the code I have written: reducer export const user = (state = {}, action) => { console.log(4); console.log(action.type) console.log(action.payloa ...

javascriptreactjsreduxreact-redux

Why does app.post function while router.post does not seem to work?

I have encountered an issue while logging in with React on the front end. The process goes to my node/Express/Passport backend and I am able to successfully log in when it reaches the backend. However, I am facing difficulties in communicating that informa ...

javascriptnode.jsexpresspassport-local

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

javascriptcsstinymcetinymce-4

Tips on avoiding a page reload following a form submission using JQuery

Currently developing a website for my app development project, I've encountered an unusual issue. Utilizing some JQuery to transfer form data to a php page called 'process.php' and then add it to my database. The strange part is that the pa ...

javascriptphpjqueryhtmlforms

Tips on reloading or refreshing a react-table component using my form component

I currently have two reactJS components set up: CustomerForm component, which includes a form along with form handling code. CustomerList component, which utilizes react-table to list the customers. Both components are fully functional and operational. ...

javascriptreactjsreact-table

I am encountering difficulty in printing multiple documents from FireStore

I am facing an issue where I can successfully retrieve and print all documents from a Firestore collection one by one using console.log(). However, when attempting to display these documents on the screen, only the most recent document is showing up. Here ...

javascriptreactjsfirebasegoogle-cloud-firestore

Exploring the power of promise chaining within AWS Lambda

I'm feeling a bit confused about how Promise chaining works in AWS Lambda. exports.handler = async(event) => { firstMethod = () => { return new Promise(function(resolve, reject){ setTimeout(function() { ...

javascriptnode.jsaws-lambda

Sometimes, Node.js struggles to retrieve values from my configuration file

I'm currently utilizing node.js on the server side with a RESTful service setup as follows; app.get('/getAndroidVersion', function(req,res){res.json({version: config.androidVerion});}); This service is expected to return the version value ...

javascriptnode.js

When a link is clicked, the text within an input field

Seeking a solution for inserting a value into an input when clicking a link, with the inserted value being the name of the clicked link. I am unsure how to achieve this. Can anyone provide guidance? The solution can involve jQuery, JavaScript, PHP, or any ...

javascriptphpjquery

Experience an endless array of objects

This demonstration showcases the ability to navigate within a group of spheres within specific boundaries. My goal is to explore infinitely among them. What steps should I take to achieve this? ...

javascriptthree.js

The function str.split() is dividing the text based on individual letters rather than the specified delimiter

I am facing an issue where the string of tags retrieved from firebase needs to be split by ',' and stored in the data() for rendering. The firebase snapshot data is correctly formatted after splitting when viewed in the console like this: "t ...

javascriptvue.jssplit

Strategies for resolving duplicate jQuery code in my project

Trying to simplify my jQuery code that handles video selection and playback functionality. Users can click on a thumbnail or button to play a specific video, with the title of the video changing accordingly. Despite achieving the desired outcome, the cur ...

javascriptjqueryrefactoring

Make sure to validate for null values when extracting data using the useSelector hook

Could someone help me with checking for null while destructuring data? const { vehicles: { data: { reminderVehicles }, }, } = useSelector((state) => state); The code snippet above is throwing an error message: Attempting to ...

javascript

What is the process for converting a file to base64 encoding, and then uploading it as a multipart file to a backend API using JavaScript

I am working on a project to create a micro-service that can receive base64 encoded data. However, when attempting to send more than 6 MB of data, I encountered the following error message: The multi-part request contains parameterized data (excluding ...

javascriptspringreactjsspring-bootmultipartform-data

What option would suit Django comet the best?

Combining Django with Orbited, Stomppy server, and Apache OR Using Django with Eventlet and Spawning web server Are Orbited and Stomppy considered outdated in this context? If anyone knows of a more updated and efficient solution, preferably with a com ...

javascriptpythonajaxdjango

Erase all records using MongoDB by the following criteria or

I am currently working with a calendar document structured as shown below: calendar: [ {days: { 1: [], 2: ['surprise'], 3: [], ... }}, {days: { 1: [], 2: [], 3: ['test'], ... }} ] My task involves locating specific ...

javascriptmongodbmongoose

Encountering continuous errors during NPM installation

As a newcomer to React, I'm facing challenges in building components and getting my page up and running while following a tutorial. When attempting to npm install dropzone, I encounter a barrage of error messages and an empty tree when checking npm li ...

javascriptnode.jsreactjsnpmreact-dropzone

Encountering an issue with Google distance matrix where property 'text' is undefined

Below is a snippet of code that calculates the distance between two user-provided addresses. This code currently runs when the user submits a form in this manner: $("#distance_form").submit(function (e) { e.preventDefault(); calculateDistance(); }); ...

javascriptjqueryhtmlgoogle-api

How to open a new window in a separate desktop on macOS using Javascript

I am currently browsing my website on a Mac computer. I am interested in opening a new tab on the second desktop using Mission Control. Is this achievable? If so, could you please guide me on how to do it? After searching extensively online, I have been u ...

javascripthtmlmacos