Advanced Chart Types

/**
 * Dual axes chart component for displaying data with different scales
 */
const DualAxes: ForwardRefExoticComponent<PropsWithoutRef<DualAxesConfig> & RefAttributes<Chart>>;

interface DualAxesConfig extends CommonConfig<DualAxesOptions> {}

interface DualAxesOptions extends Options {
  // Specific configuration for dual axes charts
}

import React from "react";
import { DualAxes } from "@ant-design/plots";

const data = [
  { month: 'Jan', revenue: 1000, profit: 200 },
  { month: 'Feb', revenue: 1200, profit: 300 },
  { month: 'Mar', revenue: 800, profit: 150 },
  { month: 'Apr', revenue: 1500, profit: 400 },
];

const config = {
  data: [data, data], // Two datasets for two axes
  xField: 'month',
  yField: ['revenue', 'profit'],
  geometryOptions: [
    { geometry: 'column' },
    { geometry: 'line', color: '#5B8FF9' },
  ],
};

return <DualAxes {...config} />;

/**
 * Funnel chart component for conversion rate visualization
 */
const Funnel: ForwardRefExoticComponent<PropsWithoutRef<FunnelConfig> & RefAttributes<Chart>>;

interface FunnelConfig extends CommonConfig<FunnelOptions> {}

interface FunnelOptions extends Options {
  // Specific configuration for funnel charts
}

import React from "react";
import { Funnel } from "@ant-design/plots";

const data = [
  { stage: 'Visitors', value: 100000 },
  { stage: 'Leads', value: 8000 },
  { stage: 'Opportunities', value: 2000 },
  { stage: 'Customers', value: 500 },
];

const config = {
  data,
  xField: 'stage',
  yField: 'value',
  legend: false,
  conversionTag: {
    formatter: (datum) => `${(datum.$$percentage$$ * 100).toFixed(1)}%`,
  },
};

return <Funnel {...config} />;

/**
 * Radar chart component for multi-dimensional data visualization
 */
const Radar: ForwardRefExoticComponent<PropsWithoutRef<RadarConfig> & RefAttributes<Chart>>;

interface RadarConfig extends CommonConfig<RadarOptions> {}

interface RadarOptions extends Options {
  // Specific configuration for radar charts
}

import React from "react";
import { Radar } from "@ant-design/plots";

const data = [
  { skill: 'JavaScript', score: 90, user: 'Alice' },
  { skill: 'Python', score: 80, user: 'Alice' },
  { skill: 'React', score: 95, user: 'Alice' },
  { skill: 'Node.js', score: 85, user: 'Alice' },
  { skill: 'CSS', score: 70, user: 'Alice' },
];

const config = {
  data,
  xField: 'skill',
  yField: 'score',
  seriesField: 'user',
  area: {
    visible: true,
  },
  point: {
    visible: true,
  },
};

return <Radar {...config} />;

/**
 * Waterfall chart component for cumulative change visualization
 */
const Waterfall: ForwardRefExoticComponent<PropsWithoutRef<WaterfallConfig> & RefAttributes<Chart>>;

interface WaterfallConfig extends CommonConfig<WaterfallOptions> {}

interface WaterfallOptions extends Options {
  // Specific configuration for waterfall charts
}

import React from "react";
import { Waterfall } from "@ant-design/plots";

const data = [
  { month: 'Starting Balance', value: 23000, type: 'total' },
  { month: 'Jan', value: 2000, type: 'increase' },
  { month: 'Feb', value: -1000, type: 'decrease' },
  { month: 'Mar', value: 3000, type: 'increase' },
  { month: 'Ending Balance', value: 27000, type: 'total' },
];

const config = {
  data,
  xField: 'month',
  yField: 'value',
  total: {
    label: 'Total',
    style: { fill: '#96a6a6' },
  },
  risingFill: '#f4664a',
  fallingFill: '#30bf78',
};

return <Waterfall {...config} />;

