Search code examples
reactjschart.jschartjs-2.6.0react-chartjs-2

plot line graph in Chartjs 2 when number of data in yaxis is not eqaul to number of data in xaxis


I have two arrays for ploting the graph. Let me tell with an example.

yAxis = [2, 4, 6, 7, 8, 9]
xAxis = [10:10, 10:20, 10:30, 10:40, 10:50, 11:00]

In this case, graph will plot correctly. Then after clicking some button 'A' in my page, the xAxis is modified like,

xAxis = [10:10, 10:15, 10:20, 10:25, 10:30, 10:35, 10:40, 10:45, 10:50, 10:55, 11:00]

but my yAxis will always be the same as,

yAxis = [2, 4, 6, 7, 8, 9]

In this case, the graph will plot till '10:35' in xAxis Then after clicking some button 'B' in my page, the xAxis is modified like,

xAxis = [10:10, 10:40, 11:00]

but my yAxis will always be the same as,

yAxis = [2, 4, 6, 7, 8, 9]

In this case, the graph will plot till '6' in yAxis

Is their any way to fix this issue? I was tring to implement in reactjs application with react-chartjs-2

***Or is their any way to split the time in xAxis if start time, end time and required,intervals is passed to graph ***


Solution

  • This issue was solved by adding the time which should come in between and changing all the existing lines ploted in the graph and added snapGap:true.