michele pigmentolab
Posts: 3
Joined: Thu Feb 23, 2023 1:04 pm

show stock-tools angular 14

Hi!
I'm looking for a way to add the toolbar (stock-tools) to a simple stock chart, nothing fancy.
This is a little part of my code. Sadly, no toolbar can be found anywhere.

app.component.ts

Code: Select all

import { Component, OnInit, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_stock from 'highcharts/modules/stock'; HC_stock(Highcharts);
import HC_exporting from 'highcharts/modules/exporting'; HC_exporting(Highcharts);
import HC_accessibility from 'highcharts/modules/accessibility'; HC_accessibility(Highcharts);
import HC_map from 'highcharts/modules/map'; HC_map(Highcharts);
import HC_heikinashi from 'highcharts/modules/heikinashi'; HC_heikinashi(Highcharts);
import HC_hollowcandlestick from 'highcharts/modules/hollowcandlestick'; HC_hollowcandlestick(Highcharts);
import HC_offlineExporting from 'highcharts/modules/offline-exporting'; HC_offlineExporting(Highcharts);
import HC_stockTools from 'highcharts/modules/stock-tools'; HC_stockTools(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public Highcharts: typeof Highcharts = Highcharts;
  public chartOptions: Highcharts.Options = {};

  ngOnInit(): void {
    this.chartOptions = {
      series: [
        {
          type: "line",
          pointInterval: 24 * 3600 * 1000,
          data: [1, 2, 3, 4, 5]
        }
      ]
    };
  }

}


app.component.html

Code: Select all

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions"
  constructorType="stockChart" 
></highcharts-chart>


app.module.ts

Code: Select all

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HighchartsChartModule } from "highcharts-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


specs

Code: Select all

"dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "highcharts": "^10.3.3",
    "highcharts-angular": "^3.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: show stock-tools angular 14

Hi,

Welcome to our forum and thanks for contacting us with your question!

There is the demo below, I attached a working stock chart implementation with the stock tools.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if everything works as it should now
Best regards!
Dawid Draguła
Highcharts Developer
michele pigmentolab
Posts: 3
Joined: Thu Feb 23, 2023 1:04 pm

Re: show stock-tools angular 14

Thank you for the fast reply!
I can't use the code in that way: I have to work with angular 14.2 and not 15.1. The dependencies must coincide!

package.json

Code: Select all

"dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "highcharts": "^10.3.3",
    "highcharts-angular": "^3.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
},


And maybe it doesn't matter but I have to pass the Highcharts.Options in OnInit (or after that one callback) because the data will come form a parentComponent.

Thank you again,
Michele
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: show stock-tools angular 14

Hi,

Everything should also work in these versions. Did you remember to import the styles for stock tools as well? If you haven't, that may be why they don't show up.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Best regards!
Dawid Draguła
Highcharts Developer
michele pigmentolab
Posts: 3
Joined: Thu Feb 23, 2023 1:04 pm

Re: show stock-tools angular 14

Yes! That's what I was missing!

Code: Select all

@import 'highcharts/css/stocktools/gui.scss'
I didn't import the style.
Thanks for the help!
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: show stock-tools angular 14

You're welcome!
That's great to hear that everything works!

In case of any further questions, feel free to contact us again.
Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”