I am having sporadic issues with spline chart series. The series are drawing incorrectly. When I have two dates one after another, sometimes the line will loop over itself or the line will shoot past the next data point and then curve back instead of just curving directly to the next point. I think the drawing logic is incorrect. If I change the chart to be a "line" series instead it shows correctly.
You can see my issue if you copy the chart code into your example page. (http://c3js.org/samples/chart_spline.html)
Chart code example:
var chart = c3.generate({
data: {
x: 'date',
columns: [
['date',744336000000,752112000000,876096000000,882057600000,884304000000,888969600000,893203200000,897350400000,902361600000,908236800000],
['values',12.15,11.7,11.75,11.86,11.97,12.05,11.27,12.2,12.34,12.27]
],
type: 'spline'
}
});
Screenshot:
Issue #1501 is similar to this issue.
due to some bugs in d3: https://github.com/d3/d3/issues/2348
fixed in d3 v4.0 (the interpolators were rewritten, including the addition of a sweet Catmull-Rom spline), but there's no telling when c3 will catch up (https://github.com/c3js/c3/issues/1648)
With version 0.5.1 of c3.js, spline: { interpolation: { type: 'monotone' } }
option resolves this issue.
Most helpful comment
With version 0.5.1 of c3.js,
spline: { interpolation: { type: 'monotone' } }
option resolves this issue.See: https://jsfiddle.net/mkw4h54r/10/