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);
  }