c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.33k stars 1.39k forks source link

There is probably a better performing way for point show false #2853

Open efeskucuk opened 2 years ago

efeskucuk commented 2 years ago

C3 version: 0.5.4 D3 version: 4.13.0 Browser: Chromium (Not sure about version) OS: Windows

My versions are outdated but I went through the source code of the project I believe my statement is still true. When a chart is generated like so,


var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
    point: {
        show: false
    }
});

Library adds this to all circle elements in html,

element {
    opacity: 0;
}

When there are a lot of circles (We use this library to generate PDF files and on our charts it can go up to 86.400 points), RAM usage of the browser at least triples and our PDF generations fail after that so I don't know how worse it can go. What I did to get around this was add

display: none;

to the parent element of the circles which in my case was,

<g class="c3-shapes c3-shapes-Intensity c3-circles c3-circles-Intensity" style="cursor: pointer;">

I am not familiar with the entire codebase so I'm not sure if my solution would bring more problems, do you think this method could be better than the one library currently applies?