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

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
      }
    }
  }
});

[tramck]

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]

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 😕