Skip to content

Reference line incorrect due to not having original data #30

@msonnabaum

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions