Custom Shape Bar Chart

Custom Shape Bar Chart

Preview

Code

src/app/shared/chart-widgets/custom-shape-bar-chart.tsx

'use client';

import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
} from 'recharts';

export default function CustomShapeBarChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        barSize={32}
        margin={{
          left: -20,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis tickLine={false} dataKey="name" />
        <YAxis tickLine={false} />
        <Bar
          dataKey="uv"
          fill="#8884d8"
          shape={<TriangleBar />}
          label={{ position: 'top' }}
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={colors[index % 20]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}