passing in custom value to reference line is not working as expected

[austinyearlykim]

I have a linear data set going from [1, ...6]. Passing in 1 as a value to the SparklinesReferenceLine I would expect the reference line to be at the bottom of my screenshot below, but no matter what value I pass in, it seems to want to just stay around the 4,5,6 range.

const data = [1,2,3,4,5,6];
export default (props) => {
    return (
                <Sparklines data={data}>
                    <SparklinesLine />
                    <SparklinesReferenceLine type='custom' value={1} />
                </Sparklines>
    );
}

[andeemarks]

I'm seeing similar problems with this. From inspecting the generated <line...> code, it looks like the "value" for a custom SparklinesReferenceLine is being interpreted relative to the pixel dimensions of the containing svg (from top-left corner) rather than relative to the data being passed in via the data attribute

[Gajesh-LH]

+1

[ironwren]

I just ran into this today. Please Fix!

[joakimbengtson]

+1

[xadamxk]

Ran into the issue today. It seems the reference line defaults to max even when you specify a custom value.

[junhyuk-prestolabs]

Hi, this my team's work arounds.

extracted from original react-sparklines code.

import React, { memo } from 'react'
import {
  Sparklines,
  SparklinesLine,
  SparklinesReferenceLine,
  SparklinesProps,
  SparklinesLineProps
} from 'react-sparklines'

import { useMemo } from '@src/hooks'

const arrayMin = (data: number[]): number => Math.min.apply(Math, data)
const arrayMax = (data: number[]): number => Math.max.apply(Math, data)

interface FancySparklinesProps extends SparklinesProps {
  data: number[]
  referenceValue?: number
  lineStyle?: SparklinesLineProps
}

interface CalcRefValueProps {
  data: number[]
  height: number
  margin: number
  referenceValue?: number
}

const calcRefValue = ({ data, height, margin, referenceValue }: CalcRefValueProps) => {
  if (referenceValue === undefined) return
  const max = arrayMax(data)
  const min = arrayMin(data)
  const vfactor = (height - margin * 2) / (max - min || 2)

  return (max === min ? 1 : max - referenceValue) * vfactor + margin
}

const FancySparklines = (props: FancySparklinesProps): JSX.Element => {
  const { data, height = 1, margin = 0, referenceValue, lineStyle } = props

  const refValue = useMemo(() => {
    return calcRefValue({ data, height, margin, referenceValue })
  }, [data, height, margin, referenceValue])

  return (
    <Sparklines {...props}>
      <SparklinesLine {...lineStyle} />
      {referenceValue !== undefined && <SparklinesReferenceLine type="custom" value={refValue} />}
    </Sparklines>
  )
}

export default memo(FancySparklines)

the problem is 0 is just 0, not a SVG position.