facetCircle

Partition data by fields, use circular space division, then visualize data for each facet.

Getting Started

import { Chart } from '@antv/g2';

const M = [
  'Jan.',
  'Feb.',
  'Mar.',
  'Apr.',
  'May',
  'Jun.',
  'Jul.',
  'Aug.',
  'Sept.',
  'Oct.',
  'Nov.',
  'Dec.',
];
const N = ['A', 'B', 'C', 'D'];
const data = M.flatMap((month) =>
  N.map((name) => ({
    month,
    name,
    value: Math.random(),
  })),
);

const chart = new Chart({
  container: 'container',
  width: 480,
  height: 480,
});

chart.options({
  type: 'facetCircle',
  data,
  encode: { position: 'month' },
  children: [
    {
      type: 'interval',
      encode: { x: 'name', y: 'value', color: 'name' },
    },
  ],
});

chart.render();

For more examples, visit the Chart Examples page.

Options

The underlying implementation of facetCircle is consistent with mark, so many configuration options are the same.

All configurations corresponding to facetCircle can be set using the API, for example:

chart.options({ type: 'facetCircle', data: [1, 2, 3], encode: { position: 'month' } });

encode

For facetCircle, there are unique encode channels.