Having trouble with Apache Echarts? The error message "Legend data should be the same as series name or data name" is causing

Having an issue with Apache Echarts. I'm getting the error message "Legend data should be same with series name or data name" even though my series name and legend data names match. The chart is not printing correctly. Can anyone identify where I am going wrong?

https://i.sstatic.net/f5HIwRx6.png

Attached is a screenshot of the error for reference.

API Data

{
    "AppData": {
        "data": [
            {
                "name": "CNF",
                "id": "CNF",
                "category": 1,
                "value": 0
            },
            ...
        ],
        ...
    }
}

component.html

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

component.ts

  
  // Component code here...
angulartypescriptechartsapache-echarts

Answer №1

Ensure that the categories specified in your data[i].category property match the category names.

For reference, here is an example:

const data = {
  nodes: [
    {name: 'CNF', category: 'CNF'},
    {name: 'SCPC', category: 'SCPC'},
    {name: 'NRF', category: 'NRF'},
    {name: 'SCPI', category: 'SCPI'},
    {name: 'SCPE', category: 'SCPE'},
    {name: 'NMS', category: 'NMS'}
  ],
  links: [
    {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'}
  ]
};

option = {
  legend: {},
  series: [
    {
      type: 'graph',
      layout: 'force',
      zoom: 7,
      label: {show: true},
      data: data.nodes,
      links: data.links,
      categories: data.categories,
    }
  ]
};

Answer №2

The issue I encountered was that I inadvertently called createNetworkChart() before the data had fully loaded from the API call. Apart from that, everything else is functioning correctly.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when attempting to chain promises with async/await functionality

Here is my current code snippet: await enterName(); await enterCity(); await submit(); async enterName() { element.sendKeys('name'); } async submit() { element.submit(); waitForAngular(); } The problem I am facing is that when calling the subm ...

typescriptasync-awaitprotractor

Cordova Emulate Android cannot locate Gradle or an installed Android Studio, despite their presence

Error Message After taking a break from the project and returning to it, I encountered an error message that I couldn't resolve no matter what solution I tried. Seeking help here as I know the app itself should be functioning properly. If you are un ...

androidangularcordovagradle

Ways to display dynamic information in a vertical list using HTML (MEAN stack)

I am receiving an array of data from the backend and looking for a way to display them in a vertical list using HTML. Can anyone help me with this? Below is my current code snippet. TS: this.sub = this.route.params.subscribe(params => { this.http.g ...

htmlcssangular

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Is there a way to identify which compiler option corresponds to a specific Typescript error? While working with Typescript in VSCode, I often encounter errors like initializer provides no value for this binding element. (Please note that these are warnin ...

typescriptvisual-studio-codetsc

Cancel the previous Angular/RxJS request to unsubscribe

I'm on the quest for a more streamlined approach using RxJS to tackle this task. The existing code gets the job done, but it seems like there should be a more efficient solution. ngOnInit() { this.activatedRoute.params.subscribe(({ bookId }) => ...

angularrxjs

Interceptor causing Angular HTTP Client to return null value

Here are two examples of the code output in the console. In order to return an observable for an interceptor, I converted a local storage promise into an observable using switchmap. However, I am still receiving null as the value. The function is wrapped i ...

angularionic2ionic3

What is the process for removing the Angular IDE plugin from Eclipse Oxygen?

After using the free license for 8 days, I found myself needing to continue working. My first attempt at uninstalling Angular-IDE through Eclipse Marketplace Installed screen was unsuccessful. Next, I tried removing Webclipse, but this also did not ...

angulareclipse

Tracking events in Angular 4 using angulartics2 and Adobe Analytics: A step-by-step guide

I've been working on tracking page views in my Angular 4 application, specifically with Adobe Analytics. Currently, I am utilizing angulartics2 for this purpose. First step was adding the necessary script for Adobe Staging in my index.html page: &l ...

angularanalyticsadobe-analyticsevent-tracking

When parameters are added to one route, all other routes cease to function properly

After I added a parameter to one of the routes, all the other routes stopped rendering correctly (i.e., router-view is not working at all). The route /download/:id works as expected. Am I missing something in the setup? I tried leaving and removing the /do ...

typescriptvue.jsvue-routervuejs3vue-router4

Ways to leverage Composite API in place of Mixin or Extends functionality

Currently, I am exploring the use of Vue3 for my project. One issue I am facing is that I need to create multiple components (SFC) with similar properties. I want to define these common properties using the composite API across all components, like so: con ...

typescriptvuejs3

Typescript error: Cannot access property "status" on type "never".ts(2339)

Currently, I have a method that utilizes nextjs/auth to sign in with credentials from a form. However, I am encountering a type checking error Object is possibly 'undefined'.ts(2532) const doStuff = async (values: any) => { const result: S ...

javascriptreactjstypescript

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Utilizing Async/Await to Streamline Google Maps Elevation Requests

I'm struggling to run this in a sequential manner. I've experimented with various methods like using Promise.all and getting stuck in callback hell, but what I really need is to obtain elevations for each point that has a valid altitude value (no ...

typescriptgoogle-maps-api-3async-await

Strategies for effectively choosing this specific entity from the repository

Is it possible to choose the right entity when crafting a repository method using typeorm? I'm facing an issue where I need to select the password property specifically from the Admin entity, however, the "this" keyword selects the Repository instead ...

typescriptormnestjstypeormbcrypt

Delay the execution of a JavaScript method that resolves a promise

Currently, I am delving into the world of Angular 2, typescript, promises, and more. I've set up a small application for developer tools with a service that simply returns hard-coded data. This setup is purely for testing purposes. I want to introduc ...

angulartypescriptpromisetimeoutsettimeout

Develop an Angular application and deploy it on an IIS server

I've been facing issues while trying to deploy my Angular app on IIS. After researching, I found that using the cli command ng build resulted in errors such as Module not found. Interestingly, when I modified the templateUrl in the component, the erro ...

angulariiswebpackmoduleangular-cli

Retrieving the innerHTML or innerText of a structural DOM element generated by *ngFor in Selenium

Having trouble accessing the innerHTML/innerText of a structural DOM element, only getting a commented element instead of the child elements. <div class="snap-box"> <label class="snap-heading">Recommendations</label> <div class="r ...

javaangularseleniumselenium-webdriver

Exporting a value from a class in Angular 2 using TypeScript

import {TranslateService, LangChangeEvent} from "@ngx-translate/core"; class CustomLanguageExporter { public currentLang : string; constructor(private translate : TranslateService) { } public static setLanguage(): string { this.tr ...

angulartypescriptangular-i18n

Angular 6 is throwing an error stating that the 'publish' property is not found on the type Observable<string>

Currently, I am working on my initial Angular project using Angular 6. To streamline the process of handling errors in one central location, I have decided to incorporate Error Handling by referencing this insightful article on Medium From the code snipp ...

angularrxjsangular6

Restrict the number of subscriptions allowed for an rxjs observable

Seeking a replacement for observable, subject, or event emitter that allows only one subscription at a time. The first subscriber should have priority to execute its subscribe function, with subsequent subscribers waiting their turn until the first unsubsc ...

angulartypescriptrxjsobservable