Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    angular2-highcharts
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.5¬†‚Äʬ†Public¬†‚Äʬ†Published

    angular2-highcharts

    Highcharts chart components for Angular apps. ūüĎČ Live Demo

    build npm version npm dependencies npm downloads

    Table of Contents

    Setting Up

    Install angular2-highcharts

    npm install angular2-highcharts --save
    

    Setup App @NgModule

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ChartModule } from 'angular2-highcharts';
    import { App } from './App';
     
    @NgModule({
        imports: [
          BrowserModule, 
          ChartModule.forRoot(require('highcharts')
        ],
        declarations: [App],
        bootstrap: [App]
    })
    export class AppModule {}

    For angular-cli and other Webpack environments

    No any additional setup needed

    For SystemJS environment

    You should add appropriate mapping to your systemjs.config.js

    ...
    map: {
      ...
      'angular2-highcharts': 'node_modules/angular2-highcharts',
      'highcharts': 'node_modules/highcharts',
    }
    ...
    packages: {
      ...
      highcharts: {
        main: './highcharts.js',
        defaultExtension: 'js'
      },
      'angular2-highcharts': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }

    Usage

    Basic Usage

    Create First Chart Component

    Main charts functionality provided by the chart component and its options property.

    import { Component } from '@angular/core';
     
    @Component({
        selector: 'simple-chart-example',
        template: `
            <chart [options]="options"></chart>
        `
    })
    export class App {
        constructor() {
            this.options = {
                title : { text : 'simple chart' },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2],
                }]
            };
        }
        options: Object;
    }

    ūüĎČ Live Demo

    Handling Events

    Highcharts itself provides bunch of events, and you still can use them with angular2-higcharts via the options property of the chart component. But it is not an angular way to handle events like this. So that angular2-higcharts provides EventEmitter<ChartEvent> wrappers for highcharts events. ChartEvent is an angular2-higcharts class which simply wraps original Highcharts events (chartEvent.originalEvent) and adds event handler context (chartEvent.context) since it differs depending on events.

    Chart Events

    All the events from the options.chart.events are available as output properties of the chart component.

    <chart [options]="options" (selection)="onChartSelection($event)"> </chart>
    onChartSelection (e) {
      this.from = e.originalEvent.xAxis[0].min.toFixed(2);
      this.to = e.originalEvent.xAxis[0].max.toFixed(2);
    }

    ūüĎČ Live Demo

    Series Events

    To use series events the same way you need to add the series component as a child of your chart. The only purpose of this auxiliary component is to provide access to options.plotOptions.series.events API

    <chart [options]="options">
        <series (mouseOver)="onSeriesMouseOver($event)">
        </series>
    </chart>
    <p><b>{{serieName}}</b> is hovered<p>
    onSeriesMouseOver (e) {
      this.serieName = e.context.name;
    }

    ūüĎČ Live Demo

    Point Events

    Similary you can use the point to access to options.plotOptions.series.point.events API.

    <chart [options]="options">
        <series>
            <point (select)="onPointSelect($event)"></point>
        </series>
    </chart>
    <p><b>{{point}}</b> is selected<p>

    ūüĎČ Live Demo

    Axis Events

    Similary you can use the xAxis or yAxes to access to options.xAxis.events or options.yAxis.events API.

    <chart [options]="options">
         <xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>
         <yAxis (afterSetExtremes)="onAfterSetExtremesY($event)"></yAxis>
    </chart>
    <p>{{minX}} - {{maxX}}<p>
    <p>{{minY}} - {{maxY}}<p>
    onAfterSetExtremesX (e) {
      this.minX = e.context.min;
      this.maxX = e.context.max;
    }
    onAfterSetExtremesY (e) {
      this.minY = e.context.min;
      this.maxY = e.context.max;
    }

    ūüĎČ Live Demo

    Dynamic Interaction with Chart Object

    angular2-higcharts provides possibility to interact with native HighchartsChartObject chart object.

    @Component({
        selector: 'my-app',
        directives: [CHART_DIRECTIVES],
        template: `
          <chart [options]="options" 
                 (load)="saveInstance($event.context)">
          </chart>
        `
    })
    class AppComponent {
        constructor() {
            this.options = {
              chart: { type: 'spline' },
              title: { text : 'dynamic data example'}
              series: [{ data: [2,3,5,8,13] }]
            };
            setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 1000);
        }
        chart : Object;
        options: Object;
        saveInstance(chartInstance) {
            this.chart = chartInstance;
        }
    }

    ūüĎČ Live Demo

    Highstock

    <chart type="StockChart" [options]="options"></chart>
    

    Also you need to change your @NgModule setup.

    ...
    @NgModule({
        ...
        imports: [
          BrowserModule, 
          ChartModule.forRoot(
    -       require('highcharts')
    +       require('highcharts/highstock')
          )
        ]
    })

    ūüĎČ Live Demo

    Highmaps

    <chart type="Map" [options]="options"></chart>
    

    Also you need to change your @NgModule setup.

    ...
    @NgModule({
        ...
        imports: [
          BrowserModule, 
          ChartModule.forRoot(
    -       require('highcharts')
    +       require('highcharts/highmaps')
          ],
    })

    ūüĎČ Live Demo

    Add Highcharts Modules

    Any other modules like highcharts-3d, highcharts-exporintg and etc. can be also added in @NgModule after main chart module

    ...
    @NgModule({
        ...
        imports: [
          BrowserModule, 
          ChartModule.forRoot(
            require('highcharts'),
    +       require('highcharts/highchart-3d'),
    +       require('highcharts/modules/exporting')
          ],
    })

    Check out structure of the node-modules/highcharts folder to find necessary module.

    ūüĎČ Live Demo

    Access to the Highcharts Static API

    ...
    const Highcharts = require('highcharts');
     
    Highcharts.setOptions({
      colors: ['#50B432']
    });
     
    @NgModule({
        ...
        imports: [
          BrowserModule, 
          ChartModule.forRoot(
    -       require('highcharts'),
    +       Highcharts,
          ],
    })

    ūüĎČ Live Demo

    More Examples

    Here are some common charts examples with Webpack integration https://github.com/gevgeny/angular2-highcharts/tree/master/examples/webpack

    FAQ

    Why don't my series, title, axes and etc redraw after I update initial options ?

    Because angular-highcharts is just a thin wrapper of the Highcharts library and doesn't bind to initial options. I understand that you expect more angular-way behaviour like data binding with appropriate redrawing. But it is barely possible to implement it without redundant complications and performance decrease because almost all options can be dynamic. So my idea was to avoid any additional logic more than just a sugar (like events for series and options). In the other hand Highcharts has great API for dynamic manipulations with chart and angular-highcharts provides you access to the original chart object.

    License

    MIT @ Eugene Gluhotorenko

    Install

    npm i angular2-highcharts

    DownloadsWeekly Downloads

    4,592

    Version

    0.5.5

    License

    MIT

    Last publish

    Collaborators

    • avatar