CODEWITHSUNDEEP
angularhighcharts
sebas0205
sebas0205

Reputation: 113

Highchart Stock gui does not work in Angular 8

I'm trying to make a graph with Highchart stock in Angular 8. I want to add "FullScreen" button so I did the following :

In my component I imported required modules :

import * as Highcharts from "highcharts/highstock";
import * as HStockTools from "highcharts/modules/stock-tools";
import * as HFulScreen from "highcharts/modules/full-screen";


HFulScreen(Highcharts)
HStockTools(Highcharts)

In my CSS file I added :

@import "https://code.highcharts.com/css/stocktools/gui.css";
@import "https://code.highcharts.com/css/annotations/popup.css";

Graph options :

stockTools: {
    gui: {
      buttons: [ 'fullScreen', 'separator', 'saveChart' ]
    }
  },
  chart: {
      height : "600px"
  },
  tooltip: {
    shared: true ,
    split :false
  },
  credits: {
    enabled: false
  },
  yAxis: [{
    labels: {
      align: 'left'
    },
    height: '60%',
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'left'
    },
    top: '60%',
    height: '20%',
    offset: 0
  }, {
    top: '80%',
    height: '20%'
  }],

  series: [{
    type: 'line',
    id: 'activa-ohlc',
    name: 'AAPL Stock Price',
    data: "ohlc"
  }, {
    type: 'column',
    id: 'aapl-volume',
    name: 'AAPL Volume',
    data: "volume"
  }],

Package.json with Highchart's version :

"highcharts": "^8.0.3",
"highcharts-angular": "^2.4.0",

But I'm getting this error :

ERROR in ../node_modules/highcharts/modules/full-screen.d.ts:17:21 - error TS2304: Cannot find name 
'Fullscreen'.

17         fullscreen: Fullscreen;

I don't know if I'm doing something wrong.

Thanks for your help

Upvotes: 0

Views: 457

Answers (1)

Mateusz Kornecki
Mateusz Kornecki

Reputation: 775

I found a similar issue reported on the highcharts-angular repository.

https://github.com/highcharts/highcharts-angular/issues/259#issuecomment-762787358

It looks like the Fullscreen module requires the Exporting module so to fix the problem you could try importing & initializing the Exporting module.

import HC_exporting from 'highcharts/modules/exporting';
import HC_FullScreen from 'highcharts/modules/full-screen';

HC_exporting(Highcharts);
HC_FullScreen(Highcharts);

Hope that solves your problem. If the following solution won't help please recreate the issue in an online editor, so I can check what is not working or what could be done.

Upvotes: 1

Related Questions