npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kiwigrid/ngx-highcharts

v0.6.1

Published

Highcharts for your Angular2 project

Downloads

19

Readme

@kiwigrid/ngx-highcharts

This is a fork based on https://github.com/gevgeny/angular2-highcharts

Highcharts chart components for Angular apps. 👉 Live Demo

build npm version Maintenance David

Table of Contents

Setting Up

Install @kiwigrid/ngx-highcharts

npm install @kiwigrid/ngx-highcharts --save

Setup App @NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from '@kiwigrid/ngx-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: {
  ...
  '@kiwigrid/ngx-highcharts': 'node_modules/@kiwigrid/ngx-highcharts',
  'highcharts': 'node_modules/highcharts',
}
...
packages: {
  ...
  highcharts: {
    main: './highcharts.js',
    defaultExtension: 'js'
  },
  '@kiwigrid/ngx-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 @kiwigrid/ngx-highcharts via the options property of the chart component. But it is not an angular way to handle events like this. So that @kiwigrid/ngx-highcharts provides EventEmitter<ChartEvent> wrappers for highcharts events. ChartEvent is an @kiwigrid/ngx-highcharts 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

@kiwigrid/ngx-highcharts 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

Tooltip Formatter for Chart Object

angular2-higcharts provides possibility to override the native highcharts tooltip formatter (instead of using the highcharts callback)

@Component({
    selector: 'my-app',
    directives: [CHART_DIRECTIVES],
    template: `
      <chart [options]="options"
             [tooltipFormatter]="formatter">
      </chart>
    `
})
class AppComponent {
    constructor() {
        this.options = {
          chart: { type: 'spline' },
          title: { text : 'dynamic data example'}
          series: [{ data: [2,3,5,8,13] }]
        };
    }
    chart : Object;
    options: Object;
    formatter: (point) {
        return `x: point.x y: point.y`
    }
}

👉 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 @kiwigrid/ngx-highcharts is just a thin wrapper of the [Highcharts](http:/ /www.highcharts.com/) 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 @kiwigrid/ngx-highcharts provides you access to the original chart object.

License

MIT @ Eugene Gluhotorenko MIT @ Kiwigrid