title: Is there any way that I can change the color of only the clicked line in Line Chart (Recharts)?
body: <p>I am having problems with my code regarding line charts. So, I want to click only a certain line to change the color of it but what happens is all the line in the chart changes their stroke color. Here is my code:</p>
  
  <pre><code>    export default class LineChartPresentational extends React.Component {
      constructor(props) {
      super();
      this.state = {
      isclicked: true, }}
  
      changeStrokeclick() {
      this.setState({isclicked: !this.state.isclicked} )}
  
      render() {
         let strokecolor = this.state.isclicked ? "#9da0a5" : "#2d75ed" 
      return ( 
         &lt;div&gt;
           &lt;div id="lclastdataref" style={{ textAlign: 'right' }}&gt;
           &lt;span&gt;Last Data Refresh: {linechartdf.date} &lt;/span&gt;
        &lt;/div&gt;
        &lt;div className='line-charts'&gt;
        &lt;div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}&gt;
  
          &lt;ResponsiveContainer&gt;
            &lt;LineChart
              width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart"&gt;
              &lt;XAxis dataKey={xAxisColumn} /&gt;
              &lt;YAxis domain={['auto', 'auto']} /&gt;
              &lt;Tooltip cursor={false} /&gt;
              {
                linechartdata.map((entry, index) =&gt; (
                  &lt;Line stroke={strokecolor} onClick={this.changeStrokeclick.bind(this)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/&gt;
                ))
              }
              &lt;/LineChart&gt;
          &lt;/ResponsiveContainer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ); }
  </code></pre>
  
  <p>Please I really need your help as you can see my lines are created using a loop. Thanks!</p>