Apache Echarts not working. Error- Legend data should be same with series name or data name

Question

Apache Echarts not working. Error- Legend data should be same with series name or data name. Even though my series name and the names in legend data matches, it is giving the above mentioned error. Chart is not getting printed. Where am i doing wrong ?

attaching screenshot of the error.

API data

{
    "AppData": {
        "data": [
            {
                "name": "CNF",
                "id": "CNF",
                "category": 1,
                "value": 0
            },
            {
                "name": "SCPC",
                "id": "SCPC",
                "category": 2,
                "value": 0
            },
            {
                "name": "NRF",
                "id": "NRF",
                "category": 3,
                "value": 0
            },
            {
                "name": "SCPI",
                "id": "SCPI",
                "category": 4,
                "value": 0
            },
            {
                "name": "SCPE",
                "id": "SCPE",
                "category": 5,
                "value": 0
            },
            {
                "name": "NMS",
                "id": "NMS",
                "category": 6,
                "value": 0
            }
        ],
        "link": [
            {
                "source": "CNF",
                "target": "SCPC"
            },
            {
                "source": "SCPC",
                "target": "NRF"
            },
            {
                "source": "SCPC",
                "target": "SCPI"
            },
            {
                "source": "SCPC",
                "target": "SCPE"
            },
            {
                "source": "SCPC",
                "target": "NMS"
            }
        ],
        "categories": [
            {
                "name": "SCPC"
            },
            {
                "name": "CNF"
            },
            {
                "name": "SCPE"
            },
            {
                "name": "SCPI"
            },
            {
                "name": "NRF"
            },
            {
                "name": "NMS"
            }
        ]
    }
}

component.html

<div class="networkGraphDiv">
  <div id="networkGraph" style="width: 100%;  overflow: auto; height: 100%"></div>
</div>

component.ts

  graphData:any=[];
  graphLinks:any=[];
  graphCategories:any=[];

  constructor(
    private httpclient: HttpClient,
    private httpService: HttpService
  ){}

  ngOnInit(): void {
    this.fetchData();
    this.createNetworkChart();
  }

  fetchData() {
    this.httpService.getData(request).subscribe((response: any) => {
    const appData = response['AppData'];
    this.graphData = appData['data'];
    this.graphLinks = appData['link'];
    this.graphCategories = appData['categories'];
    });
  }

  createNetworkChart() {
    var chartDom = document.getElementById('networkGraph');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '',
        subtext: '',
        top: 'top',
        left: 'left',
      },
      tooltip: {},
      legend: [
        {
          data: ['SCPC', 'CNF', 'SCPE', 'SCPI', 'NRF', 'NMS'],
          position: 'right',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
        },
      ],
      series: [
        {
          name: 'Node Name',
          type: 'graph',
          layout: 'force',
          data: this.graphData,
          links: this.graphLinks,
          categories: this.graphCategories,
          zoom: 2,
          symbolSize: 30,
          label: {
            // position: 'top',
            show: true, // node name to be shown in circle
          },
          edgeSymbol: ['circle', 'arrow'], // for arrow from one to another
          edgeSymbolSize: [4, 15],
  
          emphasis: {
            focus: 'adjacency',
            label: {
              show: false,
            },
          },
          roam: true,
          force: {
            repulsion: 100,
          }
        },
      ],
    };
    option && myChart.setOption(option);
  }

Answer 1

The problem here was that I was calling createNetworkChart() even before data was completely fetched from API call. Everything else is OK.

ngOnInit(): void {
    this.fetchData();

    // this.createNetworkChart(); this was getting called even before complete data fetched from API call.
  }

  fetchData() {
    this.httpService.getData(request).subscribe((response: any) => {
    const appData = response['AppData'];
    this.graphData = appData['data'];
    this.graphLinks = appData['link'];
    this.graphCategories = appData['categories'];

    this.createNetworkChart()
    });
  }