ERROR TypeError: Cannot read properties of null (reading ‘getAttribute’)

When data is empty i get this error-> ERROR TypeError: Cannot read properties of null (reading ‘getAttribute’)

Error:

chunk-UOKKXAU3.js:7 ERROR TypeError: Cannot read properties of null (reading 'getAttribute')
    at wT (chunk-FLTRA2LT.js:2:30682)
    at VM (chunk-FLTRA2LT.js:15:65614)
    at nnt (chunk-FLTRA2LT.js:15:65536)
    **at n.drawGraph (chunk-EXIXHUOH.js:33:1018)**
    at Object.next (chunk-EXIXHUOH.js:18:15207)
    at io.next (chunk-UOKKXAU3.js:3:3101)
    at we._next (chunk-UOKKXAU3.js:3:2784)
    at we.next (chunk-UOKKXAU3.js:3:2511)
    at Object.next (chunk-JDCFQ7WB.js:26:3066)
    at io.next (chunk-UOKKXAU3.js:3:3101)

The highlighted line no takes me to this code:

 drawGraph() {
    type EChartsOption = echarts.EChartsOption;
    **var chartDom = document.getElementById('networkGraph')!;** // error
    echarts.dispose(chartDom);
    this.mychart = echarts.init(chartDom);
......
.....
}

And when there is some data, I get this error-> ERROR TypeError: Cannot set properties of undefined (setting’dataIndex’)

I am not getting why these error are coming. I would highly appreciate if someone can help.

Data received from server:

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "lazyInit": null,
        "headers": {}
    },
    "status": 200,
    "statusText": "OK",
    "url": "http://ip:port/handler/?action=trafficVisualizationServiceData",
    "ok": true,
    "type": 4,
    "body": {
        "httpstatuscode": 200,
        "AppData": {
            "data": [],
            "link": [],
            "categories": [
                {
                    "name": "CNF"
                },
                {
                    "name": "SCPE"
                },
                {
                    "name": "SCPI"
                },
                {
                    "name": "IPENDPOINT"
                }
            ]
        },
        "opStatusCode": 2000,
        "type": "SUCCESS",
        "message": "DATA RECEIVED SUCCESSFULLY"
    }
}

app.ts:

  drawGraph() {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('networkGraph')!;
    echarts.dispose(chartDom);
    this.mychart = echarts.init(chartDom);

    interface GraphNode {
      symbolSize: number;
      label?: {
        show?: boolean;
      };
    }

    this.mychart.showLoading();

    (this.graph = {
      nodes: this.nodes,
      links: this.links,
      categories: this.categories,
    }),
      this.mychart.hideLoading();
    console.log('nodes : ' + JSON.stringify(this.graph.nodes));

    let scpEgressThresholdTps = this.scpEgressThresholdTps;

    // this.impactedProxyList.has("")
    let impactedProxyListTemp: Set<string> = this.impactedProxyList;

    this.graph.nodes.forEach(function (node: any) {
      if (node.category == 'IPENDPOINT') {
        node.symbol = 'roundRect';
        node.symbolSize = 17;

        console.log('endpoint_kpi : ' + node.kpi);

        if (node.kpi === undefined) {
          node.itemStyle = {
            color: 'white', // Background color
            borderColor: '#818181', // Border color
            borderWidth: 1, // Border width
          };
        } else {
          node.itemStyle = {
            color: 'white', // Background color
            borderColor: '#FD5E5E',
            borderWidth: 5, // Border width
          };
        }
      } else if (node.category == 'SCPI') {
        node.symbol = 'circle';
        node.symbolSize = 20;

        let isProxyImpacted: boolean = false;
        Object.entries(impactedProxyListTemp).forEach(([key, value]) => {
          console.log('key_value : ' + key, value);
          if (value == node.proxyId) {
            isProxyImpacted = true;
          }
        });

        console.log('isProxyImpacted : ' + isProxyImpacted);
        if (isProxyImpacted) {
          console.error('this proxy is impacted.');
          node.itemStyle = {
            color: '#7EA6FF', // Background color
            borderColor: '#FD5E5E', // Border color
            borderWidth: 5, // Border width
          };
        } else if (node.value > scpEgressThresholdTps) {
          node.itemStyle = {
            color: '#7EA6FF', // Background color
            borderColor: '#fee902', // Border color
            borderWidth: 5, // Border width
          };
        } else {
          node.itemStyle = {
            color: '#7EA6FF', // Background color
            borderWidth: 1, // Border width
          };
        }
      } else if (node.category == 'SCPE') {
        node.symbol = 'circle';
        node.symbolSize = 20;

        let isProxyImpacted: boolean = false;
        Object.entries(impactedProxyListTemp).forEach(([key, value]) => {
          console.log('key_value : ' + key, value);
          if (value == node.proxyId) {
            isProxyImpacted = true;
          }
        });

        if (isProxyImpacted) {
          console.error('this proxy is impacted.');
          node.itemStyle = {
            color: '#3188FF', // Background color
            borderColor: '#FD5E5E', // Border color
            borderWidth: 5, // Border width
          };
        } else if (node.value > scpEgressThresholdTps) {
          node.itemStyle = {
            color: '#3188FF', // Background color
            borderColor: '#fee902', // Border color
            borderWidth: 5, // Border width
          };
        } else {
          node.itemStyle = {
            color: '#3188FF', // Background color
            borderWidth: 1, // Border width
          };
        }
      } else if (node.category == 'CNF') {
        node.symbol = 'roundRect';
        node.symbolSize = 26;
        node.itemStyle = {
          color: '#00A1BE', // Background color
          borderWidth: 1, // Border width
        };
      } else {
        node.symbol = 'circle';
        node.symbolSize = 13;
        node.itemStyle = {
          borderColor: '#5E42FA', // Border color
          borderWidth: 1, // Border width
        };
      }
    });

    this.graph.links.forEach(function (link: any) {
      console.log('isLinkImpacted : ' + link.isLinkImpacted);

      if (link.isLinkImpacted === undefined) {
        link.lineStyle = {
          width: 2, // Set width of the line
          type: 'solid', // Set type of the line to solid
          color: 'green', // Set color of the line
        };
      } else {
        link.lineStyle = {
          width: 2, // Set width of the line
          type: 'solid', // Set type of the line to solid
          color: 'red', // Set color of the line
        };
      }
    });


    this.mychart.setOption(this.option);
    this.option && this.mychart.setOption(this.option);
 
  }

HTML:

<div *ngIf="showConnectedGraph && isConnectedGraphDataAvailable " id="networkGraph" style="width: 100%; border-radius: 5px; height: 550px; background-color: white;"></div>
<div class="nodata" *ngIf="(showConnectedGraph) && (!isConnectedGraphDataAvailable)" style="width: 100%; border-radius: 5px; height: 550px; background-color: white;">Data Not Available</div>