C3: Spline chart drawing incorrectly

Created on 15 Nov 2016  ·  3Comments  ·  Source: c3js/c3

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:
image

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/

2018-03-25 15 56 34

All 3 comments

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.

See: https://jsfiddle.net/mkw4h54r/10/

2018-03-25 15 56 34

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ivarkallejarv picture ivarkallejarv  ·  3Comments

unlight picture unlight  ·  3Comments

udhaya2kmrv picture udhaya2kmrv  ·  3Comments

mwho picture mwho  ·  3Comments

snkashis picture snkashis  ·  4Comments