Home

Awesome

highcharts-ng

AngularJS directive for Highcharts

A simple Angularjs directive for Highcharts.

Examples

See example in ./example/charts/general-example.html (https://rawgit.com/pablojim/highcharts-ng/master/example/charts/general-example.html)

Also:

License

This library is available under the MIT license. However it and is a wrapper for Highcharts. Highcharts itself has an own license. So make sure to follow their license as well (https://github.com/highcharts/highcharts/blob/master/license.txt)

Note: You need to include the Highcharts library your self. It is not included in this repository.

Current Version

Needs Highcharts/Highstock >= 5.0.0

Only supports AngularJS >= 1.5.8

Configuration Format is not compatible with highcharts-ng 0.x.0

Setup:

Install with npm:

npm install highcharts-ng

or with bower:

bower install highcharts-ng --save

Add highcharts as project dependency with npm

npm install highcharts

or with bower:

bower install highcharts --save

Add references to Highcharts/Highstocks:

<script src="http://code.highcharts.com/stock/highstock.src.js"></script>

or

<script src="http://code.highcharts.com/highcharts.src.js"></script>

Add Highcharts to your Angular app config:

var myapp = angular.module('myapp', ["highcharts-ng"]);

(optional) if you have some problems with resizing the chart to screen size, include the highcharts-ng css file

<link href="dist/highcharts-ng.css" rel="stylesheet">

Make a chart!

<highchart id="chart1" config="chartConfig"></highchart>

The chartConfig object should be the same as a normal highcharts configuration. Any options that work in highcharts should work here also. To use highstock charts, you just need to add chartType: 'stock' to your chartConfig.

It is Highly Recommended to give all Series and Axes a distinct ID.

All properties on the chart configuration are optional. If you don't need a feature best to leave it out completely - Highcharts will usually default to something sensible. Each property is watched for changes by angularjs.

After construction the Highcharts Chart object can be accessed with chartConfig.getChartObj(). This is a simple way to access all the Highcharts API that is not currently managed by this directive. See the JSFiddle basic example to see how this is used to call the print function of Highcharts.

Sometimes it could make sense to create an entire new Highcharts Chart instead of updating the previous one. For this to happen, you need to pass an entire new chart configuration object to the component instead of updating the previous configuration object. (See example section above)

If you know the chart data is not going to change, you can disabled the changeDetection to improve performance. This can be done with the attribute disable-change-detection="true". However this really only affects charts with huge data sets. (See example section above)

Features:

Features Not Supported that were previously supported:

Caveats:

FAQ:

This version is much much simpler and should be more stable. Some features however are still to be implemented e.g. 2-way binding to axes and loading functionality

You can use config.getChartObj. 95% of the time you should not need this and should instead change the chartConfig instead.

Be careful - if you manually change something with the chart object that is also in the chartConfig the chart and the config may end up out of sync.

Since 1.0.0, vanilla Highcharts objects are supported!

Versions

Version 1.2.1

Fixes https://github.com/pablojim/highcharts-ng/issues/592

Version 1.2.0

Remove explicit dependency on Highcharts due to licensing concerns and also allows user to choose between Highcharts and Highstocks.

Thanks to @ngehlert and others for their contributions.

Version 1.1.0

Now has explicit dependency on highcharts.js.

Version 1.0.1

Version 1.0.0

Version 0.0.13

Version 0.0.12

Version 0.0.11

Version 0.0.10

Version 0.0.9

Version 0.0.8

Version 0.0.7

Version 0.0.6

Version 0.0.5

Version 0.0.4

Version 0.0.3

Version 0.0.2

Version 0.0.1 (not compatible with current version)

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

See an example here: http://jsfiddle.net/pablojim/46rhz/

Build Status