c3js / c3js/c3

The timing of onresized() is triggered when browser resizing will ingores changes that isn't written in c3.js

Open
#1,884 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

Hello,

I've been using C3.js for a while and it works like a charm, huge thanks for all the contributors.

However, I'm currently working on a chart that requires responsive x-tick rotation. Which means, in order to show every x-tick without breaking into multiple lines, the x-tick will have to rotate in certain degree based on the size of each x-tick and the space that is given.

Therefore, I've decided to use D3.js to both calculate the angle and rotate the x-tick in onresized() callback function. But I've noticed that when the "auto-resize" mode is on, $$.api.flush() will always runs 100ms AFTER oneresize()/oneresized() which will erase all those manipulations that I wrote in oneresized().

So, I've currently adding a config.onRedrawn.call($$) within $$.resizeTimeout just AFTER the $$.api.flush();

```
if (config.resize_auto) {
$$.resizeFunction.add(function () {
if ($$.resizeTimeout !== undefined) {
window.clearTimeout($$.resizeTimeout);
}
$$.resizeTimeout = window.setTimeout(function () {
delete $$.resizeTimeout;
$$.api.flush();
config.onRedrawn.call($$);
}, 100);
});
}
```
then I can use `onRedraw: function(){...}` to manipulate SVG after browser being resized.

am I getting this right?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.