C3: Prevent path going below axis minimum with spline/area-spline type

[alanhamlett]

1. What version of C3?
   0.4.10
2. What browsers have you confirmed it in?
   All browsers.
3. Can you isolate the issue by providing a jsFiddle demonstrating it in a minimalist capacity?
   https://jsfiddle.net/alanhamlett/qvgf8omq/

Notice how the line goes below the chart's y-min. There should be an option to prevent this.

var chart = c3.generate({
  data: {
    type: 'spline',
    columns: [
      ['data1', 0, 0, 200],
      ['data2', 0, 0, 0]
    ],
    axis: {
      y: {
        min: 0
      }
    }
  }
});

[braznaavtrav]

It's a bit of a hack, since this doesn't seem to be configurable on an invidiual chart basis, but you can override c3.chart.internal.fn.getInterpolate before initializing your chart to another interpolation method.

c3.chart.internal.fn.getInterpolate = () => 'monotone';

https://jsfiddle.net/qvgf8omq/3/

Edit: Even that doesn't work in all cases https://jsfiddle.net/qvgf8omq/4/ . It seems to be a limitation of d3's built-in interpolation methods, I'm sure there is a way to write your own interpolation method, but I don't know d3 well enough to know how to do that.

[panthony]

I just hit the same issue, I'm curious if anyone has a solution since setting to 'monotone' does not seems to do the trick.

[aendrew]

Nice workaround @braznaavtrav!

Anyone interested in custom interpolators in D3 — http://bl.ocks.org/mbostock/3310323
Also: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate

I don't have time to figure it out myself, but I think you'd just write it so that it loops through the points and ensures the floor is 0?

As interesting as this issue is, I think this is more of a support question than feature request or bug; mind taking this to either the Google Group or Gitter instead? Thanks! 😄

[alanhamlett]

This is not fixed, please re-open it. Anything that requires a code change should be talked about here not in Groups.

[alanhamlett]

Please reopen this issue. It is not yet fixed.

[aendrew]

@alanhamlett Yeah, I don't disagree with you; similar issue also evident in #1817. Reopening, though it's pretty difficult to solve — spline interpolation is intended to give points curvature, which can result in behaviours like the ones in this and the other issue. Definitely open to suggestions.

[alanhamlett]

@aendrew thank you, hopefully during the holidays I'll have time to submit a PR for this.

[panthony]

In latest version of c3js you can pass:

{
   spline: {
     interpolation: {
        type: 'monotone'
     }
   }
}

Default values is cardinal, the possible values are:

            'linear': d3.curveLinear,
            'linear-closed': d3.curveLinearClosed,
            'basis': d3.curveBasis,
            'basis-open': d3.curveBasisOpen,
            'basis-closed': d3.curveBasisClosed,
            'bundle': d3.curveBundle,
            'cardinal': d3.curveCardinal,
            'cardinal-open': d3.curveCardinalOpen,
            'cardinal-closed': d3.curveCardinalClosed,
            'monotone': d3.curveMonotoneX,
            'step': d3.curveStep,
            'step-before': d3.curveStepBefore,
            'step-after': d3.curveStepAfter

I'm aware that this option is not yet documented :/