/**
 * Stock chart component for financial data visualization
 */
const Stock: ForwardRefExoticComponent<PropsWithoutRef<StockConfig> & RefAttributes<Chart>>;

interface StockConfig extends CommonConfig<StockOptions> {}

interface StockOptions extends Options {
  // Specific configuration for stock charts
}

import React from "react";
import { Stock } from "@ant-design/plots";

const data = [
  { date: '2023-01-01', open: 100, high: 110, low: 95, close: 105 },
  { date: '2023-01-02', open: 105, high: 115, low: 100, close: 108 },
  { date: '2023-01-03', open: 108, high: 112, low: 102, close: 106 },
  { date: '2023-01-04', open: 106, high: 120, low: 104, close: 118 },
];

const config = {
  data,
  xField: 'date',
  yField: ['open', 'close', 'high', 'low'],
  risingFill: '#ec0000',
  fallingFill: '#00da3c',
};

return <Stock {...config} />;

/**
 * Rose chart component for polar/cyclical data visualization
 */
const Rose: ForwardRefExoticComponent<PropsWithoutRef<RoseConfig> & RefAttributes<Chart>>;

interface RoseConfig extends CommonConfig<RoseOptions> {}

interface RoseOptions extends Options {
  // Specific configuration for rose charts
}

import React from "react";
import { Rose } from "@ant-design/plots";

const data = [
  { type: 'A', value: 40 },
  { type: 'B', value: 21 },
  { type: 'C', value: 17 },
  { type: 'D', value: 13 },
  { type: 'E', value: 9 },
];

const config = {
  data,
  xField: 'type',
  yField: 'value',
  seriesField: 'type',
  radius: 0.9,
  innerRadius: 0.2,
  sectorStyle: {
    stroke: '#fff',
    lineWidth: 1,
  },
};

return <Rose {...config} />;

/**
 * Bidirectional bar chart component for comparative data visualization
 */
const BidirectionalBar: ForwardRefExoticComponent<PropsWithoutRef<BidirectionalBarConfig> & RefAttributes<Chart>>;

interface BidirectionalBarConfig extends CommonConfig<BidirectionalBarOptions> {}

interface BidirectionalBarOptions extends Options {
  // Specific configuration for bidirectional bar charts
}

import React from "react";
import { BidirectionalBar } from "@ant-design/plots";

const data = [
  { country: 'USA', male: 100, female: 95 },
  { country: 'China', male: 120, female: 110 },
  { country: 'Japan', male: 80, female: 85 },
];

const config = {
  data: [
    ...data.map(d => ({ ...d, value: d.male, type: 'Male' })),
    ...data.map(d => ({ ...d, value: -d.female, type: 'Female' })),
  ],
  xField: 'value',
  yField: 'country',
  seriesField: 'type',
  tooltip: {
    formatter: (datum) => ({
      name: datum.type,
      value: Math.abs(datum.value),
    }),
  },
};

return <BidirectionalBar {...config} />;

/**
 * Mix chart component for combining multiple chart types
 */
const Mix: ForwardRefExoticComponent<PropsWithoutRef<MixConfig> & RefAttributes<Chart>>;

interface MixConfig extends CommonConfig<MixOptions> {}

interface MixOptions extends Options {
  // Specific configuration for mixed charts
}

import React from "react";
import { Mix } from "@ant-design/plots";

const data = [
  { month: 'Jan', sales: 1000, target: 1200 },
  { month: 'Feb', sales: 1200, target: 1100 },
  { month: 'Mar', sales: 800, target: 900 },
  { month: 'Apr', sales: 1500, target: 1300 },
];

const config = {
  data,
  plots: [
    {
      type: 'column',
      options: {
        data,
        xField: 'month',
        yField: 'sales',
      },
    },
    {
      type: 'line',
      options: {
        data,
        xField: 'month',
        yField: 'target',
        color: '#FF6B3B',
      },
    },
  ],
};

return <Mix {...config} />;