Chart

import { DocyLineChart } from '@/components/docyrus-native/chart';

const data = {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  series: [
    { name: 'Revenue', data: [30, 40, 35, 50, 49] },
    { name: 'Expenses', data: [20, 25, 30, 28, 32] }
  ]
};

<DocyLineChart
  data={data}
  title="Revenue vs Expenses"
  showGrid
  animated
  height={300}
/>

import { DocyLineChart } from '@/components/docyrus-native/chart';

<DocyLineChart
  data={{ categories: ['A', 'B', 'C'], series: [{ name: 'S1', data: [10, 20, 15] }] }}
  smooth
  showArea
  showGrid
  showCrosshair
  showTooltip
/>

import { DocyBarChart } from '@/components/docyrus-native/chart';

<DocyBarChart
  data={{ categories: ['Q1', 'Q2', 'Q3'], series: [{ name: '2024', data: [120, 200, 150] }] }}
  stack
  horizontal
/>

import { DocyPieChart } from '@/components/docyrus-native/chart';

<DocyPieChart
  data={[
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 10 }
  ]}
  donut
  showLabels
/>

import { DocyAreaChart } from '@/components/docyrus-native/chart';

<DocyAreaChart
  data={{ categories: ['Mon', 'Tue', 'Wed'], series: [{ name: 'Users', data: [120, 132, 101] }] }}
  smooth
  stack
/>

import { DocyScatterChart } from '@/components/docyrus-native/chart';

<DocyScatterChart
  data={{ series: [{ name: 'Points', data: [{ x: 10, y: 20 }, { x: 30, y: 40 }] }] }}
  showGrid
/>

import { DocyRadarChart } from '@/components/docyrus-native/chart';

<DocyRadarChart
  data={{
    categories: ['Speed', 'Power', 'Defense', 'Agility', 'Stamina'],
    series: [{ name: 'Player', data: [80, 90, 70, 85, 75] }]
  }}
/>

import { DocyGaugeChart } from '@/components/docyrus-native/chart';

<DocyGaugeChart
  data={{ value: 72, min: 0, max: 100, label: 'Score' }}
  showValue
/>

import { DocyFunnelChart } from '@/components/docyrus-native/chart';

<DocyFunnelChart
  data={[
    { name: 'Visits', value: 5000 },
    { name: 'Leads', value: 2500 },
    { name: 'Sales', value: 500 }
  ]}
  showLabels
/>

import { DocyHeatmapChart } from '@/components/docyrus-native/chart';

<DocyHeatmapChart
  data={{
    xLabels: ['Mon', 'Tue', 'Wed'],
    yLabels: ['Morning', 'Afternoon', 'Evening'],
    data: [
      { x: 0, y: 0, value: 10 },
      { x: 1, y: 1, value: 25 },
      { x: 2, y: 2, value: 15 }
    ]
  }}
  showValues
/>

import { DocyTreemapChart } from '@/components/docyrus-native/chart';

<DocyTreemapChart
  data={[
    { name: 'Engineering', value: 45 },
    { name: 'Design', value: 25 },
    { name: 'Marketing', value: 30 }
  ]}
  showLabels
  showValues
/>

import { DocyCandlestickChart } from '@/components/docyrus-native/chart';

<DocyCandlestickChart
  data={{
    data: [
      { date: 'Mon', open: 100, high: 120, low: 95, close: 115 },
      { date: 'Tue', open: 115, high: 125, low: 110, close: 108 }
    ]
  }}
  showVolume
/>

import { DocySparklineChart } from '@/components/docyrus-native/chart';

<DocySparklineChart
  data={{ data: [5, 10, 5, 20, 8, 15] }}
  width={200}
  height={40}
  showArea
  smooth
/>

import { DocyComboChart } from '@/components/docyrus-native/chart';

<DocyComboChart
  data={{
    categories: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: 'Revenue', data: [120, 200, 150, 80], type: 'bar' },
      { name: 'Growth', data: [10, 15, 12, 8], type: 'line', smooth: true }
    ]
  }}
/>

import { DocyVChart } from '@/components/docyrus-native/chart';

<DocyVChart
  spec={{
    type: 'bar',
    data: [{ values: [{ x: 'A', y: 10 }, { x: 'B', y: 20 }] }],
    xField: 'x',
    yField: 'y'
  }}
  width={300}
  height={200}
/>