Victory

import { VictoryChart, VictoryLine, VictoryAxis, VictoryTheme } from 'victory';
import { VictoryBar } from 'victory-bar';

// Line Chart
function SalesChart() {
  const data = [
    { month: 1, sales: 45 },
    { month: 2, sales: 90 },
    { month: 3, sales: 150 },
    { month: 4, sales: 220 },
    { month: 5, sales: 180 },
  ];

  return (
    <VictoryChart
      theme={VictoryTheme.material}
      domainPadding={{ x: 20 }}
    >
      <VictoryAxis
        label="الشهر"
        tickFormat={(t) => ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو'][t - 1]}
      />
      <VictoryAxis
        dependentAxis
        label="المبيعات"
      />
      <VictoryLine
        data={data}
        x="month"
        y="sales"
        style={{
          data: { stroke: '#c43a31', strokeWidth: 3 },
          parent: { border: '1px solid #ccc' }
        }}
      />
    </VictoryChart>
  );
}

// Multi-series chart
function MultiChart() {
  const salesData = [
    { x: 'Q1', y: 100 },
    { x: 'Q2', y: 150 },
  ];
  
  const profitData = [
    { x: 'Q1', y: 40 },
    { x: 'Q2', y: 80 },
  ];

  return (
    <VictoryChart domainPadding={{ x: 30 }}>
      <VictoryBar data={salesData} style={{ data: { fill: 'tomato' } }} />
      <VictoryBar data={profitData} style={{ data: { fill: 'orange' } }} />
    </VictoryChart>
  );
}

// Animation
<VictoryChart>
  <VictoryLine
    y={x => Math.sin(x * 3)}
    animate={{
      onEnter: {
        duration: 1000,
        before: () => ({ y: 0 }),
        after: (datum) => datum
      }
    }}
  />
</VictoryChart>