I'm experiencing the same thing since I updated to 0.4.9.

Currently thinking about doing a chart.resize(); when the page finishes loading to force.

I think I found a way to reproduce the blank data error 100% of the time.
My current script versions

• d3 Version 3.5.3
• c3 Version 0.4.9

Reproduce Steps

• Load the page in browser tab that you are not currently viewing. (load and navigate away)
• After the page loads in the background, navigate to it.

Observe

• You'll see a blank chart like these below

Expect
If the graph is loaded properly it should look like this

Hope this helps track down the issue, not really sure why SVG isn't rendering...

Same here! I think it broke in 0.4.8 cuz I am working with 0.4.7 and everything is fine. Both 0.4.8 and 0.4.9 fail.

Same here

Yes, I'm able to replicate this on http://c3js.org/gettingstarted.html as well.

I am having the same problem, but I reverted to 0.4.7 and still see the problem. I've noted that if you click the legend label for the missing series to "hide" it and then click again to "show" it, it displays correctly.

There seems to be some kind of race condition going on. I've been able to trick the charts into working by performing the "generate" operation with a dummy empty series followed with a slightly-delayed "load" operation that also unloads the dummy empty series. Kludgy and very undesirable...

More simply, I was able to force the missing series to display by simply re-loading the original data like this:

    var chart = c3.generate({
        bindto: '#example',
        data: {
            type: 'bar',
            x: 'x',
            columns: data
        }
    });
    setTimeout(function () { chart.load({columns: data}); }, 500);

Yes, very ugly...

I'm experiencing this issue as well :(

