This library aims to provide a lightweight wrapper around Highcharts.
Check the demo for usage example.
npm install angularjs-highcharts -S
Browserify:
const HighChart = require('angular-highcharts');
Webpack:
import HighChart from 'angular-highcharts';
From a CDN:
<script src="https://unpkg.com/[email protected]/dist/angular-highcharts.js"></script>
const highchartsConfig = {
chart: {
type: 'area',
},
title: {
text: 'Simple chart',
},
};
const fooSeries = {
id: 'foo',
data: [
[1, 3],
[2, 2],
],
};
const barSeries = {
id: 'bar',
data: [
[2, 1],
[1, 0],
],
};
// This example utilizes angular.component(), but nothing stops you from using the
// same code (contents of $onInit() method) in a directive, or in a controller
// bound to a template by ng-controller, or by a router
app.component('myComponent', {
controller: function() {
const $ctrl = this;
$ctrl.$onInit() {
// Initialize new chart
const chart = new HighChart(highchartsConfig);
// Add one data series
chart.addSeries(fooSeries);
// Add multiple data series in one go
chart.addSeries(fooSeries, barSeries);
// Remove all series in a chart
chart.removeAllSeries();
};
},
template: `
<chart
chart="$ctrl.chart">
</chart>
`
});
For least headache, use both of the following:
Simple case
Add the following CSS to your project:
chart {
display: block;
}
More complex case
In certain scenarios, when chart component is rendered inside an element with display: none
, Highcharts will default to 600px x 400px for its size. This happens, for example, when placing the chart inside a tab, or in a component rendered conditionally by an ng-if
.
Here's a fiddle demonstrating the issue and the solution to it.
Highcharts provides a method to manually reflow the chart, which takes care of refitting it into its container without redrawing its contents. This method should be called at the point of execution at which we're sure the element containing the chart has finished rendering.
There are two options: either to trigger the reflow manually, or call it within a callback passed to $timeout()
service.
Example:
const chart = new HighChart({});
$timeout(() => {
$window.Highcharts.charts.filter(chart => chart).forEach(chart => chart.reflow());
});
Clone project repo, and inside its directory, execute:
npm install
npm test
npm run watch
- Angular 1.5+
- Highcharts 4+
- Babel polyfill
The easiest way is to install and import the Babel polyfill package, but you can also explicitly import only what's needed, which is: