Nivo: Legend Series Toggle

Created on 21 May 2018 · 10Comments · Source: plouc/nivo

Can we have the legend series toggle on and off the data in the chart?

legends

Source

westonnh

👍10

Most helpful comment

I just figured out how to do this without having to build my own interactive legend component. The key is hidden inside of this storybook: https://nivo.rocks/storybook/?path=/story/waffle--legend-toggle

<ResponsiveLine
    data={ data }
    colors={ this.state.colors || { scheme: 'red_yellow_green' } }
    legends={[
        {
            onClick: (d) => {
                const colors = data.map(series => (series.id === d.id ? '#ff3344' : '#DDD'));
                this.setState({
                    colors: colors,
                });
            },
        },
    ]}
/>

Once you have this, you can also implement a way for the user to deselect the series highlighting.

aiisahik on 22 Mar 2020

👍6

All 10 comments

@westonnh, unfortunately legends aren't interactives for now, but it can be implemented using your own legends, that's what I did on https://stateofjs.com/2017/connections/

plouc on 22 May 2018

@westonnh, there's a work in progress on https://github.com/plouc/nivo/pull/224 which will add the ability to implement this feature.

plouc on 5 Jun 2018

👍4

[...] but it can be implemented using your own legends, that's what I did on https://stateofjs.com/2017/connections/

@plouc I guess you are referring to this part, right?
https://github.com/StateOfJS/StateOfJS/blob/6de5533a1e003487c229acc119b6f74daf24876e/surveys/2017/website/src/pages/2017/Connections.js#L99-L103

serchavalos on 9 Jan 2019

@serchavalos, yes, that's the approach I've used for state of js

plouc on 10 Jan 2019

👍1

<ResponsiveLine
    data={ data }
    colors={ this.state.colors || { scheme: 'red_yellow_green' } }
    legends={[
        {
            onClick: (d) => {
                const colors = data.map(series => (series.id === d.id ? '#ff3344' : '#DDD'));
                this.setState({
                    colors: colors,
                });
            },
        },
    ]}
/>

Once you have this, you can also implement a way for the user to deselect the series highlighting.

aiisahik on 22 Mar 2020

👍6

@aiisahik That kinda works as a poor-mans version of this feature, but it doesn't work for stacked ResponsiveLines,

onionhammer on 7 May 2020

Is there a way to implements the hiddenIds in the ResponsiveLine chart?

fpezzola on 31 Jul 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!