pixie-highcharts v2.0.5

Pixie Highcharts

pixie-highcharts is a wrapper of the highcharts and apply two-way data-binding of the option like series, tooltip, color, xAxis, yAxis, navigator, range selector, and etc. pixie-highcharts is breaking down the option into data, type, xAxis, colors, navigator, tooltips as Input and events as EventEmitter. Its use to avoid any additional logic and make your life easy just input and visualize. pixie-highcharts support for dynamic manipulations, event action and provides developer access to the original chart object.

Table of Contents

• Installation
• Environment
• Getting started
  • Setup App @NgModule
• Options
• Events
  • Chart Events
  • Series Events
  • Point Events
  • Axis Events
  • ColorAxis Events
  • Navigation Events
• Members
• Global Variable and Class for Pixie Highcharts
  • GlobalPXH
  • Export
  • Title
• Highstock
• Highmaps
• Highcharts Static API
• Contributing
• License

Installation

NPM

npm install pixie-highcharts highcharts --save

Yarn

yarn add pixie-highcharts highcharts

Environment

Minimum Software Version Requirement

• node v6.16.0+
• npm 4.6.1+
• @angular/cli 1.7.6+

Getting started

Setup App @NgModule

Import PixieHighchartsModule into your @NgModule in app.module.ts

// File: app.module.ts
import { PixieHighchartsModule } from 'pixie-highcharts';

@NgModule({
  imports: [PixieHighchartsModule.forRoot(require('highcharts'))]
})
export class AppModule {}

Let Start With Basis Hello World's Highcharts Visualization

📈 Hello World Demo

HTML

<pixie-highcharts
  [type]="type"
  [zoomType]="zoomType"
  [data]="data"
  [xAxis]="xAxis"
  [yAxis]="yAxis"
  [footer]="footer"
  [colors]="color"
  [tooltip]="tooltip"
  [export]="exporting"
  [config]="config"
  [isStacked]="true"
>
</pixie-highcharts>

TypeScript

export class AppComponent {
  type = 'bar';
  zoomType = 'x';
  data = [
    {
      name: 'OMAK-C',
      data: [
        { x: 1512691300000, y: 2.787037037037037, equipmentName: 'OMAK-C' },
        { x: 1512691400000, y: 61.638888888888886, equipmentName: 'OMAK-C' },
        { x: 1512691500000, y: 56.97222222222222, equipmentName: 'OMAK-C' },
        { x: 1512692200000, y: 67.7962962962963, equipmentName: 'OMAK-C' },
        { x: 1512693200000, y: 58.2037037037037, equipmentName: 'OMAK-C' }
      ]
    }
  ];
  xAxis = { title: { text: 'Sample X-Axis' }, type: 'category' };
  yAxis = { title: { text: 'Sample Y-Axis' } };
  footer = 'Sample Footer';
  color = ['rgb(0, 255, 255)', 'rgb(246, 107, 0)', 'rgb(115, 211, 44)', 'rgb(227, 2, 42)', 'rgb(23,119,25)'];
  tooltip = {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table style="margin-bottom:unset">',
    pointFormat:
      '<tr><td style="color:{series.color};padding:0">{series.name}</td>' +
      '<td style="padding:0"> : </td>' +
      '<td style="padding:0"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    xDateFormat: '%A, %b %d, %Y',
    shared: true,
    useHTML: true
  };
  exporting = { title: 'Volume', filename: 'Volume', scale: 3 };
  config = { legend: { borderWidth: 0, borderRadius: 0, itemMarginTop: 0, padding: 0 } };
}

📊 Live Demo

Options

Events

Highcharts provides bunch of events, and you can use option method to handle those events, but it is not common angular way to handle events. So that pixie-highcharts provides EventEmitter<ChartEvent> wrappers for highcharts events. ChartEvent is an class which simply wraps original Highcharts events (chartEvent.originalEvent) and adds event handler context (chartEvent.context) since it differs depending on events. Concept of Handling events is learning from angular2-highcharts and enhancement made in pixie-highcharts. Thanks for angular2-highcharts founder.

Chart Events

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

<pixie-highcharts (selection)="onChartSelection($event)"></pixie-highcharts>

<p>Selection area from <b>{{from}}</b> to <b>{{to}}</b></p>

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 pixie-highcharts. The only purpose of this auxiliary component is to provide access to plotOptions.series.events API

<pixie-highcharts>
  <series (legendItemClick)="onLegendClick($event)"></series>
</pixie-highcharts>
<p><b>{{serieName}}</b> is clicked</p>

onLegendClick (e) {
  this.serieName = e.context.name;
}

📊 Live Demo

Point Events

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

<pixie-highcharts>
  <series>
    <point (click)="onPointClick($event)"></point>
  </series>
