highcharts-ng
Advanced tools
AngularJS directive for Highcharts
A simple Angularjs directive for Highcharts.
Google Group: https://groups.google.com/forum/#!forum/highcharts-ng
Setup:
Install with npm:
npm install highcharts-ng
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"]);
Make a chart!
<highchart id="chart1" config="chartConfig"></highchart>
Warning: The chartConfig object is slightly different than the default Highcharts config object. ( Please see the FAQ below for details )
The chartConfig attribute mentioned above resembles an exploded Highcharts options object:
//This is not a highcharts object. It just looks a little like one!
var chartConfig = {
options: {
//This is the Main Highcharts chart config. Any Highchart options are valid here.
//will be overriden by values specified below.
chart: {
type: 'bar'
},
tooltip: {
style: {
padding: 10,
fontWeight: 'bold'
}
}
},
//The below properties are watched separately for changes.
//Series object (optional) - a list of series using normal Highcharts series options.
series: [{
data: [10, 15, 12, 8, 7]
}],
//Title configuration (optional)
title: {
text: 'Hello'
},
//Boolean to control showing loading status on chart (optional)
//Could be a string if you want to show specific loading text.
loading: false,
//Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled.
//properties currentMin and currentMax provided 2-way binding to the chart's maximum and minimum
xAxis: {
currentMin: 0,
currentMax: 20,
title: {text: 'values'}
},
//Whether to use Highstocks instead of Highcharts (optional). Defaults to false.
useHighStocks: false,
//size (optional) if left out the chart will default to size of the div or something sensible.
size: {
width: 400,
height: 300
},
//function (optional)
func: function (chart) {
//setup some logic for the chart
}
};
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. NOTE: A common error is to put other Highcharts options directly into the chartConfig. In general if the Highcharts option you want isn't listed above you probably want to put it in chartConfig.options
The Highcharts object can be accessed with chartConfig.getHighcharts(). 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.
<script src="http://code.highcharts.com/3/adapters/standalone-framework.js"></script>At least half of all issues filed are due to this. Before you file an issue read this! A common error is to put other Highcharts options directly into the chartConfig. In general if the Highcharts option you want isn't listed above you probably want to put it in chartConfig.options.
From version 0.0.8 onwards you can use config.getHighcharts. 95% of the time you won't 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.
Let's consider the below snippet.
$scope.chartConfig = {
options: {...}, //Highcharts options - using standard Highcharts config
//other "dynamic" options
title: {...}
series [...]
}
In the chartConfig object above the options property is a standard Highcharts options object. e.g. anything you can pass into ````new Highcharts.Chart(options);``` works here.
This options object is watched for changes. When something changes here the whole chart is recreated.
The other dynamic properties are ones that we can change without affecting the whole chart - using the API at http://api.highcharts.com/highcharts#Chart e.g. if you change the title we can call chart.setTitle and not have to recreate the whole chart. Splitting them out from the main options object means we can watch them separately.
So anything that has an API to change is declared outside the main options object.
Hope this makes sense!
This may happen for example, when you place your chart in a bootstrap col - element. For now, you may apply the following workaround to fit your chart in the container:
$scope.config = {
options: {
...
},
...
// other configuration here,
...
func: function(chart) {
$timeout(function() {
chart.reflow();
}, 0);
}
};
}
This forces the chart to reflow after container and chart have finished rendering. Don't forget to include the dependency to $timeout. Full discussion in https://github.com/pablojim/highcharts-ng/issues/300.
If you used to use the lazyload feature, this has been moved to a separate module. It is recommended to use a module loader such as Webpack or browserify instead.
<script src="path/to/highcharts-ng/dist/lazyload.js"></script>
var app = angular.module('myapp', ["highcharts-ng-lazyload"])
.config(['highchartsNGProvider', function (highchartsNGProvider) {
// will load highcharts (and standalone framework if jquery is not present) from code.highcharts.com
highchartsNGProvider.lazyLoad();
highchartsNGProvider.lazyLoad([
highchartsNGProvider.HIGHCHART, // or HIGHSTOCK,
// you may add any additional modules and they will be loaded in the same sequence
"maps/modules/map.js",
"mapdata/custom/world.js",
]);
highchartsNGProvider.basePath("/js/"); // change base path for scripts, default is http(s)://code.highcharts.com/
}])
.controller(["highchartsNG", function(highchartsNG){
// do anything you like
// ...
highchartsNG.getHighcharts().then(function(Highcharts){
// init chart config, see lazyload example
});
});
<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>
See an example here: http://jsfiddle.net/pablojim/46rhz/
FAQs
highcharts-ng
The npm package highcharts-ng receives a total of 6,843 weekly downloads. As such, highcharts-ng popularity was classified as popular.
We found that highcharts-ng demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.