rect

Overview

rect is a core chart element used to draw rectangular marks. It implements different visualization requirements by defining the starting point, ending point, width, height, and other graphic properties (such as color and style) of rectangles. rect can dynamically adjust the position, size, and style of rectangles based on bound data, thus intuitively displaying data distribution, comparison relationships, or density information. rect is widely used in scenarios such as bar charts, heatmaps, and matrix charts.

Core functional features of rect:

• Drawing rectangular shapes: rect is the fundamental unit for building rectangular charts, which can be used to construct bar, block, heatmap and other charts. Each rectangular unit displays specific data content by mapping numerical or categorical information from the data.
• Rich encoding mapping: Users can freely map data fields to visual attributes such as X-axis, Y-axis, size, color, etc. of rectangles. Provides flexible customization capabilities, generating various styles of rectangular graphics through the combination of fields and styles.
• High extensibility and interactivity: Supports interactive functions (such as click, highlight, zoom, etc.), enhancing dynamic interaction between graphics and users. Suitable for rectangular visualization needs in different fields, such as grid charts (heatmap), data density distribution charts, etc.
• Seamless integration with G2 ecosystem: As part of the G2 Mark system, rect can be freely combined with other components (such as line, point, etc.) to meet complex data visualization requirements.

Getting Started

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/athletes.json',
  },
  encode: { x: 'weight', y: 'height', color: 'sex' },
  transform: [{ type: 'bin', opacity: 'count' }],
  style: { inset: 0.5 },
});

chart.render(); // Render chart

For more examples, please visit the Chart Examples page.

Configuration

encode

Configure visual channels for rect mark, an important configuration that defines the mapping relationship between data fields and visual properties, determining how data is transformed into visual representation.

color

The color visual channel affects the fill color of rect graphic marks (when applying certain hollow shapes, such as hollow, it will change the stroke color of the graphic). When applied to point charts, it generally maps categorical fields and groups the data.

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

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

chart.options({
  type: 'rect',
  data: [
    { x: 1, y: 1, type: 'type1' },
    { x: 1, y: 2, type: 'type2' },
    { x: 2, y: 1, type: 'type3' },
    { x: 2, y: 2, type: 'type1' },
  ],
  transform: [{ type: 'bin' }],
  encode: { shape: 'rect', x: 'x', y: 'y', color: 'type' },
  style: { inset: 0.5 },
});

chart.render(); // Render chart

shape

Through the shape property of encode, you can specify the geometric shape of cells. Shape determines what shape each cell is rendered as on the canvas. The supported shapes for shape mark are as follows:

import * as G2 from '@antv/g2';

const { Chart } = G2;
const chart = new Chart({
  container: 'container',
});
const container = chart.getContainer();
const shapeMap = [
  {
    shape: 'rect',
    label: 'Rectangle',
  },
  {
    shape: 'hollow',
    label: 'Hollow Rectangle',
  },
];

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/athletes.json',
  },
  encode: { shape: 'rect', x: 'weight', y: 'height', color: 'sex' },
  transform: [{ type: 'bin', opacity: 'count' }],
  style: { inset: 0.5 },
});

const handleSetShape = (shape) => {
  // Set the selected coordinate system
  chart.options({
    encode: { shape },
  });
  chart.render(); // Re-render chart
};

// Insert Encode-Color selector
const selectorContainer = document.createElement('div');
selectorContainer.textContent = 'Select Shape ';
const selector = document.createElement('select');
selector.innerHTML = shapeMap.map(
  (shape, index) =>
    `<option value="${shape.shape}" ${index === 0 ? 'selected' : ''}>${
      shape.label
    }</option>`,
);
selector.onchange = (e) => {
  handleSetShape(e.target.value);
};
selectorContainer.appendChild(selector);
container.insertBefore(selectorContainer, container.childNodes[0]);

chart.render();

For more encode configurations, please check the encode introduction page.

transform

transform is a core configuration item for data transformation, allowing preprocessing of raw data before it’s bound to graphic marks. By processing data, it generates structured data more suitable for visualization, thus more clearly expressing data distribution, density, or statistical characteristics.

Common transformation types include:

• bin: Bin continuous data to generate histogram rectangles
• stackY: Stack rectangles vertically, automatically calculating stacked height for each category

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/athletes.json',
  },
  encode: { x: 'weight', color: 'sex' },
  transform: [
    { type: 'binX', y: 'count' },
    { type: 'stackY', orderBy: 'series' },
  ],
});

chart.render();

For more transform configurations, please check the transform introduction page.

style

style is used to set the appearance styles of chart elements, including fill color, border style, shadow effects, etc.

Try it out

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

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/athletes.json',
  },
  encode: { x: 'weight', color: 'sex' },
  transform: [
    { type: 'binX', y: 'count' },
    { type: 'stackY', orderBy: 'series' },
  ],
  style: { inset: 0.5 },
});

chart.render();

For more style configurations, please check the style introduction page.