@nivo/line gridYValues prop usage

[krau5]

Hey there :)

Description
I'm trying to use @nivo/line. The svg variant, to be precise.
I want to make custom gridYValues but it doesn't actually work.

Code

<Line
  data={data}
  gridYValues={[2000, 4000, 6000, 8000]}
/>

Question & additional description
data y values are in range from 3750 to 6500.
Is it only possible using ResponsibleLineCanvas instead of ResponsiveLine?

Please, let me know if I forgot to specify something.
Thanks for the attention :)

[tkonopka]

Hi @krau5. Setting custom gridYValues works for me with the svg Line component. Your code format looks alright, except that if you're using Line and not ResponsiveLine, also specify the width and height for the chart.

If you're still having trouble, can you post a more complete example?

[krau5]

Thanks for the tip @tkonopka. The <Line /> component has a lil' bit more complex structure.

// Line component

import { useTheme } from '@nivo/core';
import { ResponsiveLine, LineSvgProps } from '@nivo/line';

type Props = LineSvgProps & {
  width: number;
  height: number;
};

export const Line = ({ theme: customTheme, ...props }: Props) => {
  const theme = useTheme();

  return <ResponsiveLine {...props} theme={{ ...theme, ...customTheme }} />;
};

And the usage looks like:

<Line
  data={data}
  width={900}
  height={400}
  gridYValues={[2000, 4000, 6000, 8000]}
/>

P.S. I've just changed it from usual Line to ResponsiveLine, although it doesn't fix the problem

[tkonopka]

Sorry to hear. That's puzzling as it seems to work for me.

Perhaps someone else can pitch in and point to what might be missing.

[plouc]

@krau5, I don't know what you're seeing, but it works:

There are grid lines on the Y axis for [20, 40, 120, 180] (and works with [17, 37, 117, 177] as well ).

Maybe you're referring to the ticks on the left axis? In which case, this would be:

axisLeft={{ tickValues: [17, 37, 117, 177] }}

Just a guess.

[krau5]

Okay :( All in all, thanks for a help

[krau5]

@krau5, I don't know what you're seeing, but it works: There are grid lines on the Y axis for [20, 40, 120, 180] (and works with [17, 37, 117, 177] as well ).

Maybe you're referring to the ticks on the left axis? In which case, this would be:

axisLeft={{ tickValues: [17, 37, 117, 177] }}

Just a guess.

Will have a look

[krau5]

@plouc thanks for a tip :) Mistaken in explaining the main goal

[krau5]

Solution:
#2012 (reply in thread)