Visx

import { Group } from '@visx/group';
import { LinePath } from '@visx/shape';
import { scaleTime, scaleLinear } from '@visx/scale';
import { AxisLeft, AxisBottom } from '@visx/axis';
import { curveMonotoneX } from '@visx/curve';
import { BarRounded } from '@visx/bar';

const data = [
  { x: new Date('2023-01'), y: 45 },
  { x: new Date('2023-02'), y: 90 },
  { x: new Date('2023-03'), y: 150 },
  { x: new Date('2023-04'), y: 220 },
];

// Custom Scales
const xScale = scaleTime({
  domain: [Math.min(...data.map(d => d.x)), Math.max(...data.map(d => d.x))],
  range: [0, 400]
});

const yScale = scaleLinear({
  domain: [0, Math.max(...data.map(d => d.y))],
  range: [200, 0]
});

// Line chart
function CustomLine() {
  return (
    <svg width={500} height={300}>
      <Group top={20} left={50}>
        <LinePath
          data={data}
          x={d => xScale(d.x)}
          y={d => yScale(d.y)}
          stroke="#ff6361"
          strokeWidth={2}
          curve={curveMonotoneX}
        />
        <AxisBottom
          top={220}
          scale={xScale}
          numTicks={5}
        />
        <AxisLeft
          scale={yScale}
          numTicks={5}
        />
      </Group>
    </svg>
  );
}

// Bar chart
function CustomBars() {
  const barData = [
    { month: 'يناير', value: 120 },
    { month: 'فبراير', value: 200 },
    { month: 'مارس', value: 150 },
  ];

  return (
    <svg width={500} height={300}>
      <Group top={20}>
        {barData.map((d, i) => (
          <BarRounded
            key={i}
            x={i * 150}
            y={300 - d.value}
            width={100}
            height={d.value}
            radius={10}
            fill="#7fc97f"
          />
        ))}
      </Group>
    </svg>
  );
}