Coordinate System

A coordinate system is a 2D positioning system that combines two position scales, describing how data is mapped to the plane where graphics are located.

F2 provides two types of coordinate systems: Cartesian (rect) and Polar. All coordinate systems are 2-dimensional.

Coordinate System Types

Type	Description	Use Cases
`rect`	Cartesian coordinate system, formed by two perpendicular x and y axes	Bar charts, line charts, scatter plots, etc.
`polar`	Polar coordinate system, formed by angle and radius dimensions	Pie charts, rose charts, radar charts, etc.

Coordinate System Comparison

Transforming coordinate system types changes the shape of geometry marks. For example, bar charts transform into various types under different coordinate systems:

Chart Type	Cartesian	Polar (Not Transposed)	Polar (Transposed)
Stacked Bar
Bar

How to Set Coordinate System

F2 uses Cartesian coordinate system by default. To switch coordinate systems, set the coord attribute on the Chart component:

<Chart
  data={data}
  coord={{
    type: 'polar',
  }}
>
  {/* ... */}
</Chart>

Cartesian Coordinate System

The Cartesian coordinate system (rect) is the default coordinate system type, formed by two perpendicular x and y axes.

Configuration Syntax

<Chart
  coord={{
    type: 'rect',        // Declare Cartesian (can be omitted, default value)
    transposed: false,   // Whether to transpose axes
  }}
>
  <Interval x="genre" y="sold" />
</Chart>

Transposed Coordinate System

Swap x and y axes, suitable for bar charts:

<Chart
  coord={{
    type: 'rect',
    transposed: true,    // Transpose axes
  }}
>
  <Interval x="genre" y="sold" />
</Chart>

Polar Coordinate System

The polar coordinate system is formed by angle and radius dimensions, suitable for visualizing periodic data such as time and direction.

Configuration Syntax

<Chart
  coord={{
    type: 'polar',           // Declare polar coordinate system
    startAngle: -Math.PI,    // Start angle (optional)
    endAngle: 0,             // End angle (optional)
    innerRadius: 0.3,        // Inner radius, for donut charts (optional)
    radius: 1,               // Outer radius (optional)
    transposed: false,       // Whether to transpose (optional)
  }}
>
  {/* ... */}
</Chart>

CoordConfig Type Definition

interface CoordConfig {
  type?: 'rect' | 'polar';  // Coordinate system type
  transposed?: boolean;      // Whether to transpose
  startAngle?: number;       // Start angle (polar only)
  endAngle?: number;         // End angle (polar only)
  innerRadius?: number;      // Inner radius (polar only)
  radius?: number;           // Outer radius (polar only)
}

Angle Description

The default start and end angles for F2 polar coordinates are shown below:

Default start angle: -π (9 o'clock direction)
Default end angle: 0 (3 o'clock direction)

Chart Examples

Pie Chart

Draw a pie chart using polar coordinates:

const data = [
  { name: 'Movie A', percent: 0.4, a: '1' },
  { name: 'Movie B', percent: 0.2, a: '1' },
  { name: 'Movie C', percent: 0.18, a: '1' },
  { name: 'Movie D', percent: 0.15, a: '1' },
  { name: 'Movie E', percent: 0.05, a: '1' },
  { name: 'Others', percent: 0.02, a: '1' },
];

<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

Rose Chart

Draw a rose chart using polar coordinates:

const data = [
  { name: 'Jan', value: 30 },
  { name: 'Feb', value: 40 },
  { name: 'Mar', value: 35 },
  { name: 'Apr', value: 50 },
  { name: 'May', value: 45 },
  { name: 'Jun', value: 60 },
];

<Chart data={data} coord={{ type: 'polar', transposed: true }}>
  <Interval x="name" y="value" color="name" coord="polar" />
</Chart>

Donut Chart

Set inner radius to draw a donut chart:

<Chart
  data={data}
  coord={{
    type: 'polar',
    innerRadius: 0.5,  // Set inner radius to 0.5
  }}
>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

Semi-Circle Pie Chart

Adjust start and end angles:

<Chart
  data={data}
  coord={{
    type: 'polar',
    startAngle: -Math.PI / 2,  // -90 degrees
    endAngle: Math.PI / 2,     // 90 degrees
  }}
>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

Radar Chart

Use transposed mode of polar coordinates:

const data = [
  { item: 'Attack', value: 80 },
  { item: 'Defense', value: 70 },
  { item: 'Speed', value: 90 },
  { item: 'Power', value: 60 },
  { item: 'Stamina', value: 75 },
];

<Chart
  data={data}
  scale={{
    value: {
      min: 0,
      max: 100,
    },
  }}
  coord={{
    type: 'polar',
    radius: 0.8,
  }}
>
  <Line x="item" y="value" />
  <Point x="item" y="value" />
  <Axis field="item" />
  <Axis field="value" />
</Chart>

Bar Chart

Use transposed Cartesian coordinates:

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,  // Transpose axes
  }}
>
  <Interval x="genre" y="sold" color="genre" />
</Chart>

Stacked Bar Chart

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,
  }}
  scale={{
    sold: {
      stack: true,  // Enable stacking
    },
  }}
>
  <Interval x="genre" y="sold" color="type" />
</Chart>

Advanced Configuration

Dynamic Coordinate System Switching

class SwitchableChart extends Component {
  state = {
    coordType: 'rect',
  };

  handleSwitch = () => {
    this.setState({
      coordType: this.state.coordType === 'rect' ? 'polar' : 'rect',
    });
  };

  render() {
    const { coordType } = this.state;
    return (
      <Chart
        data={data}
        coord={{ type: coordType }}
      >
        <Interval x="genre" y="sold" color="genre" />
      </Chart>
    );
  }
}

Custom Coordinate System

<Chart
  coord={{
    type: 'polar',
    startAngle: -Math.PI,     // Start from 9 o'clock
    endAngle: 0,              // End at 3 o'clock
    innerRadius: 0.2,         // 20% inner radius
    radius: 0.9,              // 90% outer radius
  }}
>
  {/* ... */}
</Chart>

Common Questions

How to draw a semi-circle pie chart?

Adjust start and end angles:

coord={{
  type: 'polar',
  startAngle: -Math.PI / 2,  // Start from top
  endAngle: Math.PI / 2,     // End at top
}}

How to draw a donut chart?

Set the innerRadius attribute:

coord={{
  type: 'polar',
  innerRadius: 0.5,  // 50% inner radius
}}

How to draw a rose chart?

Use transposed mode of polar coordinates:

coord={{
  type: 'polar',
  transposed: true,  // Transpose
}}

How to swap x and y axes?

Use the transposed attribute:

coord={{
  type: 'rect',
  transposed: true,  // Swap x and y axes
}}

Coordinate System

Coordinate System Types

Coordinate System Comparison

How to Set Coordinate System

Cartesian Coordinate System

Configuration Syntax

Transposed Coordinate System

Polar Coordinate System

Configuration Syntax

CoordConfig Type Definition

Angle Description

Chart Examples

Pie Chart

Rose Chart

Donut Chart

Semi-Circle Pie Chart

Radar Chart

Bar Chart

Stacked Bar Chart

Advanced Configuration

Dynamic Coordinate System Switching

Custom Coordinate System

Common Questions

How to draw a semi-circle pie chart?

How to draw a donut chart?

How to draw a rose chart?

How to swap x and y axes?

Related Documentation