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"
}