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
- Dependencies
- Installation
- Environment
- Getting started
- Options
- Events
- Members
- Global Variable and Class for Pixie Highcharts
- Highstock
- Highmaps
- Contributing
- License
Dependencies
pixie-highcharts | Angular |
---|---|
latest | 8.x / 7.x / 6.x |
1.2.1 | 5.x |
Installation
NPM
npm install pixie-highcharts highcharts --save
Yarn
yarn add pixie-highcharts highcharts
Environment
Minimum Software Version Requirement for Angular 5
- node v6.16.0+
- npm 4.6.1+
- @angular/cli 1.7.6+
Getting started
Setup App @NgModule
Import PixieHighchartsModule & HighchartsStatic into your @NgModule in app.module.ts
// File: app.module.ts
import { PixieHighchartsModule, HighchartsStatic } from 'pixie-highcharts';
export function highchartsFactory() {
const hc = require('highcharts');
const hs = require('highcharts/modules/stock'); // for highstock
const exp = require('highcharts/modules/exporting'); // for export as image & pdf
const expd = require('highcharts/modules/export-data'); // for export data like csv
hs(hc);
exp(hc);
expd(hc);
return hc;
}
...
@NgModule({
imports: [PixieHighchartsModule],
providers: [
{
provide: HighchartsStatic,
useFactory: highchartsFactory
}
]
})
...
Let Start With Basis Hello World's Highcharts Visualization
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 } };
}
Options
Input | Class | Default Value | Reference |
---|---|---|---|
id | String | 5 Digit of ID will generated if no Input | |
type | String | chart.type | |
zoomType | String | chart.zoomType | |
title | Object | ||
xAxis | Object | xAxis | |
yAxis | Object | yAxis | |
zAxis | Object | zAxis | |
tooltip | Object | tooltip | |
export | Export | ||
colors | Array<String>
|
||
colorAxis | Object | colorAxis | |
footer | String | ||
data | Array<any>
|
series | |
config | Object | Additional Highcharts Option/Object not exist in Pixie Highcharts | |
isLegend | Boolean | True | T-Enable Legend, F-Disable Legend |
isUTC | Boolean | False | T-UTC+[Based on Browser UTC], F-UTC+0 |
isPolar | Boolean | False | T-Polar Shape like Radar |
isBoost | Boolean | False | T-Boost the Chart |
isBoostDebug | Boolean | False | T-Debug of the boost mode boost.debug |
isTooltipMoved | Boolean | True | T-Tooltip Will Move Based on the Cursor |
isAnimation | Boolean | True | T-Animation will Animate (Load & Update) |
isInactive | Boolean | True | T-Disable Inactive State (When Hover on Series Point, Its Won't Disable The Point) |
isGap | Boolean | True | T-Gap Size Between Each Point : Display a Gap in the Graph |
gapSize | Number | 86400000 @ 1 Day | Day-To-Day Disconnected |
gapUnit | String | value | |
isPointRange | Boolean | False | T-Each Point Wont Have the Hours Based on pointRange Set |
pointRange | Number | 86400000 @ 1 Day | Day-To-Day Connected |
isAxisPrefix | Boolean | False | T-Active Conversation Metric Prefix Table |
axisPrefixFloat | Number | 2 | |
isStock | Boolean | False | T-Enable Stock Chart Highstock is required
|
isMap | Boolean | False | T-Enable Map Chart Highmaps or map module is required
|
isStacked | Boolean | False | T-Enable Stack Chart for Bar, Column, Line, etc |
isGroup | Boolean | False | T-Enable Group Chart for Bar, Column, Line, etc |
rangeSelector | Object | rangeSelector | |
isRangeSelector | Boolean | True | T-Enable Range Selector, F-Disable Range Selector |
isRangeInput | Boolean | False | T-Enable Range Input, F-Disable Range Input |
navigator | Object | navigator | |
navigatorData | Object | navigator.series | |
isXScrollbar | Boolean | False | T-Enable xAxis Scrollbar, F-Disable xAxis Scrollbar |
isYScrollbar | Boolean | False | T-Enable yAxis Scrollbar, F-Disable yAxis Scrollbar |
referenceUpdate | Boolean | False | T-Enable Options Update, F-New Options Object Created when Update |
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);
}
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;
}
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>
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;
}
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>
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;
}
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
Input | Class | Default Value | Reference |
---|---|---|---|
standardTooltipDesign | Object | Below defaultTooltip |
|
dateTimeLabelFormats | Object | Below defaultDateTime |
xAxis.dateTimeLabelFormats |
sameLegendSymbol | Boolean | False | T-All legend will fixed column legend symbol |
legendPosition | String | top | legend.verticalAlign |
url | String | Footer URL | |
export | Export | Export | |
debug | Boolean | False | T-Turn on Debug (View compile options, error, and etc) |
debugStringify | Boolean | False | T-Turn on Debug with stringify output |
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
Input | Class | Default Value | Reference |
---|---|---|---|
title | String | Export title if null , default chart title will be consider |
|
subtitle | String | Export subtitle if null , default chart title will be consider |
|
filename | String | ||
width | Number | 600 | exporting.sourceWidth |
height | Number | 800 | exporting.sourceHeight |
scale | Number | Automated adjust export resolution for image and pdf | |
url | String | exporting.url | |
theme | Object | exporting.chartOptions | |
enabled | Boolean | True | T-Turn on exporting button |
fallbackToExportServer | Boolean | True | T-Fallback to export server if offline exporting failure |
customExport | Boolean | False | Flag for custom Highcharts event, function, any (Custom Script) |
clearDefaultField | Boolean | False | Flag for clear default series rows/columns data (Custom Script) |
args | Any | Any value for custom exporting |
Title
Input | Class |
---|---|
title | String |
subtitle | String |
Highstock
<pixie-highcharts [isStock]="true"></pixie-highcharts>
Don't forget, You need to include Highstock at @NgModule in app.module.ts
Highmaps
<pixie-highcharts [isMap]="true"></pixie-highcharts>
Don't forget, You need to include Highmaps at @NgModule in app.module.ts
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