Performance: Render millions of vectors using Graphics

[raksha1991]

I am creating millions of vectors using Graphics. Can someone tell me how can I increase the performance?
It becomes slow as the data size increases. I cannot use sprites as the vectors need to be created inside loop based on the coordinates. Is there any better way to create them?

const app = new Application({ antialias: true, transparent: true, width: width, height: height, forceCanvas: true });
const graphics = new Graphics();
app.stage.addChild(graphics);
for(var i=0; i<1000000; i++){
   graphics.lineStyle(0.5, utils.string2hex(dataset[i].Color), 1);
    const { x1, y1, x2, y2 } = getCoordinatesForVector(dataset[i]);
    graphics.moveTo(x1, y1);
    graphics.lineTo(x2, y2);
}

[eXponenta]

@raksha1991
You shouldn't use Graphics, use mesh in line drawing mode.
Vertices Buffer [ax, ay, bx, by .... aNx, aNy, bNx, bNy] can be rendered as lines without super overhead of graphic.
Color can be stored as colorBuffer of mesh aswel

[eXponenta]

Example:
https://www.pixiplayground.com/#/edit/wUAri_e9qW6cM9olqeSm7

[raksha1991]

Thanks a lot, it works like a charm :)

[raksha1991]

@eXponenta - Any idea how can I attach click event to every line? If I attach event to mesh the whole area becomes clickable. I could not find interactive method for Geometry.

mesh.interactive = true;
    mesh.buttonMode = true;
    mesh.hitArea = mesh.getLocalBounds();
    mesh.on("mousedown", function(e) {
        console.log(e);
    });

[nebsar]

Did you find a way?