0

I am using angular2-highcharts chart module for my angular2 web application.

When graph < 7000 points, the line and points display as intended. However, after ~>7000 points, the graph sometimes does not render a line, but if I hover over the graph, the tooltip for the points are shown.

I tried turboThreshold, but it does not do anything.

Any suggestions?

Unrendered Line Graph with tooltip shown

--- 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",
};
Manish Balodia
  • 1,863
  • 2
  • 23
  • 37
Mocha
  • 2,035
  • 12
  • 29
  • Does the code throw any errors? Have you tried using the **boost module** (https://www.highcharts.com/docs/advanced-chart-features/boost-module)? – Kamil Kulig Jan 12 '18 at 13:05
  • Code does not throw any errors. I cannot find anywhere how to use boost module with Angular2 (non-react). I found that if I zoom in, I could see the graph. Is it possible the time range is too large for the graph to display? – Mocha Jan 12 '18 at 23:53
  • angular2-highcharts is not an official wrapper and it's possible that it doesn't support boost module (you should check that). You can also try the official angular wrapper: https://www.npmjs.com/package/highcharts-angular (it's not reported that this problem occurs while using it). – Kamil Kulig Jan 15 '18 at 08:20
  • Hm, I am trying to install it, but whenever I npm install highcharts, it removes the highcharts/highcharts-angular node module – Mocha Jan 16 '18 at 05:55
  • The documentation says that you have to import Highcharts frist. Have you tried to do `npm install highcharts` and after that `npm instal highcharts-angular`? – Kamil Kulig Jan 16 '18 at 10:05
  • Yes -- I get this warning "WARNING in ./node_modules/highcharts-angular/node_modules/@angular/core/esm5/core.js 6561:15-102 Critical dependency: the request of a dependency is an expression".. All I did was npm install highcharts, npm highcharts/highcharts-angular, import HighchartsChartComponent in app.module and declared it in @NgModule ( I feel like this problem should open another question??) – Mocha Jan 16 '18 at 18:38
  • Please create an issue on github: https://github.com/highcharts/highcharts-angular/issues – Kamil Kulig Jan 17 '18 at 08:28

1 Answers1

0

angular2-highcharts is not an official Highcharts wrapper and it's possible that it doesn't support boost module.

You can also try the official angular wrapper: https://www.npmjs.com/package/highcharts-angular (it's not reported that this problem occurs while using it).

Kamil Kulig
  • 5,756
  • 1
  • 8
  • 12