---
title: "G2's complete configuration system"
description: "Explore G2 initialization and Spec configuration, including data, encodings, scales, coordinates, styles, interactions, and composed views."
language: "en"
canonical: "https://g2.antv.antgroup.com/en/manual/core/configuration/"
version: "5.4.8"
---

[Resource index](/llms.txt)

This document provides a comprehensive overview of G2's complete configuration system, covering all available configuration options and their hierarchical relationships.

## Chart Initialization Configuration

When creating a chart instance, you can pass the following configuration options through `new Chart(params)`:

| Option        | Type                                                     | Default  | Description                                                          |
| ------------- | -------------------------------------------------------- | -------- | -------------------------------------------------------------------- |
| **container** | `string \| HTMLElement`                                  | -        | Specify the DOM for chart rendering, can pass DOM id or DOM instance |
| **autoFit**   | `boolean`                                                | `false`  | Whether the chart auto-fits the container size                       |
| **clip**      | `boolean`                                                | `false`  | Whether to hide graphics outside the drawing area                    |
| **width**     | `number`                                                 | `640`    | Chart width                                                          |
| **height**    | `number`                                                 | `480`    | Chart height                                                         |
| **depth**     | `number`                                                 | `0`      | Chart depth, used in 3D charts                                       |
| **padding**   | `'auto' \| number`                                       | `'auto'` | Chart padding, usage similar to CSS box model                        |
| **margin**    | `number`                                                 | `16`     | Chart margin, usage similar to CSS box model                         |
| **inset**     | `number`                                                 | `0`      | Chart breathing space width                                          |
| **renderer**  | `Canvas \| SVG \| WebGL`                                 | `Canvas` | Specify rendering engine                                             |
| **theme**     | `'classic' \| 'classicDark' \| 'academy' \| customTheme` | -        | Configure chart theme                                                |
| **plugins**   | `any[]`                                                  | -        | Specify plugins used during rendering                                |

**Example:**

```javascript
const chart = new Chart({
  container: 'container', // DOM container
  autoFit: true, // Auto-fit container size
  clip: true, // Clip overflow area
  padding: 20, // Inner padding
  margin: 16, // Outer margin
  theme: 'classicDark', // Dark theme
  plugins: [new Plugin()], // Plugins
});
```

## Chart Configuration

After creating a chart instance, configure it with `chart.options(spec)`:

```javascript
chart.options({
  type: 'interval',
  data: data,
  encode: { x: 'field1', y: 'field2' },
  scale: { x: { type: 'band' } },
  axis: { x: { title: 'X Axis Title' } },
});
```

The following is the complete chart configuration hierarchy:

[Interactive content](<https://g2.antv.antgroup.com/en/manual/core/configuration/>)