• For me, this happens about 25% of the time for me during "normal" use of the web page
• I can reproduce the issue 100% of the time with @alexphelps' method above (#72834795)
• I can also confirm that loading data (loading new data or reloading original) will force the missing series to display (#73102905)
• I can also confirm that clicking a legend will cause the missing series to display (#73097750)

The above has been observed on:

1. http://c3js.org/samples/chart_bar.html at the time of writing
2. a local development environment using c3 v0.4.9 and d3 v3.5.0

FWIW, during two solid months of development I have never experienced this issue on a local environment using c3 v0.4.8 and d3 v3.4.13

Same here. If i resize the page the data will also show up.

My current work around that is working quite well is using .resize() for each chart right after the settings to refresh it which gets the data to show every time.

Wanted to add that I am seeing the same issue on the 0.4.x versions. We ended up moving back to 0.3.0 which solved the problem for us. We seem to see this more frequently on Windows based machines. I was not able to reproduce on Chrome for Mac, strangely. It happens sporadically. Probably about 25% of the time.

I see this on the gettingStarted page too. #1027 seems related. @ergo, @masayuki0812 - could you comment? The library doesn't seem usable whilst this problem is in place. Chrome 40.0.2214.115 m on Windows 7 64 bit for me.

Hey everyone —

Could you please try version 4.10-rc1? My PR at #938 is in that version, and should at least fix the "charts loaded in inactive tabs don't render fully" issue.

Similarly, if the issue is not so much that it's rendering in an inactive tab, could you please try setting transition.duration to null and reporting back? Thanks!

As a temp fix, instead of .resize() I'm using .flush() to force charts to redraw.

I switched to 4.10-rc2 and set transition.duration to null, and it seems to have resolved the problem (at least, I haven't seen it since).

It seems related to transition, so I modified to render without transition on init and it's been solved at the moment.
9476cfe

And I released 0.4.10-rc4, which includes this fix, so can you try this version and confirm it's fixed?
https://github.com/masayuki0812/c3/releases/tag/0.4.10-rc4

Thanks @masayuki0812.. superb work!! I will check if everything is fine in my project now with 0.4.10-rc4.

@raulgomis Thanks! Btw, 0.4.10-rc4 includes several bug fixes actually, so I expect it should work well in other part as well.

0.4.10 has been released, so let me close at the moment. Thanks!

Hi @masayuki0812 i am still experiencing this issue under 0.4.10, have to set transition.duration to be null.

my case is kind of different, cause i am using AngularJS (embed c3 chart into one directive), and creating multiple c3 charts at the same time with multiple ajax calls. Some charts are rendered correctly but others are not.

My directive accepts either a promise object or an array as the data, and have a watch (observing the changes of data) to refresh the chart. When i pass a promise object to this directive, the charts work fine, no rendering issues, but when i retrieve data from the promise object and pass the data (which is an array of objects) to the directive (as a model), some charts just stop rendering correctly (but the data is correctly binding with the charts). If you try to resize the viewport of the page, it appears the charts become normal.

@hitigon I've experienced that a bit with Angular in Axis. You need to make sure the parent container has height before generate is called, otherwise it gets into a race condition between the browser rendering the parent container and C3 trying to get the dimensions of the parent container.

@Aendrew make sense, thanks!

Also experiencing the same issue with 0.4.10. Was is resolved? The bar chart does not load.

Experiencing the same issue with 0.4.10

My setup is similar to @hitigon using inside an angular directive

I also experiencing the issue with 0.4.10. and also using it with Angular JS. After a short test it seems that switching back to 0.4.7 solves the problem.

It turned out my problem was some dependency of jquery that was getting accidentally bundled

I am still facing this issue.

Resizing, redraw() or flush didn't work!

Getting the same thing... I've tried updating to the correct version of d3, and updating my c3 as well, but so far, i'm getting nothing.

Still facing this issue. I am using c3 v0.4.11 and d3 v3.5.17 but still facing this issue. It works perfectly well in other browsers and devices but in iOS the chart data simple don't render. I tried using redraw() and flush().

I've had this problem and managed to track it down.

I was using http://www.datejs.com/ as a plugin on my site, which is a historical thing. I finally tracked down that it overwrites the Date.now() native method with its own outdated one. This for some reason made the chart data not render. Removing datejs solved the issue.

For anyone still having this issue whilst using a webview, using the latest version,
chart.resize()
chart.flush()
resolved the issue for me but only when calling it after flowing the data to the chart, i.e. generate your chart with no data, then load your data using the oninit listener, and finally call the above code, this "should" resolve this. For me this issue was only present in android webview and not iOS or desktop view (though I was able to reproduce it using the switching to a new tab trick above)

Hope this helps anyone still needing this

the same issue, i use c3 v0.4.14 and d3 v3.5.17.

i was tried with resize and flush but chart is stil blank.
chart.resize()
chart.flush()

Also seeing this issue on a chart heavy angularJS page using chart.load() to swap in new data using c3@0.4.14 and d3@3.5.17

Both flush() and resize() as mentioned above do not work in my case.

Setting transition.duration = 0 does work. As does setting a large timeout (eg 5 seconds).

I guess this issue should not be closed, I face it too.

Hi @ashconnell setting a large timeout does not work for me, did you set it for flush, resize, or load ?

Thank you

same here, having the issue only on Android, Web and iOS work fine

I just realized that I loaded c3.js locally, whereas d3.js was loaded from a CDN.
After loading d3.js locally as well, the chart was properly generated on my Android build.

I was having the same issue on Chrome for Android. @Mobiletainment solution worked for me! (d3.js was being loaded from CDN, now it's being loaded locally together with c3.js).

This is occurring with Safari Version 11.1.2 (13605.3.8), C3 v0.6.6 and D3 v5.5.0 on new tab creation.

I'm loading c3 and d3 locally, but I'm still experiencing the same issue as described by alexphelps at the top of this thread.

It's consistent behavior in both Safari 12.0 and Chrome 68 on macOS High Sierra.

I can confirm that the following fixes do not work:

• loading c3 and/or d3 locally
• calling chart.resize()
• calling chart.flush()

The loading data issue is still occurring for the latest version of c3 when opening new tabs.
C3 (v0.06.12) and d3 (v5.4.0) are loaded locally.
It occurs semi regularly on firefox 66, and chrome 72. Calling chart.resize, chart.flush, or chart.load do not fix it.
Opening the console, resizing the window will cause the chart to populate but that seems to be the only way after the page has loaded.

@mmerbes Do you see any error mesaage in console in that case?

Yes
IndexSizeError: Index or size is negative or greater than the allowed amount

isWithinBar https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:8998 findClosest https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:7054 forEach self-hosted:262 findClosest https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:7051 candidates https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:7038 map self-hosted:286 findClosestFromTargets https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:7037 redrawEventRect https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js:8078 et https://dev223-1.g2planet.com/~merbes/code/servicenow/snk19/php/stylelib/js/d3-v5.4.0.min.js?1539986245:2
I can't it a cloudflair so there would be line numbers.

Thanks!

same issue here also
versions: c3 0.6.2 on chrome browser Version 72

I had the same issue, working with c3 0.6.13 and Angular 6.

I saw that the chart method rendered was not called after the load is finished. The only solution I found was to check in the done method of chart.load if the rendered method had been called at least once. If it is not the case, I destroy the chart and re-initialize it.

I had the same issue, working with c3 0.6.6 and AngularJS.

None of the suggested fixes worked, what worked for me was simply removing the tab visibility check. Line 1649 if ($$.isTabVisible()) {

The tweak proposed by @gmalik-onalytica worked for me. Wow! Thank you!

@masayuki0812 or @kt3k , is there any reason not to remove the tab visibility check as suggested?
(Thank you in advance for your response!)

Still occouring for me.

D3 Version: v5.15.1
C3 Version: v0.7.15
Everything loaded locally.

chart.resize() & chart.flush() don't work for me