Graph looks very weird and distorted

plotly.js
1

Hi team,

I am trying to plot a plotly line graph in react with a large data set but the plotted graph looks very weird and distorted.

Please find below the demo link that I have created:

would be expecting a response ASAP as it is a urgent issue that needs to be resolved.

2

Hey @Sharath welcome to the forums.

What are your expectations? This is a very basic plot. I guess you will have to sort your data before plotting. What dtype are the axes?

3

Hello its a timeseries data where the x-axis would be the time stamp and y-axis are the data points as you can see in the fiddle link I have given.

this is how my data set array look like d= [ [ 1739966676822, 702],[ 1739966677835, 702 ]…];
we are filtering this data set as x-axis to hold the timestamps and y-axis the data points.

Also this is just for demo purpose but in reality we are fetching it from backend and the data set would be so large.

4

If you are referring to the “spikes”: these are most likely due to missing data for a given timestamp. Time axes are somewhat special in plotly. You can find lots of information in the forums search on that.

I responded to some topics concerning time axes: Search results for '@aimped time axis' - Plotly Community Forum

5

You need more configuration, add the following to fix it a bit, but I advise you to document yourself a bit so you can style and give more presentation to your stroke,

var layout = {
	xaxis: {
  	type: "date",
    range: [xaxis[0], xaxis[1000]]
  }
}

var config = {
	responsive: true,
  scrollZoom: true
}

Plotly.newPlot('myDiv', data, layout, config);

Another observation is that the value 702 is repeated a lot, that is why the stroke is mostly linear with peaks every x position and finally do not use fiddle for your examples it bugs a lot