AntV G2

How to use AntV G2

AntV G2 is a powerful tool for creating data-driven visualizations for statistical charts. Here are some steps on how to use it:

1. First, you need to install the G2 library in your project through npm or yarn.

   npm install @antv/g2

2. After installing the library, you can import it into your project and create a chart instance.

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

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

Here, we have created a basic chart instance that sets the container to render the chart, along with its width and height.

1. Next, you need to specify the data to be rendered in the chart. You can pass data to the
   chart
   instance using the
   source()
   method.

chart.source(data);

Here,

is the variable name that stores your data in JSON format.

1. Once you have specified the data, you can start to create your chart by adding geometries such as lines, bars, and points.

chart.line().position('year*sales');

This code creates a line chart with the x-axis representing the "year" attribute of the data, and the y-axis representing the "sales" attribute of the data.

1. Additionally, you can customize your chart by setting various properties such as axis labels, titles, and legends.

chart.axis('year', {
  label: {
    formatter: (val) => `${val}`,
  },
}).tooltip({
  crosshairs: 'y',
  shared: true,
});

Here, we are formatting the year axis label to display just the number value rather than the full date string. We are also enabling a tooltip that displays additional information when hovering over data points.

1. Finally, you can render the chart by calling the
   render()
   method on the
   chart
   instance.

chart.render();

This code will display the chart in the container specified earlier.

Using the steps above, you can quickly start creating a wide range of interactive charts and graphs with AntV G2.