Does anyone know how I can make this kind of chart?

[ZacharySal]

[ckifer]

You can set baseValue to 50 on AreaChart

[ZacharySal]

Thank you! Do you also know how can I change the colors of the line and area depending on which side of the 50 the line is? This is what I tried.

<ResponsiveContainer width={isDesktopScreen ? "69%" : "100%"} minWidth={isDesktopScreen ? "69%" : "100%"} height={250} className={"relative"} > <AreaChart data={dataPoints as any[]} margin={{ left: 10, right: isDesktopScreen ? 0 : -20, top: 5 }} > <CartesianGrid stroke="#ccc" strokeDasharray="1 4" /> <defs> <linearGradient id="splitColor" x1="" y1="100" x2="0" y2="50"> <stop offset={50} stopColor={homeTeamColor} stopOpacity={1} /> <stop offset={50} stopColor={homeTeamColor} stopOpacity={0.5} /> </linearGradient> </defs> <Area type="monotone" dataKey="awayTeamWinChance" stroke={homeTeamColor} fill="url(#splitColor)" baseValue={50} /> <XAxis dataKey="quarter" ticks={["1st", "2nd", "3rd", "4th"]} tickLine={true} tickSize={1} tickMargin={10} orientation="top" tick={true} interval={0} /> <YAxis ticks={["100", "50", "100"]} interval={0} orientation="right" tick={true} tickSize={1} tickLine={false} tickMargin={10} /> </AreaChart> </ResponsiveContainer>

[ckifer]

Try using this as an example https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-areachart--area-chart-fill-by-value

https://github.com/recharts/recharts/blob/master/storybook/stories/Examples/AreaChart.stories.tsx#L318

Except for instead of using 0 you can use your value for baseValue

[ZacharySal]

Thank you for the examples. I was able to achieve close to what I want, however, I cannot figure out how to get the linear gradient to reference the full height of the graph instead of just the height of the area. Therefore, it is putting the white break, which should always be at 50%, at the middle of the graph here. If you have any tips, I would greatly appreciate it. Thank you again.

<linearGradient id="splitColor" x1="0" y1="0%" x2="0" y2="100%"> <stop offset={"0%"} stopColor={homeTeamColor} /> <stop offset={"50%"} stopColor="white" /> <stop offset={"50%"} stopColor="white"/> <stop offset={"100%"} stopColor={awayTeamColor} /> </linearGradient>

Here, the area should be almost completely green with the white stop at 50%, and no blue should be visible since Detroit never had a >50% chance to win.

[ckifer]

Can you make a codesandbox of this? It'll be easier than sending code back and forth

[ckifer]

Tried to do something here but not sure how to calculate the middle offset correctly