Chart body sometimes is not displayed correctly

[ghost]

Hi Masayuki,

I found unusual bug which I'll try to describe in details.

This bug occurs on bar,area charts when you load chart with "bindto" property, and it looks like pie charts are not affected by this issue.

Take a look at the screen

Sometimes, some of the charts are just not displayed, and not only area charts but also bar charts inside normal divs ( not scrollable one ). Chart appears correctly if you resize window or refresh. It looks like this issue occurs randomly.

What is interesting this issue do not appear when you load chart via $(#idelement).append(chart.element) API.

example chart:

c3.generate({
size: {
height: 130,
},
data: {
x: 'x',
json: {
x:['2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
data: [25000, 18000, 19500, 20250, 22000, 30000, 24500, 22000, 24500, 25000, 21500, 19000]
},
names: {
data: "bounty"
},
types: {
data: 'area'
},
colors: {
data: '#6a8da7'
}
},
tooltip: {
show: true
},
grid: {
y: {
lines: [
{value: 60}
]
}
},
axis: {
y: {
show: false,
tick: {
format: function (d) {
return d + " " + "kWh"
}
}
},
x: {
show: false,
type: 'timeseries',
tick: {
format: '%b'
}
}
},
legend: {
show: false
}
});

Could you take a look into this issue?

Thank you,
matuszewski

[masayuki0812]

Hi, Thank you for reporting. I think this has been fixed by the commit above. Could you try this fix? Thank you.

[ghost]

I confirm, this issue is fixed and no longer occurs :). FYI when you load chart via bindto there is no transition ( fade in ) but when you load it via $("#id").append(chart.elemen) it is available, but probably this is minor issue.

Thank you very much for quick fix again :)

[masayuki0812]

Thank you for confirming. I think you're right. Transition seems not working on some condition. I'll work on this as another issue. Thank you.

[michaelfeihstel]

I still experience this issue - in my case it seems to be related to the tabs component in Zurb's Foundation framework. As soon as I put a chart in any other but the first tab, it seems as if the chart gets its width wrong - left and right there are parts cut off. Resizing the window will fit in the chart correctly and immediately.

I don't experience this behaviour when the chart is in the first tab (visible after page load) or not in a tab at all. Sounds like a conflict with Foundation, right?

This is a very abstract description, but could it be that c3 expects something on load that foundation only provides once a tab is activated? I'm not a JavaScript expert by any means.

[michaelfeihstel]

Ok, after further investigation I got a different result with the help of a function Foundation provides for tabs:

$('#myTab').on('toggled', function (event, tab) {
    $("#myChart").append(chart.element);
});

Now the size of the chart is fine, but the area chart suddenly turned into a line chart, meaning the shape has no fill. Other chart types seem to be fine though. Is this a problem you're aware of? Should a separate issue be opened?

[masayuki0812]

Hi, Sorry for late response. The solution to use chart.element would be right because other similar issues has been solved by this.
However, the issue about filling would be a new issue as you said, so please open a new issue. Thanks!