Is Highcharts-angular (Highcharts wrapper for Angular) compatible with Angular 4?

I have attempted to install various versions of highcharts-angular, ranging from 2.0.0 to 2.10.0. However, I consistently encounter the same error when running the application.

The error message states: Metadata version mismatch for module C:/dev/Angular-WorkSpace/ma-property-report/node_modules/highcharts-angular/highcharts-angular.d.ts, found version 4, expected 3, while trying to resolve symbol SharedModule in C:/dev/Angular-WorkSpace/ma-property-report/src/app/shared/shared.module.ts.

Screenshot of the Error Message

In my search online, I discovered that these errors may occur if the dependency (highcharts-angular) is not compatible with Angular 4. At this moment, upgrading to Angular 5 is not an option for me.

Even after downgrading the highcharts-angular versions all the way to 2.0.0, the Metadata version mismatch persists. This leads me to question whether Angular 4 supports highcharts-angular (Highcharts wrapper for Angular), and if so, how can I resolve this error?

npm -v
6.14.8

@angular/cli: 1.2.7 // global Angular CLI version = 6.2.9
node: 8.17.0
os: win32 x64

Please take a look at my package.json file below:

{
  "name": "underwriter-web",
  "version": "0.0.0",
  "license": "MIT",
  ...
javascriptangulartypescripthighchartsangular2-highcharts

Answer №1

From version 2.0.0 to 2.10.0 of the highcharts-angular wrapper, Angular must be in a version higher than 6.0.0 for it to work. In simpler terms, the wrapper won't function without this requirement.

However, it is still possible to create a chart in Angular without using the wrapper, as demonstrated below:
Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-i9etwb

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 verify the authenticity of JSON data retrieved from

I'm currently working on validating JSON input from users and came across a challenge. I've found a way to check if the text a user enters is valid JSON using a simple function, like below: function IsJsonString(str) { try { JSON.par ...

javascriptjsonmongodbvalidation

Passport.js is throwing an error due to an unrecognized authentication

I need to implement two separate instances of Passport.js in my application - one for users and one for admins, both using JWT authentication. According to the official documentation, the way to differentiate between them is by giving them unique names. W ...

javascriptnode.jsexpresspassport.js

Finding out whether the current date falls between a startDate and endDate within a nested object in mongoose can be done by using a specific method

My data structure includes a nested object as shown: votingPeriod: {startDate: ISOdate(), endDate: ISOdate()}. Despite using the query below, I am getting an empty object back from my MongoDB. const organizations = await this.organizationRepository.find( ...

javascripttypescriptmongodbmongoosenestjs

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?

By utilizing the html code provided, I successfully incorporated Twitter and Facebook "Like" buttons into my website. Initially, they were stacked vertically, which resulted in excessive use of vertical space. To optimize space usage, I decided to align th ...

javascripthtmltwitterfacebook-like

Conflicting React types found in pnpm monorepo

In the process of converting an inherited monorepo from yarn+lerna to pnpm workspaces, I am encountering some issues. Specifically, there are mismatching React versions causing errors in typescript. It seems that TypeScript is not recognizing the closest @ ...

reactjstypescriptmonorepopnpmpnpm-workspace

Changing the value of a previous TD element using Javascript

My page features a button that, when clicked, triggers a function to change the value in the previous TD element from "No" to "Yes". Here is the HTML snippet: <tr class="odd"> <td class="">13.00</td> <td class="">DDR</td> ...

javascriptjqueryhtmlhtml-table

Tips for changing the dimensions of the canvas?

I'm struggling to display a photo captured from the webcam. The sizes are not matching up, and I can't pinpoint where the size is defined in the code. https://i.stack.imgur.com/Is921.png The camera view is on the left, while the photo should be ...

javascripthtmlcss

A guide on the correct way to fork an Ionic Stencil Component

I am interested in customizing the columns and position of ion-datetime to use it in my Ionic app. However, I am unsure how to approach this without resorting to messy copy-and-paste solutions. Are there any better methods for achieving this customizatio ...

angularionic-frameworkionic4stenciljs

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...

javascripthtmlcssnode.js

What is the best way to choose an HTML element in React?

Is there a way in React to change the theme value based on localStorage and set it to either light or dark mode? I am familiar with using Ref hooks in components, but how can I access a DOM element in the index.html file? ...

javascriptreactjsdomreact-hookselement

The scroll functionality does not seem to be functioning as intended on mobile devices when

Hey there, I'm currently working on making my navbar sticky and applying it when the page is scrolled. The code I have works flawlessly on desktop, but unfortunately, it doesn't seem to work on the mobile version. Any suggestions? window.addE ...

javascripthtmlcss

Combining the redux toolkit function createAsyncThunk with Angular's HttpClient by leveraging the ApiService

Currently, I am working on incorporating @reduxjs/toolkit into an Angular project. Is there a way to pass an Angular service as a parameter to the callback of createAsyncThunk instead of utilizing fetch directly? I referenced the documentation for an exa ...

javascriptangularreduxredux-thunkredux-toolkit

In JavaScript, the condition can function properly even without the "&&" logical operator, but if the "&&" is included, the condition does not operate

I need the error message to be shown if the character length in the #nameT id is less than 3 or greater than 20. When I use the && logical operator, it does not function correctly, as when the && is not present, it works perfectly when ex ...

javascripthtmlcssdomlogical-operators

Update the value of a Vue tree select component using JavaScript

I'm working on a school project using plain JavaScript and needed a tree view select with multiple layers. After extensive searching, I stumbled upon this tool. It's working smoothly, but the one thing that has me stumped is how to change its va ...

javascripttreeviewvue-treeselect

Utilizing TypeScript to mandate properties in a React component

When trying to apply TypeScript type enforcement on React components, I encountered some unexpected behavior. Here are simplified examples: function FunctionalComponent(props: { color: string }) { return <></>; } type ComponentWithName<I ...

reactjstypescript

If the server goes offline, it will not produce an error message

Running a factory in AngularJS angular.module('app.services',[]) .factory('myFactory', function($http){ return { getData: function(){ return {animal: 'dog'} }, isUser: function() ...

javascriptangularjs

Switch background color multiple times on click using JavaScript loop

Hello amazing people! I have a container with 52 small boxes and one large box containing a letter. The smaller boxes are arranged around the larger one using CSS grid, and when hovered over, they turn light grey. My Objective When any of the 52 small b ...

javascriptjqueryhtmlcss

performing an action using vuex in a component's method

I am facing an issue where I am trying to dispatch an action and retrieve the values passed into an input field. When I directly dispatch an action on a button, everything works perfectly fine: <button type="button" @click="store.dispatc ...

javascriptvue.jsvuex

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

c#angularjstypescript

The array does not seem to be properly linked in React JS

I've been encountering this error even after trying various solutions based on my knowledge. Any help would be greatly appreciated. The issue arises when I attempt to pass an array in props, retrieve it in the component, and then set the props value ...

javascriptarraysreactjs