antvis / antvis/G2Plot

Large dataset performance tips

Open
#1,264 2 comments 0 reactions 0 assignees View on GitHub
Performance
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

G2plot takes a couple seconds to render a dataset I'm working with. The resulting visualization looks great, but I'm curious what the recommendation is to eke out additional performance from g2 / g2plot. The data looks like:

```js
const data = [{
country: "Bohemia",
class: "Tariffs",
value: 2.500
}, {
country: "Bohemia",
class: "Trade",
value: 3.001
}]

// etc
```

In my dataset there are 20 instances of income classes over 320 countries for a total of 6,400 data points.

I'm displaying the data in barchart with following config

```js
const colors = new Map([
["Trade", "#3688AD"],
["Tariffs", "#8BC395"],
// etc
]);

const numCountries = 320;
const config = {
title: {
visible: false,
text: "",
},
data,
height: 24 * numCountries,
width: 1000,
xField: "value",
yField: "country",
stackField: "class",
color: (v) => colors.get(v) || "#000",
label: {
visible: true,
formatter: (v) => v.toFixed(2),
},
};
```

While rendering the chart, the browser will become unresponsive for a couple seconds while the chart is rendered.

So if I'm interested in decreasing the latency it takes to render the chart, what is the best way to go about it? Do I disable animations, ledger interactivity (and if so, how?), or another configurable knob? Or if nothing else, is there a way to not block the UI thread so the browser remains responsive? Thanks!

Contributor guide

Open the contributing guide

Research direction

No source file or test is named. Start by reproducing the 6,400-point stacked bar chart with the shown G2Plot configuration, then review the available rendering, animation, and interaction controls. Done means identifying and documenting a concrete way to reduce render latency while keeping the browser responsive.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, performance
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.