How to implement the ECharts animated bar chart in Angular version 16?

The animated bar chart in ECharts functions perfectly on Stackblitz. You can check it out here in the Stackblitz Angular 16 demo.

However, attempting to run the same demo in a local Angular 16 project led to the following errors.

Error: src/app/animated-echarts.component.ts:21:55 - error NG8002: Can't bind to 'autoResize' since it isn't a known property of 'div'.

21       '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>',
                                                         ~~~~~~~~~~~~~~~~~~~~


Error: src/app/animated-echarts.component.ts:21:76 - error NG8002: Can't bind to 'options' since it isn't a known property of 'div'.

21       '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>',

The local version is available on Github. You can see the error by following these steps:

git clone <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9beb0ad99beb0adb1acbbf7bab6b4">[email protected]</a>:fireflysemantics/charts.git
cd charts
npm i
ng serve -o

Any thoughts or suggestions?

javascriptangulartypescriptechartsngx-echarts

Answer №1

After creating a version 15 project with Angular CLI, it was necessary to use ngx-echarts version 15.03.

To resolve the issue, I updated the Angular CLI by running the following commands:

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

I then recreated the project as an Angular 16 project, and now everything is functioning properly.

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

Is it possible to implement an SSL certificate with my Next JS deployment?

Currently, I am running a Next.js deployment on an EC2 instance and looking to secure it with an SSL certificate. My initial thought was to use a custom server config for this purpose, but I'm concerned that it may impact certain optimizations that I& ...

javascriptnode.jsdeploymentnext.jsssl-certificate

I am looking to retrieve data from the Graph API JSON and gradually refine my search to achieve successful

I am looking to retrieve data from the "fb_page_categories" endpoint, which provides an array of categories a page can be categorized under. The format for this request is as follows: GET graph.facebook.com /fb_page_categories? Once this request is mad ...

javascriptjsonfacebookfacebook-graph-apifacebook-fql

No response was forthcoming

I have been trying to send a post request to my login endpoint, but I am not receiving any response. Despite thoroughly checking my code, I am unable to figure out why there is no response being sent back. My backend is built using Express in TypeScript. B ...

node.jstypescriptexpress

Is it feasible to implement different themes besides 'light' and 'dark' in React Material UI?

Currently, I am developing a user interface (UI) using React in combination with Material UI (v5+). The documentation provides information on how to utilize the extendTheme function along with CssVarsProvider to incorporate MUI colors into CSS. It also men ...

javascriptreactjsmaterial-ui

Angular is able to successfully retrieve the current route when it is defined, but

Here's the code snippet I am working with: import { Router } from '@angular/router'; Following that, in my constructor: constructor(router: Router) { console.log(this.router.url); } Upon loading the page, it initially shows the URL a ...

angulartypescriptng-admin

The data remains undefined even after being initialized in the constructor

My goal is to extract queryParams from a URL and leverage that information to resolve data in the following manner: data = { searchValue: null || undefined }; constructor(private http: HttpClient, private route: ActivatedRoute) { route.queryParams.su ...

angulartypescriptrxjs

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

angularangular5

Retrieve the binary file data that was sent via Postman using Node.js/Express.js

I am currently testing file uploading in my backend system. I am using Postman to send binary data as a file in the request body, and now I need to extract this data from the POST request. req.body The above code snippet returns a binary buffer that look ...

javascriptnode.jsexpresspostman

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Is there a way to clear the mui-chips in Material UI Autocomplete TextField when the value in another field is changed? I have been struggling with clearing the subtype value when the Type value changes. Although I can update the drop-down options based on ...

javascriptreactjsautocompletematerial-uimulti-select

Execute functions during jquery's .animate() operation

This is a snippet of code I use to smoothly scroll the browser back to the top: $('html, body').animate({scrollTop: 0}, 500, "easeOutQuart"); Now, I am looking for a way to prevent the user from scrolling while this animation is running. Once t ...

javascriptjqueryhtml

Embracing the node mindset with a Java foundation

As a Java Developer, I have become accustomed to working in a sequential manner where tasks are executed one after the other or concurrently with multiple threads. The organization of code in a sequential way seemed logical under this paradigm. However, wh ...

javajavascriptnode.jsasynchronous

What sets Joomla file inclusion apart from the rest?

Can someone please explain the difference between including a JavaScript script file in the following two ways? I created this within a system plugin in Joomla and included the JavaScript file inside the "onAfterInitialise" function. 1) <script type ...

phpjavascriptjoomlajoomla2.5

How to identify the character encoding in a node.js request

Did you know that Facebook chat has a feature where it automatically detects and displays messages in a left-to-right format when typing in English, but switches to right-to-left style when adding right-to-left characters? I'm curious about how Faceb ...

javascriptfacebook

ASP.NET - The Power of a Long Press

I am currently working on implementing a Long Press event in JavaScript on an ASPX page. Due to my limited experience with JavaScript, I am facing a few challenges. I found a similar question that was previously asked here. When running the code, I encoun ...

javascriptasp.net

Error: react-testing-library throwing validateDOMNesting warning

Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>. in tbody (created by TableBody) in TableBody (created by TableBody) in TableBody Inquiry: Is there a way to render the TableBody component within a table ...

javascriptreactjsunit-testingjestjsreact-testing-library

Interfacing my Node.js REST API with AngularJS

I've got angular code that works with a local JSON file: App.controller('bodyController', ['$scope','$http',function($scope,$http){ $http.get('data.json').success(function(data){ $scope.data=data; }).error ...

javascriptjsonangularjsnode.js

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Is there a way to mock data through configuration in Angular 2 similar to how it's done in Ember Mirage? I'm aware that I can create my own solution using Dependency Injection and MockBackend to intercept HTTP calls and provide dummy data. Howeve ...

javascriptangularjsangular

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

javascripthtmlreactjsdomautofocus

Do changes in Input fields reflect in the parent component?

I was under the impression that I could share data with child components using @Input() directive and communicate data back to the parent component with @Output() along with the appropriate emit. However, I recently discovered that modifications made to th ...

angulartypescript