CODEWITHSUNDEEP
amchartsamcharts4
Ramlal S
Ramlal S

Reputation: 1643

amCharts: How to toggle series using external custom buttons instead of legends

I'm trying to implement toggle the graph series using custom html/css buttons instead of legends as per requirement.

This AmCharts: custom button to hide/show graph is similar to my requirement but not working for me.

Currently, i'm using amCharts4

Please help me to handle this.

The following is the code I'm trying I made char as global (var chart), if i'm using series hitting the error series is not defined even i'm making it var global

   <button onClick={this.handleSeries}>Series </button>
   /* <button class="toggle-graph" data-graph-index="0">Series1 </button> */

 handleSeries = (e) => {
    var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
    if (graph.hidden) {
      chart.showGraph(graph);
    } else {
      chart.hideGraph(graph);
    }

    /*  if (series.isHiding || series.isHidden) {
      series.show();
    } else {
      series.hide();
    } */
  };

Upvotes: 1

Views: 734

Answers (1)

Ramlal S
Ramlal S

Reputation: 1643

To solve this, I followed the different approach without touching the graph or amChart legends.

I just used a boolean in the state and used if condition

if(this.state.booleanTrue){
show graphSeries logic
}

Here I just made the button as toggle

this.setState({ !this.state.booleanTrue })

This logic fulfilled my requirement.

Please mention if there is any other approach for this

Upvotes: 1

Related Questions