score:22
you could also try angular2-highcharts i implemented.
score:1
with usage of official highcharts module only (w/o angular2-highcharts and other and even @types/highcharts)
npm install --save-dev highcharts
import * as hc from 'highcharts';
...
export class maincomponent implements oninit, afterviewinit {
...
ngafterviewinit() {
let chartoptions = {
...
chart: {
renderto: 'chartpanel', // need to have div #chartpanel in template
...
}
}
this.chartinstance = new hc.chart(chartoptions);
}
this.chartinstance will have all highcharts methods like addseries, reflow, redraw etc.
score:3
primeng charts can be an alternative. http://www.primefaces.org/primeng/
score:3
try this approach without need of 3rd party library.
import {component} from 'angular2/core';
declare var jquery:any;
@component({
selector: 'my-chart',
template: `<div style="width:60%" id="container"></div>`
})
export class appcomponent {
private data = [
{
name: 'usa',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
},
{
name: 'ussr/russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}];
ngafterviewinit() {
this.renderchart();
}
renderchart(){
jquery('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'us and ussr nuclear stockpiles'
},
subtitle: {
text: 'source: thebulletin.metapress.com'
},
xaxis: {
allowdecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
},
yaxis: {
title: {
text: 'nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointformat: '{series.name} produced <b>{point.y:,.0f}</b>' +
'<br/>warheads in {point.x}'
},
plotoptions: {
area: {
pointstart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: this.data
});
}
}
and put down this to index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
or try this module http://ngmodules.org/modules/angular2-highcharts, if you need to handle on point select event.
score:3
i didn't tested yet but highcharts has its official angular library which seems to be actively maintained.
score:3
as of october 2018:
angular-highcharts is the new kid on the block and has overtaken angular2-highcharts in popularity.
angular-highcharts is an angular directive based implementation of highcharts and attow requires angular 7 (which was released very recently)
i have no affiliation to either library.
score:4
added this to package.json:
"angular2-highcharts": "^0.3.3",
"highcharts": "^5.0.0",
added this on main.module.ts file:
import { chartmodule } from 'angular2-highcharts';
added this on main.module.ts in @ngmodule imports section
imports: [ // import angular's modules
chartmodule
],
added this in vendor.ts file:
//angular2-highcharts
import { highcharts } from 'angular2-highcharts';
require('highcharts/highcharts-more')(highcharts);
require('highcharts/modules/solid-gauge')(highcharts);
added this on the chart.component.ts file
import { highcharts } from 'angular2-highcharts';
declare this on inside the chart.component class code:
options: highchartsoptions;
chartdata: any = [];
add this code in the method that binds the data to the chart:
this.options = {
chart: { type: 'spline' },
title : { text : 'chart' },
xaxis: {
type: 'datetime'
},
series: [{
name: "name",
data: this.chartdata
}]
};
added this on the chart.component.html page:
<div>
<chart [options]="options"></chart>
</div>
score:5
to install this library, install peer dependencies first:
$ npm install --save highcharts@^4.2.1
also, make sure you install the typings for highcharts:
$ npm install @types/highcharts --save
then, install this library running:
$ npm install --save ng2-highcharts
app.module
import { ng2highchartsmodule } from 'ng2-highcharts';
add ng2highchartsmodule to @ngmodule => imports
angular cli add this js files in script
"../node_modules/highcharts/highcharts.js",
"../node_modules/highcharts/highcharts-more.js",
"../node_modules/highcharts/modules/exporting.js"
component file
import { ng2highcharts } from 'ng2-highcharts';
private chartdata = {
chart: {
type: 'column'
},
xaxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
series: [
{
name: 'nc',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'ok',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'ko',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'valid',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'check',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'cor',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}
]};
and the html
<div [ng2-highcharts]="chartdata"></div>
score:10
i think that you could try ng2-highchart (https://github.com/bigous/ng2-highcharts).
see this project for a sample of use: https://github.com/bigous/angular2-seed-ng2-highcharts.
how to set it up in systemjs configuration: https://github.com/bigous/angular2-seed-ng2-highcharts/blob/master/src/index.html#l43 and https://github.com/bigous/angular2-seed-ng2-highcharts/blob/master/tools/config.ts#l108
<script> system.config({ map: { 'ng2-highchart': 'node_modules/ng2-highchart' }, (...) }); </script>
how to configure it within a component: https://github.com/bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.ts#l10
import {component, oninit} from 'angular2/core'; import {http} from 'angular2/http'; import {ng2highcharts, ng2highmaps, ng2highstocks} from 'ng2-highcharts/ng2-highcharts'; @component({ selector: 'home', moduleid: module.id, templateurl: './home.html', styleurls: ['./home.css'], directives: [ng2highcharts, ng2highmaps, ng2highstocks] }) export class homecmp implements oninit { (...) }
how to use it within a component template: https://github.com/bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.html#l9
<div [ng2-highcharts]="chartoptions" class="graph"></div>
score:14
i know this question is a bit stale, but is one of the first hits for angular2+highcharts queries... it's pretty simple and straight forward to get highcharts working. here is a plunker example, https://plnkr.co/edit/8ccbrp?p=preview.
here is the main logic:
import {
component,
elementref,
afterviewinit,
ondestroy,
viewchild
} from '@angular/core';
const highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';
@component({
selector: 'my-app',
template: `
<div>
<div #chart></div>
</div>
`
})
export class appcomponent implements afterviewinit, ondestroy {
@viewchild('chart') public chartel: elementref;
private _chart: any;
public ngafterviewinit() {
let opts: any = {
title: {
text: 'monthly average temperature',
x: -20 //center
},
xaxis: {
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
},
series: [{
name: 'tokyo',
data: [
7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6
]
}]
};
if (this.chartel && this.chartel.nativeelement) {
opts.chart = {
type: 'line',
renderto: this.chartel.nativeelement
};
this._chart = new highcharts.chart(opts);
}
}
public ngondestroy() {
this._chart.destroy();
}
}
Source: stackoverflow.com
Related Query
- How to use highcharts with angular 5?
- How do I use an Highcharts Solid Gauge in angular 6 with typescript?
- How to use trellis chart with stacked column in Angular 10 using Highcharts
- How To Use Epoch Time With Highcharts Series Data?
- How to use highcharts with princeXML?
- How to structure Angular with Highcharts and lots of dynamic data
- How to enable noData with highcharts and angular
- How do I use Highcharts to display candlestick with small values?
- How to use Highmaps and Highcharts with Meteor?
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- how to use highcharts tooltip formatter in python code
- How to use highchart 3d with angular 5?
- How to create a solid gauge chart with Highcharts in angular 6?
- How to convert string array to ints to use with Highcharts
- How is the proper way to use HighCharts with StencilJS?
- How to use highcharts in reactjs with fetched data from API
- Highcharts how to use a percentage area with time
- Highcharts Angular - How to set chart width and height with percentages?
- How to have multiple highcharts with different series data in vuejs without repeating code
- How to use Highcharts theme with rCharts
- How to use Highcharts regression plugin to plot a trend line using angular 8 wrapper
- Use classic mode instead of styled mode in Highcharts with Angular
- Parsing JSON for use with Highcharts using jquery .parseJSON or JSON.parse: how to remove quotes from function calls for formatters?
- How to use decimal dates with Highcharts (such as 1992.9614)?
- Highcharts : How to use setData with a string obtained by ajax?
- how can I use rangeselector and navigation in highcharts in the given code
- How to use custom JSON (not GeoJSON) with Highcharts map?
- Highcharts - how to have a chart with dynamic height?
- How to include highcharts with bower?
- how to import highcharts with webpack and babel
More Query from same tag
- Able to see values but not graph in Highcharts
- Background color to highcharts
- Highcharts - Display legend for Pie chart in two columns
- How to hide series via the legend in highstock ?
- How to add color in highmap highchart based on value
- HighCharts Render Annotated Queryset in Jinja2 Template
- Linking Data in multiple Charts Highcharts
- Highcharts donut customize legend
- fwrite PNG creates file with zero bytes
- Highcharts js different when installed with bower
- Highcharts: arrow being rendered on the wrong charts
- how to set underline style on subtitle highchart?
- Shared events highcharts
- Dates not displaying correctly in Highcharts plot with irregular time data
- How to move x-axis labels to the left using highcharts?
- Populate Highchart using json data in Angular js
- Can color of data label be different inside and outside of the bar in Highchart
- Highchart inner donut name as header for outer donut tooltip
- How to redraw text rendered using SVGRenderer in Highcharts React?
- Highcharts age stacking
- Highcharts: is there a way to offset lines slightly so same coordinates do not overlap?
- Highcharts no longer animates and readjusts/rescales chart upon addition and removal of series in legend after upgrading to jQuery 1.10
- JavaScript line and area chart with similar interface as shown
- Highcharts not rendering after post ajax request
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Hide segment of a line in Highcharts
- How to Change space between series data colums in highcharts?
- Highcharts column chart - transform columns manually after render
- Set Specific Range on X-Axis in HighCharts
- External JSON from API into array?