CODEWITHSUNDEEP
javascriptreactjsreact-vis
kinkeal
kinkeal

Reputation: 13

React-Vis Legend toggle filter for line chart

I am using react-vis and trying to implement a line chart with legends that can filter as shown on the first plot on top of this website: https://uber.github.io/react-vis/examples/showcases/plots Basically when the legend item is clicked the whole series goes dim, along with the legend item.

I am guessing that I need to use onItemClick attribute in under Legends in https://uber.github.io/react-vis/documentation/api-reference/legends to change the opacity of the line, which I have successfully created

<LineSeries
     data={data1}
     opacity={1}
     stroke="#f5222d"
     strokeStyle="solid"
/>

I am not sure on how to proceed from here, building the function for onItemClick

Upvotes: 1

Views: 3046

Answers (1)

10101010
10101010

Reputation: 1821

Here is a simple example

import React from "react";
import {
  XYPlot,
  LineSeries,
  DiscreteColorLegend
} from "react-vis";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      series: [{
        title: "Apples",
        disabled: false,
        data: [{ x: 0, y: 12 }, { x: 1, y: 22 }]
      }]
    };
  }

  clickHandler = (item, i) => {
    const { series } = this.state;
    series[0].disabled = !series[0].disabled;
    this.setState({ series });
  };

  render() {
    const { series } = this.state;

    return (
      <div>
        <DiscreteColorLegend
          onItemClick={this.clickHandler}
          width={180}
          items={series}
        />
        <XYPlot height={200} width={200}>
          <LineSeries
            data={series[0].data}
            opacity={series[0].disabled ? 0.2 : 1}
            stroke="#f5222d"
            strokeStyle="solid"
          />
        </XYPlot>
      </div>
    );
  }
}

vis

Upvotes: 2

Related Questions