Reference line incorrect due to not having original data

[msonnabaum]

While trying to use the "custom" option in SparklinesReferenceLine, I noticed that the line would never show up. However, using a static value of anything below 25 did seem to work.

It appears to be due to the fact that the only data that SparklinesReferenceLine has is points, which is already scaled here: https://github.com/borisyankov/react-sparklines/blob/master/src/Sparklines.js#L45

This bug isn't just limited to custom values however. Using types like "max" and "min" will produce the opposite of the desired result since they are working on svg coordinates, not the data.

To help illustrate what's needed to fix the bug, here's the workaround I used for a custom reference value:

    var min = Math.min.apply(Math, this.props.data);
    var max = Math.max.apply(Math, this.props.data);
    var width = 120;
    var height = 30;
    var margin = 2;
    var limit = null;

    var points = DataProcessor.dataToPoints([max], limit, width, height, margin, max, min);
    var point = points[0];
    return (
      <Sparklines data={this.props.data}>
        <SparklinesLine />
        <SparklinesReferenceLine type="custom" value={point.y} />
      </Sparklines>
    );

It seems necessary for Sparklines to start passing down data to its children.

[mingfang]

+1 I just hit this bug also. Here is a VERY ugly hack that I used to put a line on a 80% mark when displaying disk usage.

<SparklinesReferenceLine type={'custom'} value={DataProcessor.dataToPoints([80], null, 120, 50, 2, 100, 0)[0].y}/>

[MattVoda]

Could somebody provide guidance on using ReferenceLine after the refactoring of the DataProcessing functions? Specifically trying to use a custom value for my Reference Line.