Charts

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} value={value} window={30}>
  <LiveLine dataKey="value" stroke="var(--chart-line-primary)" formatValue={(v) => `$${v.toFixed(2)}`} />
  <ChartTooltip showDatePill={false} content={TooltipContent} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={(v) => `$${v.toFixed(2)}`} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} value={value} window={30}>
  <LiveLine dataKey="value" stroke="var(--chart-1)" formatValue={(v) => `$${v.toFixed(2)}`} />
  <ChartTooltip showDatePill={false} content={TooltipContent} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={(v) => `$${v.toFixed(2)}`} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} value={value} window={20} nowOffsetUnits={1}>
  <LiveLine dataKey="value" stroke="var(--chart-3)" formatValue={formatSats} dotSize={4} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatSats} />
</LiveLineChart>

const momentumColors = { up: "var(--chart-positive)", down: "var(--chart-negative)", flat: "var(--muted-foreground)" };

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} value={value} window={25}>
  <LiveLine dataKey="value" momentumColors={momentumColors} formatValue={formatUsd} dotSize={5} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} value={value} window={28}>
  <LiveLine dataKey="value" fill={false} stroke="var(--chart-1)" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 28 }} data={data} value={value} window={30}>
  <Background />
  <LiveLine dataKey="value" stroke="var(--chart-1)" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 28 }} data={data} value={value} window={30}>
  <Background pattern="dots" opacity={0.85} />
  <LiveLine dataKey="value" stroke="var(--chart-1)" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 28 }} data={data} value={value} window={30}>
  <ReferenceArea y1={138} y2={148} strokeStyle="dashed" showMarkers />
  <LiveLine dataKey="value" stroke="var(--chart-1)" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>

<LiveLineChart margin={{ top: 8, right: 8, bottom: 40, left: 28 }} data={data} value={value} window={30}>
  <ReferenceArea
    y1={138}
    y2={148}
    pattern="diagonal"
    patternColor="var(--chart-foreground-muted)"
    axisLabelColor="var(--chart-1)"
    fillOpacity={0.85}
  />
  <LiveLine dataKey="value" stroke="var(--chart-1)" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={formatUsd} />
</LiveLineChart>