import { ChartContainer, BarChart, Bar, ChartTooltip, CartesianGrid, XAxis, YAxis, ChartLegend, ChartLegendContent } from '@photonix/ultimate';

const config = {
  sales: { label: 'Sales', color: 'var(--chart-1)' },
  profit: { label: 'Profit', color: 'var(--chart-2)' }
};

<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} stroke="var(--border-neutral-tertiary)" strokeDasharray="4 4" />
    <XAxis
        dataKey="month"
        axisLine={false}
        tickLine={false}
        tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }}
        dy={10}
    />
    <YAxis
        axisLine={false}
        tickLine={false}
        tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }}
    />
    <ChartTooltip />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="sales" fill="var(--color-sales)" radius={[4, 4, 0, 0]} />
    <Bar dataKey="profit" fill="var(--color-profit)" radius={[4, 4, 0, 0]} />
  </BarChart>
</ChartContainer>