Smith Chart does not update on again data binding to react component

Hi, I am using the Smith Chart in one of my projects. I fetch data from database and bind it to the react component named "SmithchartSeriesDirective" to its attribute named "points". It successfully binds the data on the smith chart, but on successive calls the data set changes due to any filter I apply, so this data is successfully fetched from database and as I bind it to the Smith Chart, the change does not reflects. Is there any refresh event I need to trigger?

Change() {      let data = [        { resistance: 20, reactance: -50 },       // Add more data      ];      this.smithchartInstance.series[0].points = data;      this.smithchartInstance.refresh();  }

Hi Palanidurai,
Attachment: grafana_7b96d616.rar

Hi, Can you please update on it ? I am stuck.

class App extends Component<AppProps, AppState> {    private smithchartInstance: SmithchartComponent;    constructor(props) {      super(props);      this.state = {        name: "React"      };    }  Change() {      let data = [        { resistance: 20, reactance: -50 },        // More data      ];      this.smithchartInstance.series[0].points = data;      this.smithchartInstance.refresh();    }    render() {      return (        <div>        <button id="click" onClick={this.Change.bind(this)}>            Click to Change data          </button>          <SmithchartComponent            id="smith-chart"            ref={gauge => (this.smithchartInstance = gauge)}          >            // Add more codes          </SmithchartComponent>        </div>      );    }  }

Hi, Thanks for getting back. I am unable to add this line. I get compile time error, when ever I add this line. Kindly view the attachments.

ref={gauge => (this.smithchartInstance = gauge as SmithchartComponent)}

Hi Palandurai,

Hi,

<SmithchartSeriesCollectionDirective>              <SmithchartSeriesDirective                fill= 'transparent'                name="Transmission1"                marker={{                  shape: "Circle",                  visible: true,                  fill: 'red',                  border: { width: 2 }                }}              />            </SmithchartSeriesCollectionDirective>          </SmithchartComponent>

Hi,

loaded(args) {      let element = document.getElementById('smith-chart_series0_points');      element.setAttribute('stroke', 'transparent');    }

Hi Palandurai,

<SmithchartComponent background="transparent"/>  </SmithchartComponent>

Hi Palindurai,
Attachment: axisIssue_323d5df7.rar

Hi,

<SmithchartComponent          horizontalAxis={{              majorGridLines:{color: ‘white’},              axisLine:{color: ‘white’},              labelStyle:{ color: ‘white’ }          }}          radialAxis={{               majorGridLines:{color: ‘white’},               axisLine:{color: ‘white’},               labelStyle:{ color: ‘white’ }          }} />  </SmithchartComponent>

Durga G

Hi,

 Srihari M