Nivo: gridXValues or gridYValues not a recognized prop for Bar Chart

[shihlinlu]

I'm getting a prop error when adding gridXValues and/or gridYValues. As per documentation, they are optional props and I found a closed issue where they were implemented. Has this since been removed in the latest version?

Steps to reproduce the behavior:

1. Add gridXValues or gridYValues prop
2. See error

Expected behavior
There should be no error for prop.

[wyze]

They still exist. It looks like the TypeScript definitions just need to be updated.

[shihlinlu]

Thanks for the update. Is anyone in the process of updating the TS definitions? Or is this something I can open a PR if I have time?

[wyze]

A PR is more than welcome! There is a long running issue to get types added and up to date, so every little bit helps.

[shihlinlu]

Thanks for confirming! I'll take a stab at it when I have time to work on this and submit a PR!

I believe the TS definitions may need to be updated for these other ResponsiveBar props as well: colors. I have noticed importing the linear gradient pattern from the core Nivo package is also causing errors for TS.

[jcalkins89]

Was anyone able to get to this to update the TS definitions? I'm experiencing similar issues for both the colors prop for ResponsiveBar and the gridYValues prop

[chriscasella]

@jcalkins89 @shihlinlu I'm sure this is not the "right thing to do" but I can't wait for a PR and I need this now. So I went into node_modules\@nivo\bar\index.d.ts and in the BarProps Partial I added

        gridXValues: number | Array[number] | null
        gridYValues: number | Array[number] | null

It works perfectly for me so far. I hope it helps you as well! Cheers :)

[shihlinlu]

@chriscasella @jcalkins89 I submitted a PR a few days ago, but I need to fix the typing again. @chriscasella Your typing should be correct, I'll update it with that! Thanks!

[kaeland]

Hi, I'm wondering if there's a way to change a Horizontal Bar chart's "displayed" tick value to a string other than the string computed by the Bar chart's indexBy prop? I've posted this question here believing that the gridXValues and gridYValues props are designated for this purpose. However, each of my attempts to change the displayed tick value(s) using gridXValues or gridYValues still seems to be displaying the value produced from indexBy.

Here are the relevant props I'm passing the ResponsiveBar chart component:

data={[{ "id":1677, "label":"15.254", "value":74.9, "color":"#CC4C02" }]}

indexBy={data => String(data.id)} // the yAxis tick continues to display 1677

layout="horizontal"

gridYValues={["15.254"]} // but, shouldn't it be displaying "15.254" now?

Please let me know if I'm using these props incorrectly. I can also provide more context as well. Thank you so much.

[wyze]

@kaeland the gridXValues/gridYValues define the values where the grid lines are drawn. You will either want to use axisLeft.format or axisLeft.renderTick to change the displayed tick values for the Y axis.

[mojavad]

@jcalkins89 @shihlinlu I'm sure this is not the "right thing to do" but I can't wait for a PR and I need this now. So I went into node_modules\@nivo\bar\index.d.ts and in the BarProps Partial I added

        gridXValues: number | Array[number] | null
        gridYValues: number | Array[number] | null

It works perfectly for me so far. I hope it helps you as well! Cheers :)

The only issue here would be that overwriting the node_modules will be effectively useless if the code is being containerized and used somewhere else.

Is there an open pull request for adding the gridXValues and gridYValues to the typescript definitions? If not I'd be more than happy to submit one @plouc

[wyze]

Looks like the props are added to typescript definitions in the latest release (0.62.0), so we can close this.