HighChart- When I use useUTC: false then x axis data are not showing properly

[cupatil]

I have created a line chart of date-time. In that want to display some other time zone dates on X-Axis. For this, I am setting up

time: { useUTC: false }

Then X-axis values are not showing properly.

Chart Initial Config:

`{ xAxis: { lineWidth: 1, type: 'datetime', dateTimeLabelFormats: { hour: "%H:%M", day: "%H:%M" },

},
yAxis: [
  {
    gridLineWidth: 1,
    lineWidth: 1,
    opposite: true,
    accessibility: {
      enabled: true,
    },
    opposite: true,
  },
],
time: {
   useUTC: false
},
series: [
  {
    data: products.slice(0, tradingInterval)
  },
],

};`

I am using below data series

data: [[1607890680000, 1.6075], [1607890620000, 1.6075], [1607890560000, 1.6076], [1607890500000, 1.6077], [1607890440000, 1.6077], [1607890380000, 1.6072], [1607890320000, 1.6079], [1607890260000, 1.6073], [1607890200000, 1.6078], [1607890140000, 1.6076], [1607890080000, 1.6075], [1607890020000, 1.6069], [1607889960000, 1.6076], [1607889900000, 1.6076], [1607889840000, 1.6077], [1607889780000, 1.6075]] }]

[Denyllon]

Hi @cupatil ,

Thank you for contacting us again. Could you explain in more details what did you mean by saying "are not showing properly"? I've tested your code with native Highcharts, and it looks totally fine to me (or the problem is unnoticeable for the first glance), except the error in the developer console caused by a wrong order of provided data points. Here is the demo: https://jsfiddle.net/BlackLabel/w0y2ghtc/ If you meant the fact the x axis values have the time offset while changing the useUTC value, it's totally expected behaviour. Please take a look on the docs: https://api.highcharts.com/highcharts/time.useUTC

Kind regards!

[cupatil]

On X-Axis labels (time interval or offset) are not visible if we provide useUtc value. As also not visible in demo (https://jsfiddle.net/BlackLabel/w0y2ghtc/). If we remove useUtc then the X-axis datapoint interval showing properly.

Can you please explain how data points are wrongly ordered?

Actually, I have the same data series as per jSfidle and the timezone of time is "US/Eastern" and I want to convert that time series to Indian standard time. Can you please also help me with how can I implement this?

[Denyllon]

I'm really sorry, but here we're doing all the best to resolve the issues of highcharts-react-native package, and track its eventual bugs/problems, but these kind of questions are not directly related with this library though (Highcharts React Native wrapper), and suspect they suppose to be asked through the one of official support channels (StackOverflow, Highcharts forum, or via e-mail support@highcharts.com), so you can always contact our support team. They should dispel your doubts without any problem.

On X-Axis labels (time interval or offset) are not visible if we provide useUtc value. As also not visible in demo (https://jsfiddle.net/BlackLabel/w0y2ghtc/). If we remove useUtc then the X-axis datapoint interval showing properly.

No matter how I set the useUTC either equal to false, or true xAxis labels are always visible to me. Here are the screenshots:

Can you please explain how data points are wrongly ordered?

After opening the browser's console, you can notice the Highcharts #15 error, which means that your data points are not in ascending order (by x value).

Kind regards!

[cupatil]

But I am executing same JsFidle code of yours from this https://jsfiddle.net/BlackLabel/w0y2ghtc/

But not showing X-axis values Please check screenshot for the same

[cupatil]

Also, I have given the below data in ascending order but x-axis values are not showing

Data=[[1607912100000, 1.6063], [1607912160000, 1.6061], [1607912220000, 1.6062]]

jsFidle: https://jsfiddle.net/chetanpatil1993/8j56091d/2/

[Denyllon]

Unfortunately, I'm not able to reproduce it in any way (Chrome, Firefox, Edge combinations with OSX, and Windows). Well, this problem should actually be reported directly on the Highcharts repository, because it looks the issue is not related with this wrapper. Please report the problem there and link this issue to provide developers more information about this unexpected behaviour. You can also include your system setup (system, and browser versions), to let them find the reason much more easier.

Kind regards!