inline

Overview

G2 has two types of data sources: one is inline, which directly passes in specific data and is the default data source type in G2; the other data source type is fetch, which fetches data from remote interfaces.

Usage

Explicitly specify type as inline, the complete syntax is as follows:

chart.options({
  type: 'view',
  data: {
    type: 'inline',
    value: [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ],
  },
});

When the data is an array and no data transforms are needed, use this shorthand:

chart.options({
  type: 'view',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
});

Getting Started

Here is an example:

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

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

chart.options({
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: {
    x: 'genre',
    y: 'sold',
  },
});

chart.render();

Configuration

This data source is relatively simple, equivalent to the passed-in data being directly used as the data source for transform processing, and then going through the rendering logic.

Replacing remote data with local data

An object assigned to data is read as connector configuration. After loading a fetch result into a local variable, use { type: 'inline', value: localData }. Do not assign a tree root or { nodes, links } directly to data. The shorthand above applies to arrays without transforms.

const graphData = {
  nodes: [{ id: 'A' }, { id: 'B' }],
  links: [{ source: 'A', target: 'B' }],
};

chart.options({
  type: 'forceGraph',
  data: { type: 'inline', value: graphData },
  encode: { nodeColor: 'id' },
});

inline passes data through; it does not convert an object into a table. The value must still match the target mark’s structure, such as nodes and links for a graph or a tree for a hierarchy. When replacing fetch, retain any data.transform steps that still apply and check field names and nesting.

For ordinary marks, data does not accept an arbitrary (previousData) => nextData function. Compute an array first or use a custom transform in data.transform. See data configuration levels for view inheritance.