Trouble with displaying points in Angular2's highcharts

I have implemented the angular2-highcharts chart module in my angular2 web application.

Everything works fine when the graph has less than 7000 points, with the line and points displaying correctly. However, once the number of points surpasses 7000, there are issues with the line rendering. Interestingly, hovering over the graph still shows the tooltip for the points.

I attempted to use turboThreshold to address this problem, but it did not have any effect.

Do you have any suggestions on how to resolve this issue?

--- Code ---

this.highchart_graph_expanded = {
  title: {
    text: ExpandedText
  },
  series: _series,
  legend: {
    enabled: true
  },
  yAxis: {
    visible: true,
  },
  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false // hover
        },
      },
      animation: false
    }
  },
  turboThreshold: 0, // allow render more than 10000 points
  rangeSelector: {
    enabled: false,
    inputEnabled: true,
  },
  xAxis: {
    type: 'datetime'
  },
};

_series = {
  data: seriesData, // [ [x,y], [x,y] ]
  name: "title",
};

Answer №1

angular2-highcharts is a third-party Highcharts integration and may not fully support the boost module feature.

If you encounter issues, consider using the official Angular wrapper for Highcharts: https://www.npmjs.com/package/highcharts-angular (users have not reported similar problems with this wrapper).

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

Type of event triggered by user file upload via INPUT element

I have a piece of code that reads the contents of a locally stored file. Here is what it looks like: onFile(event: any) { console.log(event); const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = (ev: any) => { ...

Error message: Index1 is not defined in AngularJS 2

While working on my MeanStack Project, I encountered an error when trying to update. The error message displayed was: Error: The requested path contains undefined segment at index 1 Here is the Update Service code snippet: updateLocation(id, data) { ...

Creating a dynamic list in Typescript from a tuple array without any intersections

const colors = ["red", "blue", "green", "yellow"] as const; const buttonSizes = ["small", "medium", "large"] as const; type ColorType = (typeof colors)[number]; type SizeType = (typeof b ...

Leverage ng2-charts along with a loading component during the AfterViewInit lifecycle hook

Currently, I am working on a web page that contains various charts. My focus right now is on developing a simple loader as shown below: <div *ngIf="loading === true; else elseBlock" class="container"> <div class="grid-pulse la-3x"> </di ...

When maxSelectedItems is configured for multiple items, prevent further typing in the input field

After the maximum number of items has been selected in a multi select with maxSelectedItems, users should not be able to input any more text into the select field. Visit this link for demos ...

"Enhance your user experience with dual notifications using the Angular2-to

Whenever I utilize the angular2-toaster packages, I find myself receiving duplicate notifications. Below is an example showcasing the usage of this package. I am unsure why this issue occurs, but I have noticed that simply reloading my angular2 applicatio ...

Resetting the timer of an observable in Angular 2

I have a unique service that automatically calls a method every 30 seconds. There is also a button that allows the user to reset the timer, preventing the method from being called for another 30 seconds. How can I make sure that the method does not get cal ...

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

While there are numerous similar questions on StackOverflow, none of them fully address all of my requirements in a single solution. Any assistance would be greatly appreciated. The Issue at Hand Within my React application, I am in need of a text box tha ...

Switching Font Family Option for Selection Mat in Angular Material

I'm currently working on changing the font of the options inside mat-select ("In what city were you born", etc). After some experimentation, I found that by setting ViewEncapsulation to none (allowing styles from other files to bleed in), I am able t ...

Inference of generic types within a TypeScript generic

In my coding journey, I came across a situation where I was dealing with generic classes. Specifically, I had a Generic class Generic<T> and another one called GenericWrap that used Generic as its maximum type parameter (denoted as U extends Generic& ...

Encountered an execution policy error while trying to run the "yo office" command in the Yeoman office add-in generator

I was eager to use Yeoman to develop an Office add-in with Angular. After successfully installing the necessary tools such as Node.js, Angular, Yeoman, and generator-office in PowerShell, I attempted to run the following code: yo office Unfortunately, I e ...

Discovering ways to retrieve the complete HTTP response in Angular to access certain response headers

In my angular app, I need to check for specific response headers to handle JWT validation. If a user tries to access a route that requires a valid JWT with an expired token, the back-end ASP.NET Core server will have a response header token-expired: true. ...

Hybrid angularjs and angular application faces issues as deployURL is removed in angular version 13, causing unexpected disruptions

UPDATED 7/6/2023 after realizing the issue is related to the hybrid nature of my application, not just angular upgrading. I have a hybrid app with both Angular and AngularJS components. Currently, all client files are built into a /client/ directory, with ...

What are some best practices for implementing pagination using Angular Material?

While following a tutorial by Muhi Masri on how to implement an Editable Dynamic Table using Angular Material Paginator (the tutorial can be found here, highly recommended), I encountered an issue where the paginator was not working as expected. Despite fo ...

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...

Attention: WARNING regarding the NEXTAUTH_URL in the Development Console

While working on my Next.js web application with next-auth for authentication, I came across a warning message in the development console. The message is related to reloading the environment from the .env.local file and compiling certain modules within the ...

What is the best way to disable the default date selection in the Angular Material datepicker?

Is there a way to prevent the default date from being selected in the angular material datepicker? By default, the datepicker selects the current date, but I would like to change this behavior. UPDATE: Just to clarify, I am looking for a solution that wil ...

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

The sorting feature is not performing as anticipated

I'm dealing with an array of objects fetched from the backend. When mapping and sorting the data in ascending and descending order upon clicking a button, I encountered some issues with the onSort function. The problem lies in the handling of uppercas ...

What is the method for assigning 'selective-input' to a form field in Angular?

I am using Angular and have a form input field that is meant to be filled with numbers only. Is there a way to prevent any characters other than numbers from being entered into the form? I want the form to behave as if only integer keys on the keyboard ar ...