# Ex gradient colors composed chart

A shadcn/ui block from the [@evilcharts](https://evilcharts.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/evilcharts/ex-gradient-colors-composed-chart).

- Page, with a live preview: https://shadcn.exchange/r/evilcharts/ex-gradient-colors-composed-chart
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/evilcharts/ex-gradient-colors-composed-chart-light-98a148c11e7b4f90.png
- Registry item: https://evilcharts.com/r/ex-gradient-colors-composed-chart.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-composed-chart.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@evilcharts/recharts-composed-chart`

## Files

### `src/registry/examples/recharts/ex-gradient-colors-composed-chart.tsx`

```tsx
"use client";

import { EvilComposedChart } from "@/registry/charts/recharts-composed-chart";
import { type ChartConfig } from "@/registry/ui/recharts-chart";

const data = [
  { month: "January", revenue: 4200, profit: 1800 },
  { month: "February", revenue: 5800, profit: 2400 },
  { month: "March", revenue: 4100, profit: 1600 },
  { month: "April", revenue: 6200, profit: 2800 },
  { month: "May", revenue: 5400, profit: 2200 },
  { month: "June", revenue: 7800, profit: 3400 },
  { month: "July", revenue: 6100, profit: 2600 },
  { month: "August", revenue: 8200, profit: 3800 },
  { month: "September", revenue: 5900, profit: 2500 },
  { month: "October", revenue: 6800, profit: 3000 },
  { month: "November", revenue: 7200, profit: 3200 },
  { month: "December", revenue: 9100, profit: 4200 },
];

const chartConfig = {
  revenue: {
    label: "Revenue",
    colors: {
      light: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"], // [!code highlight]
      dark: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"], // [!code highlight]
    },
  },
  profit: {
    label: "Profit",
    colors: {
      light: ["#10b981", "#14b8a6", "#06b6d4"], // [!code highlight]
      dark: ["#10b981", "#14b8a6", "#06b6d4"], // [!code highlight]
    },
  },
} satisfies ChartConfig;

export function EvilExampleComposedChart() {
  return (
    <EvilComposedChart className="h-full w-full p-4" xDataKey="month" data={data} config={chartConfig}>
      <EvilComposedChart.Grid />
      <EvilComposedChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <EvilComposedChart.Legend isClickable />
      <EvilComposedChart.Tooltip />
      <EvilComposedChart.Bar dataKey="revenue" isClickable />
      <EvilComposedChart.Line dataKey="profit" isClickable />
    </EvilComposedChart>
  );
}
```