gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
379 stars 113 forks source link

using annotation in chart #239

Open thaison316 opened 7 years ago

thaison316 commented 7 years ago

Have anyone able to use annotation within charts like one of these: I looked around, when not using angular, they said we need the annotation.js but can't figure out if this is part of this lib or not. Please help.

//http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/annotations/basic/ //http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-on-chart/

patrickoneill46 commented 6 years ago

I'm facing the exact same issue. I'm configuring the annotations property according to high charts docs but I don't get any annotations in my chart nor do i get an error

mgpGit-zz commented 6 years ago

Hey There -

I was able to get this working after finding the right syntax to enable Annotations.

I am running angular=4.4.7 / angular2-highcharts=0.5.5 / highcharts=6.1.1

In your app.module or module you want to start using annotations add the following...

import { ChartModule  } from 'angular2-highcharts';
import * as Highcharts from 'highcharts';   //  *** NEW ***
import * as Annotations from 'highcharts/modules/annotations.src';   //  *** NEW ***
...
export class AppModule {
  constructor() {
    Annotations(Highcharts);      //  *** NEW ***
  }
}

At this point you have enabled the ability to add "annotations". Like the jsFiddle example, make sure to put the "id" in the series element.

Good luck!

thaison316 commented 6 years ago

Ty, any chance you can provide a full example?

thanks