</pixie-highcharts>
<p><b>{{point}}</b> is clicked</p>

📊 Live Demo

Axis Events

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

<pixie-highcharts>
  <xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>
  <yAxis (afterSetExtremes)="onAfterSetExtremesY($event)"></yAxis>
  <zAxis (afterSetExtremes)="onAfterSetExtremesZ($event)"></zAxis>
</pixie-highcharts>
<p>ExtremesX: <b>{{minX}}</b> - <b>{{maxX}}</b></p>
<p>ExtremesY: <b>{{minY}}</b> - <b>{{maxY}}</b></p>
<p>ExtremesZ: <b>{{minZ}}</b> - <b>{{maxZ}}</b></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;
}

onAfterSetExtremesZ (e) {
  this.minZ = e.context.min;
  this.maxZ = e.context.max;
}

📊 Live Demo

ColorAxis Events

Similary you can use the colorAxis to access to colorAxis.events API.

<pixie-highcharts>
  <colorAxis (legendItemClick)="onLegendClick($event)"></colorAxis>
</pixie-highcharts>
<p><b>{{colorLegend}}</b> is clicked</p>

📊 Live Demo

Navigation Events

Similary you can use the navigation to access to navigation.events API.

Members

Chart instance. You can call load methods to get the instance. Highcharts.Chart

<pixie-highcharts (load)="onLoad($event)"> </pixie-highcharts>

onLoad (e) {
  this.chartInstance = e;
}

📊 Live Demo

Localization

Currently, highcharts doesn't provide localization for the language you wish to display. Right now, pixie-highcharts supporting localization.

import { LocaleService } from 'pixie-highcharts';

export class Component implements OnInit {
  constructor(private localeService: LocaleService) {
    this.localeService.setLocale('zh');
  }
}

Current word support for localization is resetZoom, noDataAvailable, months[], shortMonths[], weekdays[] in Localization File

Global Variable and Class for Pixie Highcharts

For normal way to generate highcharts visualization, you required to declare style, tooltips, exporting, datetime format, and url again and again for the options. For pixie-highcharts you no need to declare repeatedly.

import * as hc from 'highcharts';
// OR
const hc = require('highcharts');

const globalPXH: GlobalPXH = {};
const exportPXH: Export = {};

// Declare Global Variable for Each COnfig
exportPXH.theme = {
  chart: {
    backgroundColor: '#23232A',
    spacingTop: 10,
    style: { fontFamily: 'Arial', color: '##FFF' }
  }
};
exportPXH.filename = 'Pixie Highcharts';
globalPXH.export = exportPXH;

globalPXH.url = 'https://github.com/briankpw/pixie-highcharts';
globalPXH.debug = true;

// Assign globalPXH to Highcharts
hc.globalPXH = globalPXH;

GlobalPXH

const defaultTooltip = {
  headerFormat: '<span style="font-size:10px">{point.key}</span><table style="margin-bottom:unset">',
  pointFormat:
    '<tr><td style="color:{series.color};padding:0">{series.name}</td>' +
    '<td style="padding:0"> : </td>' +
    '<td style="padding:0"><b>{point.y}</b></td></tr>',
  footerFormat: '</table>',
  useHTML: true
};

const defaultDateTime = {
  millisecond: '%H:%M:%S.%L',
  second: '%H:%M:%S',
  minute: '%H:%M',
  hour: '%H:%M',
  day: '%b %e',
  week: '%b %e',
  month: '%b, %y',
  year: '%y'
};

Export

Title

Highstock

<pixie-highcharts [isStock]="true"></pixie-highcharts>

Don't forget, You need to update @NgModule in app.module.ts

// File: app.module.ts
...
@NgModule({
  imports: [
    PixieHighchartsModule.forRoot(
    require('highcharts'),
    require('highcharts/modules/stock'))
  ]
})
...

📊 Live Demo

Highmaps

<pixie-highcharts [isMap]="true"></pixie-highcharts>

Don't forget, You need to update @NgModule in app.module.ts

// File: app.module.ts
...
@NgModule({
  imports: [
    PixieHighchartsModule.forRoot(
    require('highcharts'),
    require('highcharts/modules/map'))
  ]
})
...

Highcharts Static API

import { PixieHighchartsModule, HighchartsStatic } from 'pixie-highcharts';

...
export function highchartsFactory() {
  const hc = require('highcharts');
  const hs = require('highcharts/modules/stock');
  const exp = require('highcharts/modules/exporting');
  const expd = require('highcharts/modules/export-data');

  hs(hc);
  exp(hc);
  expd(hc);

  return hc;
}

...
@NgModule({
  imports: [PixieHighchartsModule],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
  ]
})
...

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT @ Brian Koh Ping Weng