Large dataset performance tips

[nickbabcock]

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:

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

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

const numCountries = 320;
const config = {
  title: {
    visible: false,
    text: "<this should be hidden>",
  },
  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!

[hustcc]

At present, data processing and rendering are all in the main thread, so the UI thread is blocked. Draw a lot of data in the chart, in theory, the shape is too small to see clearly.

Can I see your visual effects?

[nickbabcock]

Since the graph's height is dependent on the number of entries, the individual points don't turn out too small. Here is a partial screenshot of a subset of the data (still takes about a second to render)

EDIT: let me know if I misunderstood your request for visual effects