Exploring the versatility of Highcharts with callback functions and comprehensive

Currently, I am utilizing Highcharts with angular 9.

Here is the link to the code : https://stackblitz.com/edit/angular-ivy-wdejxk

For running on the application side or test side, follow these instructions:

  1. Test Side: In the angular.json file at line number 18, change 
        "main": "src/main.ts",
    to 
        "main": "src/main-testing.ts",

Then refresh the browser.

  1. Application Side: Change exactly the opposite of the previous step. 
       "main": "src/main-testing.ts",
    to 
       "main": "src/main.ts",

Some issues I am facing include:

  1. I have utilized a chart callback to get the chart instance, but it's not functioning properly (inside hello.component.ts, lines 38 to 40). How do I call it and when does the callback happen in Highcharts?
  2. If by some means I can assign the chart instance to the chartCreated variable, can I now control the chart like lines 60 to 62 (if I uncomment that)? Essentially, I want to understand the usefulness of updateFlag in Highcharts.
  3. Unable to addSeries when ngOnChanges is called inside hello.component.ts
  4. In the spec file hello.component.spec.ts, I wanted to test the chart by adding a series or numeric data on my own, as I did when onClick() is called. But jasmine shows an error 
       TypeError: Cannot read series of undefined
   TypeError: Cannot read property 'addSeries' of undefined
    How can I resolve these issues?

EDIT 1: Implemented ngOnChanges and ngOnInit, and transferred most of the code from app.component.ts to hello.component.ts

angulartypescriptunit-testinghighchartskarma-jasmine

Answer №1

    By implementing the ngOnInit lifecycle hook, you will be able to access values within your Angular component:

    1. In your AppComponent class, ensure it implements OnInit interface and define the ngOnInit method.

    2. Within the ngOnInit method, set up a chartCallback function that assigns a chart object to this.chartCreated and logs its properties.

        addNewDataToChart(){
            // Add new data to the chart
        }

    3. Implement an onClick method that toggles between updating data points on the chart series based on a click event.

Answer №2

Based on the suggestion from @gsa.interactive, the following test cases were successful:

it('should validate that changes are reflected in the data of the series in charts', () => {
      component.chartCreated.series[0].data[0].update(5);
      //console.log(component.chartCreated);
      expect(component.chartCreated.series[0].yData).toEqual([5, 2, 3]);
  });

  it('should confirm that new series are added to the charts', () => {
    component.chartCreated.addSeries({
        data: [3, 4, 2],
        type: 'line'
    });

    //console.log(component.chartCreated);
    expect(component.chartCreated.series.length).toBe(2);
    expect(component.chartCreated.series[1].yData).toEqual([3, 4, 2]);
  });

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

Unlike other checkbox components, mat-checkbox does not respond to a false condition unless double-clicked

I am dealing with a situation where an entity has a variable that needs to be the opposite of the checkbox state. enitity.enabled = true The checkbox serves as a way to indicate that an item should be deleted. When the form is submitted, the marked item i ...

angularangular-material

An issue occurred with npm resulting in exit code 2. The error is as follows: Command was unsuccessful: node_modules/.bin/vsce package --no

Here is the specific error displayed in cmd: TS1323: Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'esnext', 'commonjs', 'amd', 'system', or 'umd'. E ...

node.jstypescriptnpmyarnpkgvscode-extensions

Utilizing useClass in Angular's APP_INITIALIZER

Before my application starts up, I require some API data and am currently handling it with APP_INITIALIZER and useFactory. However, I aim to enhance the structure by separating all the code from app.module.ts: app.module.ts import { NgModule} from '@ ...

angulartypescript

What are the distinctions in type-narrowing when assigning values using ternary expressions versus if-else statements?

It seems that the type checker is handling the typing of m in print() differently based on whether m was assigned through a ternary expression or an if-else statement. What sets apart the first line in the print() function from the commented code below it? ...

typescripttypes

Syncing a line's position with the cursor in Angular using the ChartJs Annotation Plugin

I've been working on creating a crosshair using the annotation plugin, and while I've been able to modify the line's value, it doesn't seem to update on the chart. Here are the details of my chart options : public financialChartOptions ...

angulartypescriptchart.jsng2-charts

Default interface value

I have defined an Interface as shown below: export interface IItem { name: string; isActive?: boolean; } The data structure is like this: const data: IItem[] = [ { name: 'item1', isActive: true }, { name: 'item2', ...

angular

Is Drizzle ORM able to handle decimal values in MySQL as strings?

The data structure: export const myTable = mysqlTable( "MyTable", { id: varchar("id", { length: 191 }).notNull(), value: decimal("value", { precision: 7, scale: 4 }).notNull(), createdAt: datetime("created ...

typescriptdrizzle

Utilize multiple activated modules in Angular 2

Recently, I've been exploring the new features of Angular 2 final release, particularly the updated router functionality. An interesting example showcasing the router in action can be found at this link: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=pr ...

angulartypescriptdomangular2-routing

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

Exporting a constant as a default in TypeScript

We are currently developing a TypeScript library that will be published to our private NPM environment. The goal is for this library to be usable in TS, ES6, or ES5 projects. Let's call the npm package foo. The main file of the library serves as an e ...

typescripttypescript1.8typescript-typings

Annoying border problem encountered with Angular material column header

After upgrading Angular Material to version 9, I encountered an issue where a bottom border appears under the sorted column heading in my mat-table. Strangely, the border disappears when clicked upon. Upon inspecting the browser's CSS, I discovered t ...

angularangular-materialangular-material-9

Tips for declaring a particular type during the process of destructuring in Typescript

I have my own custom types defined as shown below: export type Extensions = | '.gif' | '.png' | '.jpeg' | '.jpg' | '.svg' | '.txt' | '.jpg' | '.csv' | '. ...

javascripttypescripttypescript-typingstypescript-generics

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Currently, I am using react in conjunction with typescript. Within my project, there are two components - one serving as the child and the other as the parent. I am passing a ref to my child component, and within that same child component, I am binding my ...

javascriptreactjstypescript

A novel way to enhance a class: a decorator that incorporates the “identify” class method, enabling the retrieval

I have been given the task to implement a class decorator that adds an "identify" class method. This method should return the class name along with the information passed in the decorator. Let me provide you with an example: typescript @identity(' ...

javascripttypescript

What is the importance of having the same data type for the searchElement in the argument for Array.prototype.includes()?

Is there an issue with my settings or is this a feature of TypeScript? Consider the code snippet below: type AllowedChars = 'x' | 'y' | 'z'; const exampleArr: AllowedChars[] = ['x', 'y', 'z']; f ...

javascripttypescript

When the button onClick event is not functioning as expected in NextJS with TypeScript

After creating a login page with a button to sign in and hit an API, I encountered an issue where clicking the button does not trigger any action. I have checked the console log and no errors or responses are showing up. Could there be a mistake in my code ...

javascripttypescriptnext.js

Encountered a challenge in Angular 2.4 when attempting to import a feature module from another project into the main project

I currently have two distinct projects, one serving as the main project and the other as a shared project. Within the shared project, I have developed a feature module known as NavBar. The intention behind separating these projects is to facilitate the re ...

angularsystemjsangular2-modules

What is the solution for fixing an error that says "There is no 'style' property on the 'Element' type"?

I'm struggling to fix an error in my JavaScript code. I created a script to display a tab indicator when a tab is clicked, but I keep getting the error message: "Property 'style' doesn't exist on type 'Element'". The tabs them ...

javascriptangular

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. Below is the CSS code I atte ...

htmlcssangular