sebas0205
Posts: 3
Joined: Tue Mar 10, 2020 12:13 am

GUI options in Angular

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 :

Code: Select all

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 :

Code: Select all

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

Graph options :

Code: Select all

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 :

Code: Select all

"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
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: GUI options in Angular

Hi,
Thanks for contacting us with your question.

This probably isn't work because you have miss the letter in the module.
I share working demo with GUI options in Angular.

Demo:
https://stackblitz.com/edit/highcharts- ... -stock-gui

Let me know if that working for you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”