The alignment of the point on the Highchart line appears to be off

I've encountered a minor issue while using Highstock type Highchart for my statistics. I am utilizing the angular version of highchart.

Take a look at the screenshot below:

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

As evident from the image, the point is not aligning correctly with 25 December. Despite removing all my styles, the problem persists.

Below are the data I am using for Highcharts:

And here are my settings:

var arr = [[1450976400000, 265567],[1451062800000,263272],[1451149200000,268065],[1451235600000,197184]];
$scope.chartConfig = {
    useHighStocks: true,
    options: {
        title: {
            text: 'Hello'
        },
        chart: {
            type: 'StockChart',
            zoomType: 'x',
            alignTicks: true
        },
        navigator: {enabled: false},
        scrollbar: {enabled: false},
        legend: {enabled: true},
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: "%A, %b %e",
                second: "%A, %b %e",
                minute: "%A, %b %e",
                hour: "%A, %b %e",
                day: "%A, %b %e, %Y",
                week: "Week from %A, %b %e, %Y",
                month: "%B %Y",
                year: "%Y"
            }
        }
    },
    series: []

};

$scope.chartConfig.series.push(
    {
        name: key,
        gapSize: 5,
        type: 'area',
        data: arr,
        animation: true,
        marker: {
            enabled: true,
            radius: 3
        },
        shape: 'square',
        shadow: true
    }
);

Any suggestions for a solution?

Here is the jsfiddle.

Answer №1

Highcharts operates using Coordinated Universal Time (UTC). Therefore, the timestamp 1450976400000 corresponds to Thu Dec 24 2015 17:00:00.

Resolution Method 1

Always utilize UTC time.

var offset = new Date().getTimezoneOffset(); // For PST: offset = 1020
value = 1450976400000 - offset * 60e3; // Ultimately: 1450915200000

Implement this with the assistance of moment.js.

moment.utc('2015-12-24').valueOf(); // Ultimately: 1450915200000
moment.utc([2015, 12, 24]).valueOf(); // Ultimately: 1450915200000

Resolution Method 2

Employ global.timezoneOffset

Highcharts.setOptions({
   global: {
    timezoneOffset: 17 * 60
  }
});

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

What is the recommended sequence for adding AngularJS to the index page?

I am new to AngularJS and currently working on a project where I need to include multiple JavaScript files in my index.html page. After doing some research, I came across a post on Stack Overflow that mentioned the importance of including the angular.js fi ...

Having trouble getting jQuery JavaScript to work on Wordpress and feeling lost about how to implement no-conflict mode syntax

Trying to implement the code from this Codepen http://codepen.io/eternalminerals/pen/qdGvMo on my WordPress website at I understand that since WordPress is in no-conflict mode, I need to change $ to jQuery. I have made this adjustment and ensured that the ...

A div containing a form, with the form being visually integrated within the div

Hi everyone, this is my first post here and I've tried to search extensively before asking this question. I've attempted to use the following examples without success: jquery submit form and then show results in an existing div Form submit ...

Switch between divs based on the current selection

var header = $("#accordion"); $.each(data, function () { header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" + this.LongName + "</a>" + "<br />", "&l ...

Tips for concentrating on the initial input field produced by an ng-repeat in AngularJS

Currently, I am dynamically generating input fields using ng-repeat and everything is working smoothly. However, my requirement is to set focus on the first input that is generated by this ng-repeat based on their sequenceId values. So far, I have attempte ...

Placing the IconButton within an AppBar Component using React-JS

Trying to position two IconButtons within a Toolbar, one on the right side and the other on the left side. However, both are ending up on the right side. Here's my code: <AppBar position="fixed" > <Toolbar> <Ic ...

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

I am in the process of integrating chocolat.js into a basic website. An issue I encountered was that the thumbnail was directly processing the anchor link, which resulted in the image opening in a new window instead of launching it in a modal on the screen ...

The issue encountered is an org.openqa.selenium.TimeoutException error that occurs while attempting to

I am utilizing chimp.js, which adds fibers magic to webdriver.io for synchronous code execution. Here is the snippet: var c = require('./config'); module.exports = function () { this.When(/^I attempt to log in with incorrect credentials$/, ...

Guide to Including Captions and Spans in a Table

In the given HTML code, nested tables are used by the developer which cannot be changed. However, there is a requirement to replace the table class and add a caption and span only to the main table. <table class="two_column_layout" align="center"> & ...

Retrieving display format or formatted value from an object with Moment.js

I am currently working on a project using Angular and Material2. Within this project, I have created a moment object in the following way: myDate = moment.utc(new Date()).format("YYYY-MM-DD HH:mm:ss"); This object is then passed as an argument to ano ...

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

Creating a bucket in Autodesk Forge Viewer is a straightforward process with the Forge API

I am currently facing an issue while trying to create and upload a new bucket for storing models. I keep getting a 400 Bad Request error, even though I managed to make it work in a previous project using a different method. Strangely enough, I now encounte ...

How to utilize Vue method for accessing DOM elements

I'm working on a container with various elements like h1, p, etc. The container has a background and I'm trying to create a method to move it based on mouse coordinates. However, I'm facing an issue where the e.target is showing me ele ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

Troubleshooting Full Screen Problems with Three.js

Despite my efforts to troubleshoot, I am still encountering a frustrating issue with the Three.js API. Even after thoroughly studying the API documentation, browsing through StackOverflow questions, and using debugging tools like firebug and chrome's ...

Updating a .txt file using JavaScript

Is there a method on the client side to add text to a file called text.txt using JavaScript? In Python: f = open("text.txt","w") f.write("Hello World") f.close() The code snippet above would input "Hello World" into the text file. I am looking for a sim ...

What is the best way to cancel an interval set by a function within a functional component?

When using useEffect, it's easy to clear an interval like this: useEffect(() => { const interval = setInterval(some function, time); return () => clearInterval(interval) }) But what if I need to set an interval inside a function? Do I hav ...

Share the constructor and enumeration in an npm module for exportation

My background in NPM and Node.js is limited, as my expertise lies mainly in JavaScript for web browsers. Recently, I created a JavaScript library that consists of a constructor function and an enum type. In JavaScript, enums do not exist natively, so the ...

The application ceases to function properly following the update of npm and node on MacOS

I made a huge mistake by updating npm and node versions from 3.10.10 and 6.10.2 to 5.6.0 and 9.3.0, respectively. Now my app is not functioning properly and I am feeling quite desperate. Every time I try to run it, I encounter the following error: /Users ...

Testing React Component State Updates

I've been dedicated to achieving close to 100% unit test coverage with my React application, focusing particularly on the useAsync hook. I came across a code snippet from react hooks: import { useState, useEffect, useCallback } from 'react'; ...