Bar + Line Composed Chart

Monthly revenue as bars with a running average line overlay. Both series share the same data and y-scale; the line uses the per-shape <code>y</code> accessor override to plot <code>runningAvg</code> instead of the container's default <code>yKey</code>.

Source

import {
  Bar,
  CartesianGrid,
  ChartContainer,
  Line,
  Tooltip,
  XAxis,
  YAxis,
} from "chartlyx";

interface Row {
  month: string;
  revenue: number;
  runningAvg: number;
}

const data: Row[] = [
  { month: "Jan", revenue: 320, runningAvg: 320 },
  { month: "Feb", revenue: 460, runningAvg: 390 },
  // ...
];

export default function BarLineComposedChart() {
  return (
    <div style={{ height: 380 }}>
      <ChartContainer
        data={data}
        xKey="month"   xScaleType="band"
        yKey="revenue" yScaleType="linear"
        margin={{ top: 20, right: 24, bottom: 34, left: 52 }}
      >
        <CartesianGrid stroke="#334155" strokeOpacity={0.75} dashArray="4 6" />
        <XAxis stroke="#64748b" textFill="#cbd5e1" />
        <YAxis stroke="#64748b" textFill="#cbd5e1" />

        {/* Bar reads yKey="revenue" from the container */}
        <Bar fill="#38bdf8" fillOpacity={0.5} radius={4} />

        {/* Line overrides y accessor to read runningAvg instead */}
        <Line
          y={(d) => d.runningAvg}
          stroke="#5eead4"
          strokeWidth={2}
          curve="monotone"
        />

        <Tooltip<Row>>{/* shows both series values */}</Tooltip>
      </ChartContainer>
    </div>
  );
}