---
title: "Column Data Format"
language: "en"
canonical: "https://g2.antv.antgroup.com/en/examples/analysis/process/column-data-format/"
version: "5.4.8"
---

# Column Data Format

[Live example](https://g2.antv.antgroup.com/en/examples/analysis/process/column-data-format/)

[Resource index](/llms.txt)

Provide a DOM element with `id="container"`. The original example source follows.

## Source

```ts
/**
 * The column-major data format example.
 * Instead of passing row-major data (array of objects),
 * you can now pass column-major data (object with arrays).
 */

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

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

// Column-major data format
const columnData = {
  'Sepal.Length': [5.1, 4.9, 4.7, 4.6, 5, 5.4],
  'Sepal.Width': [3.5, 3, 3.2, 3.1, 3.6, 3.9],
  'Petal.Length': [1.4, 1.4, 1.3, 1.5, 1.4, 1.7],
  'Petal.Width': [0.2, 0.2, 0.2, 0.2, 0.2, 0.4],
  Species: ['setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa'],
};

chart.options({
  type: 'point',
  data: {
    type: 'column',
    value: columnData,
  },
  encode: { x: 'Sepal.Length', y: 'Sepal.Width', color: 'Species' },
});

chart.render();
```