0

I want to access highstock rangeSelector button event inside my angular component.I am using the angular2-highcharts package to use the highcharts library. Tried to access it using the (afterSetExtremes) binding but without any success. The code is here. Please help.

Thanks!!

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
Arjun Singh
  • 677
  • 6
  • 18
  • I see that in your demo you use `rangeSelector.buttons[index].events.click` property. Isn't applying it to all the buttons the solution that you're looking for (http://jsfiddle.net/kkulig/qq8uzs6a/)? Or maybe you want to catch some events other then click? – Kamil Kulig Dec 22 '17 at 11:05
  • Actually I put it there to test but, I am not able to get it work event the one where I have put it. – Arjun Singh Dec 23 '17 at 10:51
  • It seems to be a bug. `rangeSelector.buttons[index].events.click` works fine in pure Highcharts (http://jsfiddle.net/kkulig/7c092cha/) but it doesn't when using the wrapper: (http://plnkr.co/edit/byYtdXJBzRR2eAeS8CiZ?p=preview). **angular2-highcharts** is not an official Highcharts wrapper so you should inform its creator about this issue or report it on github. – Kamil Kulig Dec 26 '17 at 07:43
  • Yeah will do that. Thanks. – Arjun Singh Dec 26 '17 at 08:11

2 Answers2

0

Update your template as

template: `
  <chart type="StockChart" [options]="options" (click)="onClick($event)">
  </chart>
`,

function 

onClick(e) {
  console.log('You clicked '+e.toElement.innerHTML+" button")
}

Plunker demo

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • thanks for the comment but, it looks little hackish. I was hoping to tap the events provided by highchart.js library. – Arjun Singh Dec 21 '17 at 17:40
  • It's not hackish as you say check [doc](https://www.npmjs.com/package/angular2-highcharts#chart-events) how event are captured. If you want to do that in highcharts js then use it's npm not angular2 highcharts npm – Deep 3015 Dec 21 '17 at 18:11
  • ohkk, I will try this out. Thanks for the help. – Arjun Singh Dec 26 '17 at 08:16
0

Check TypeScript highcharts version installation and implementation below.

stackblitz Demo

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, ViewChild, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts/highstock';
import { Jsonp, JsonpModule } from '@angular/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  name = 'Angular 5 Highstock';
  @ViewChild("container", { read: ElementRef }) container: ElementRef;

  constructor(jsonp: Jsonp) {
    jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {


      Highcharts.stockChart(this.container.nativeElement, {
        rangeSelector: {
          buttons: [{
            type: 'month',
            count: 1,
            text: '1m',
            events: {
              click: function (e) {
                console.log('button clickd');
              }
            }
          }, {
            type: 'month',
            count: 3,
            text: '3m'
          }, {
            type: 'month',
            count: 6,
            text: '6m'
          }, {
            type: 'ytd',
            text: 'YTD'
          }, {
            type: 'year',
            count: 1,
            text: '1y'
          }, {
            type: 'all',
            text: 'All1'
          }]
        },
        chart: {
          zoomType: 'x'
        },
        series: [{
          name: 'AAPL',
          data: res.json(),
          tooltip: {
            valueDecimals: 2
          }
        }],
        xAxis: {
          events: {
            afterSetExtremes: (e) => {
              // console.log(e);
              // this.button = e.rangeSelectorButton.count;

            }
          }
        },
      })
    })
  }
}
Deep 3015
  • 9,929
  • 5
  • 30
  • 54