You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When data labels are enabled, chart generation in data-dense charts takes a particularly long time. This is because the label-creation code calls getBoundingClientRect on each point created to ascertain the width/height (depending on chart type). Calling this function in the way it is done causes the browser to perform a synchronous reflow of the entire page - performing it over many points repeatedly does this for each point, which is a huge performance bottleneck called layout thrashing.
Observe that redrawText takes an inordinate amount of time as a result of the layout thrashing.
The screenshot below captures the performance profile for this function. Observe the red flags all noted below redrawText - this is the profiler noting all the reflows occurring as a result of the call to getBoundingClientRect.
Description
When data labels are enabled, chart generation in data-dense charts takes a particularly long time. This is because the label-creation code calls
getBoundingClientRect
on each point created to ascertain the width/height (depending on chart type). Calling this function in the way it is done causes the browser to perform a synchronous reflow of the entire page - performing it over many points repeatedly does this for each point, which is a huge performance bottleneck called layout thrashing.Steps to check or reproduce
data.labels
redrawText
takes an inordinate amount of time as a result of the layout thrashing.The screenshot below captures the performance profile for this function. Observe the red flags all noted below
redrawText
- this is the profiler noting all the reflows occurring as a result of the call togetBoundingClientRect
.Related to #757
The text was updated successfully, but these errors were encountered: