Display Multiple Y-Values for a Single X-Value in a Scatter Chart without overlapping

[MrShakes]

Question

According to the attached image below I'm trying to display multiple y-values for a single x-value in a scatter chart without overlapping, we'll assume 3 different y points for now i.e. y1, y2 and y3. 3 main things to note:

1. Each y point can have multiple y values on the same x point i.e there can be 06:00 and 16:00 for y1 on Sunday
2. y2/y3 can also have multiple y points on Sunday and should ideally not completely overlap with other y points on that x point

I know I can format the x and y axis to display text, I've researched and tried with no luck yet.
Is it possible with this library thanks?

[zibs]

Hey @MrShakes, is this image what you want the chart to look like? Or is this what happens with the current implementation?

[MrShakes]

Hi @zibs it's what I want it to look like

[zibs]

Hey @MrShakes I think this should be already possible:

You can achieve that by doing something along the lines of

<Scatter
                    points={points.listenCount}
                    animate={{ type: "spring" }}
                    radius={radius}
                    shape={shape}
                  >
                    <LinearGradient
                      start={vec(0, 0)}
                      end={vec(0, 400)}
                      colors={["#a78bfa", "#a78bfa50"]}
                    />
                  </Scatter>
                  <Scatter
                    points={points.listenCount}
                    animate={{ type: "spring" }}
                    radius={radius}
                    shape={shape}
                    style="stroke"
                    strokeWidth={1}
                    color="black"
                  />
                  <Group transform={[{ translateX: 14 }]}>
                    <Scatter
                      points={points.listenCount}
                      animate={{ type: "spring" }}
                      radius={radius}
                      shape={shape}
                    >
                      <LinearGradient
                        start={vec(0, 0)}
                        end={vec(0, 400)}
                        colors={["green", "#c78f50"]}
                      />
                    </Scatter>
                    <Scatter
                      points={points.listenCount}
                      animate={{ type: "spring" }}
                      radius={radius}
                      shape={shape}
                      style="stroke"
                      strokeWidth={1}
                      color="black"
                    />
                  </Group>
                  <Group transform={[{ translateX: 24 }]}>
                    <Scatter
                      points={points.listenCount}
                      animate={{ type: "spring" }}
                      radius={radius}
                      shape={shape}
                    >
                      <LinearGradient
                        start={vec(0, 0)}
                        end={vec(0, 400)}
                        colors={["red", "#c78f50"]}
                      />
                    </Scatter>
                    <Scatter
                      points={points.listenCount}
                      animate={{ type: "spring" }}
                      radius={radius}
                      shape={shape}
                      style="stroke"
                      strokeWidth={1}
                      color="black"
                    />
                  </Group>

Where you use <Group transform={[{ translateX: N }]}> to determine how much to shift that scatter chart by.

You'll most likely have to do some massaging of your data to get it just right, but it should be possible.

[MrShakes]

Thanks @zibs please can you add just purple to point 80-April and red to point 40-April so I see how it's done?

[zibs]

I'll leave that up to you!