Separate data points with same x axis value

I’m graphing a scatter+line graph that has x axis values that will end up being the same. I was curious if there is a specific layout/xaxis attribute that would allow me to separate each data point into separate ticks.

For instance, I have 3 arrays:
y1: [0,1,2,3,4,3,2,1]
y2: [1,2,3,0,8,6,4,3]
both using the x: [0,0,0,1,3,4,4,4]

My problem is the x values of 0 and 4 get bundled together.

Here is a picture of my issue as well:


How do I get all the xaxis values to be separate from each other rather than a big bundle?

I can’t seem to find any layout attribute that correlates to this.
This is what I am currently doing:

     const trace1 = {
        y: dataY1,
        x: dataX,
        mode: 'lines+markers',
        type: 'line+markers',
        marker: {
          color: 'blue'
        }
      }
      const trace2 = {
        y: dataY2,
        x: dataX,
        mode: 'lines+markers',
        type: 'line+markers',
        marker: {
          color: 'blue'
        }
      }
    const layout = {
      xaxis: {
        title: 'Date',
        ticks: 'outside'
      },
      yaxis: {
        autosize: true,
        title: 'Duration (ms)'
      }
    }

Has anyone had this issue?

hi, were you able to fix this ? Even I am having the same issue.