cebor / angular-highcharts Goto Github PK
View Code? Open in Web Editor NEWHighcharts directive for Angular
License: MIT License
Highcharts directive for Angular
License: MIT License
Can any 1 tell me does highchart support variwide charts in angular program ? .. if it supports can any 1 tell me how to use it because giving type: 'variwide' gives error in console like ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
Stack trace:
../../../../highcharts/highcharts.js/</</a.error@http://172.18.1.71:2000/5.chunk.js:2197:49
initSeries@http://172.18.1.71:2000/5.chunk.js:2418:45
firstRender/<@http://172.18.1.71:2000/5.chunk.js:2442:40
../../../../highcharts/highcharts.js/</</a.each@http://172.18.1.71:2000/5.chunk.js:2215:463
firstRender@http://172.18.1.71:2000/5.chunk.js:2442:13
https://www.npmjs.com/package/angular2-highcharts
i used the above link to integrate in my pgm ... P.S line , pie charts are working fine using the above method ...
hello,
well I've tried some different highcharts wrapper but this is definitly my favourite one!
The last things I'm really missing is the option to display no data available (comming from the highcharts-more) and to be able to remove a series... is this on your roadmap in mind?
would love to have those options! 👍
Hi I was looking to set up useUTC option. There is way to do something like this?
Highcharts.setOptions({
global: {
useUTC: false
}
});
Thanks.
Hello and thank you for this great library!
I'm trying to use highchart modules, but cant get any of those to work.
I have this on my sharedmodule
import { ChartModule, Highcharts } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
exporting(Highcharts);
And getting this error: Uncaught TypeError: Cannot read property 'defaultOptions' of undefined at exporting.src.js:29
Any ideas?
ng -v
@angular/cli: 1.4.4
node: 7.8.0
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
typescript: 2.2.2
I used your code exaclty, it compiles but once you run it i get the following error:
Could anyone perhaps help ?
zone.js:642 Unhandled Promise rejection: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
In multiple series pie chart ,cannot give size and gives error as size is not a known property for individual series object
Does this plugin have theme support? it would be nice to have a way of doing something like this directly with Angular.
hello
is there a possibility to do something like this in angular2 too?
http://pablojim.github.io/highcharts-ng/examples/example.html
I have a form where i enter some data, I always redraw the chart when a value is changed... sorry new to angular2...
I can use highchart to set the export button .
ref:https://code.hcharts.cn/highcharts/hhhhsu/1
but how can i use ng-highchart to set the exporting button? thanks
I am trying to change the default UTC to false.
import { ChartModule, Highcharts } from '../../node_modules/angular-highcharts';
Highcharts.setOptions({
global: {
useUTC: false
}
});
But It shows an error:
app.module.ts:13 Uncaught TypeError: Cannot read property 'setOptions' of undefined
at Object.../../../../../src/app/app.module.ts (app.module.ts:13)
at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
at Object.../../../../../src/main.ts (environment.ts:8)
at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
at Object.0 (main.bundle.js:367)
at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
at webpackJsonpCallback (bootstrap eafd89d709b4c84e1dec:25)
at main.bundle.js:1
../../../../../src/app/app.module.ts @ app.module.ts:13
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
../../../../../src/main.ts @ environment.ts:8
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
0 @ main.bundle.js:367
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
webpackJsonpCallback @ bootstrap eafd89d709b4c84e1dec:25
(anonymous) @ main.bundle.js:1
How to set UTC to false, Anyone who can help.
Thanks in Advance,
Ahmad
I was trying to use pie chart to pie chart drilldown, but it looks like it has used in highchart.js but not implemented in this package.
https://www.highcharts.com/demo/pie-drilldown
I am looking for exact same feature as given in above link.
Can you please help me with that ?
Thanks
Hello,
is it possible to use HighStock and Highcharts Modules like Exporting?
thanks
I am trying to use visible property inside series like:
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
visible: false
}]
The code works for simple highcharts not for angular-highcharts, whenever I try to implement it gives the following error:
Types of property 'series' are incompatible.
Type '{ name: string; data: number[]; visible: boolean; }[]' is not assignable to type 'IndividualSeriesOptions[]'.
Type '{ name: string; data: number[]; visible: boolean; }' is not assignable to type 'IndividualSeriesOptions'.
Object literal may only specify known properties, and 'visible' does not exist in type 'IndividualSeriesOptions'.
I am trying to use this awesome component with Webpack but have the following issue in the Chrome console:
(...)node_modules\angular-highcharts\chart.d.ts
(1,1): error TS2688: Cannot find type definition file for 'highcharts'.
Any idea what I could be doing wrong?
Hi,
I am looking for the plotOptions inside the responsive property, but I cannot find it? Is it supported within the library?
this.chart = new Chart({
chart: {
type: 'line'
},
series: [{
name: 'Line 1',
data: [1, 2, 3]
}],
responsive: [{
rules: [{
condition: {
maxWidth: 1000
},
chartOptions: {
plotOptions: { // Syntax error here, plotOptions cannot be found
}
}
}]
}]
});
Please help, thanks for the awesome wrapper btw :)
I'm getting this error when using "ng serve" command with angular-cli. I have the lastest version of highcharts (6.0.2), angular0highcharts(5.0.3), and @types/highcharts(5.0.9).
I'm running on Windows 10, angular 4.0.0, and using Google Chrome.
ERROR in Metadata version mismatch for module ..(my directory)/node_modules/angular-highcharts/angular-highcharts.d.ts, found version 4, expected 3
Hello,
Is it possible to use "style mode" and "patterns" ?
I want to add a pattern on a column chart but i am not able to use the "defs tag" (https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).
Is there some snippet or jsfiddle example of usage with an angular component ?
Thanks
I have tried to add ColumnRange chart but it's giving "Highcharts error #17: www.highcharts.com/errors/17" Error.
`chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]`
Do you support other than type "line"
I tried gauge and I am getting errors
can you provide some example?
When I'm building my Angular app I run into the following issue:
** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
Date: 2017-10-13T08:35:36.571Z
Hash: ab62cbc5db0485bf17d8
Time: 8720ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 85.1 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]
ERROR in /var/www/front/node_modules/angular-highcharts/highcharts.d.ts (1,8): Module '"/var/www/front/node_modules/@types/highcharts/index"' has no default export.
webpack: Failed to compile.
Here are my dependencies:
"dependencies": {
"@angular/animations": "^4.4.5",
"@angular/common": "^4.4.5",
"@angular/compiler": "^4.4.5",
"@angular/core": "^4.4.5",
"@angular/forms": "^4.4.5",
"@angular/http": "^4.4.5",
"@angular/platform-browser": "^4.4.5",
"@angular/platform-browser-dynamic": "^4.4.5",
"@angular/router": "^4.4.5",
"angular-2-local-storage": "^1.0.1",
"angular-highcharts": "^3.5.0",
"core-js": "^2.5.1",
"file-saver": "^1.3.3",
"highcharts": "^6.0.1",
"include-media": "^1.4.9",
"microtip": "^0.2.2",
"moment": "^2.19.1",
"mydatepicker": "^2.0.31",
"mydaterangepicker": "^4.1.9",
"ng2-validation": "^4.2.0",
"ngx-clipboard": "^8.1.1",
"ngx-smart-modal": "^2.0.4",
"ngx-tabset": "^1.2.0",
"normalize-scss": "^7.0.0",
"rxjs": "^5.4.3",
"web-animations-js": "^2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/cli": "^1.4.7",
"@angular/compiler-cli": "^4.4.5",
"@angular/language-service": "^4.4.5",
"@types/highcharts": "^5.0.7",
"@types/jasmine": "~2.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.0.34",
"codelyzer": "^3.2.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.12.0",
"karma": "~1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-selenium-launcher": "^1.0.1",
"npm-run-all": "4.1.1",
"protractor": "~5.1.2",
"ts-node": "^3.3.0",
"tslint": "^5.7.0",
"typescript": "^2.5.3"
}
I use the [email protected], when execute ng server, the console print ERROR in ChartModule is not an NgModule, but is can use in browser.
I am using angular 4 and I want to show the series 1 value got selected by default when we load the page and also it should show always without mouse hover, but when i mouse hover the second cirle it should show the corresponding value.
import { Chart } from 'angular-highcharts';
import { Highcharts } from 'angular-highcharts';
declare var require: any;
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
this.chart = new Chart({
chart: {
type: 'solidgauge',
marginTop: 50,
backgroundColor: 'transparent'
},
title: {
text: 'Incremental Price Monitor',
style: {
fontSize: '24px',
color: 'ghostwhite',
display: 'none'
}
},
credits: {
enabled: false
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px',
color: 'ghostwhite'
},
// pointFormat: '<span style="font-size:5em; color: {point.color}; font-weight: bold">{point.y}%</span><br><span style="font-size:1em; color: {point.color}; font-weight: bold">{series.name}</span>',
pointFormat: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}mw</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 210
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: '#1B5795',
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: '#33683C',
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Target Ramp',
data: [{
color: this.forecasted_he_target_generation_Color,
radius: '112%',
innerRadius: '88%',
y: this.forecasted_he_target_generation
}]
}, {
name: 'MW Actual',
data: [{
color: this.current_generation_Color,
radius: '87%',
innerRadius: '63%',
y: this.current_generation
}]
}]
});
This property 'wrap' does not exist in 'Static' interface, How can I convert below code to angular
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
if (this.options.alwaysVisible) {
return this.refresh(this.chart.series[0].data[0])
}
p.call(this, delay)
})
I just installed angular-highcharts and highcharts, did everything that was documented to start basic chart. But I ma getting this error:
Uncaught Error: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
<button (click)="add()">Add Point!</button>
<div [ERROR ->][chart]="chart"></div>
"): ng:///EDLModule/EDLComponent.html@2:7
at syntaxError (compiler.es5.js:1694)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
at compiler.es5.js:27052
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
at compiler.es5.js:26939
at Object.then (compiler.es5.js:1683)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)
below is my component:
import { Chart } from 'angular-highcharts';
@Component({
selector: 'app-edl',
template: `
<button (click)="add()">Add Point!</button>
<div [chart]="chart"></div>
`
})
export class EDLComponent extends BaseWidget {
/**
* testing highcharts here
*/
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [{
name: 'Line 1',
data: [1, 2, 3]
}]
});
// add point to chart serie
add() {
this.chart.addPoint(Math.floor(Math.random() * 10));
}
}
I am trying to do something like:
this.charts.options.title.text = this.currentDate.toDateString();
But the title does not get updated. Is there a way to "refresh" the highcharts below even if the data did not change?
hello,
I have the problem that the chart is not rendered to its container.
I tried some css but no success yet. Either the chart is to small like in the picture - or the chart covers the whole page.... as soon as I resize the window it gets rendered correctly.... reflow or redraw - no success.
I could run a resize function after the content is inialiazied... but this just can't be the solution...
any ideas? somebody?
`.chart {
display: block;
border: 3px solid yellow;
}
.chart-wrapper {
border: 3px solid orangered;
width: 100% !important;
}`
<div class="row" style="padding: 0.625rem;" id="testing"> <div class="chart-wrapper" id="chart-wrapper"> <div class="chart" [chart]="chart" id="chart-wrapper0" name="output" ></div> </div> </div>
How can I include solid-gauge chart? I tried using the solution mention to include exporting but it does not work.
I am working with ionic 3.6.1
use demo in html:
<div [chart]="chart"></div>
use version:
"@angular/core": "4.3.2",
"angular-highcharts": "4",
"@types/highcharts": "^5.0.10",
"highcharts": "^6.0.2",
Hi,
When I'm trying to create a gauge chart , I get #17 error: https://www.highcharts.com/errors/17
Do I have to import something more to use gauge ?
Thank you,
Alex
At javascript:
tooltip: {
formatter: function () {
return new Date(this.x).toLocaleString() + '<br><b>内存:</b>' + byte_to_string(this.y)
}
}
But typescript this is a class.
Branch | Build failing 🚨 |
---|---|
Dependency | rxjs |
Current Version | 5.3.1 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As rxjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Add module field: package.json
Add rollup for umd bundling.
FYI: https://github.com/angular/angular/tree/master/modules/%40angular/core
Highcharts has functions to update and destroy a chart. When data changes every few seconds, the chart can be updated instead of created over and over again without the ability of being destroyed.
I would like to be able to do one of the things below to prevent memory leaks.
private createHighchart (options: HighchartOptions): void {
if(this.chart) {
this.chart.update(options);
}
else {
this.chart = new Highchart(options);
}
}
private createHighchart (options: HighchartOptions): void {
if(this.chart) {
this.chart.destroy();
}
else {
this.chart = new Highchart(options);
}
}
I successfully able to create line chart but when I am changing chart type to solidgauge , I am getting errors ,
I followed the same steps in npmjs of this library
https://www.npmjs.com/package/angular-highcharts
Please let me know what types i need to import in order to use solidgauge
chart = new Chart({
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: 'red',
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: 'blue',
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: 'green',
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
data: [{
color: 'red',
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: 'blue',
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: 'green',
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
});
Highchart has poor performance as soon as many points exist.
Is there a solution to this problem?
I can't solve the problem with 'boost'.
Currently my graphic has about 200000 points with 4 series
plnkr example could be helpful if someone has a solution
Nice demo!!! Nice loadsize !!!
After randomly or repeatedly clicking buttons
App loaded!!
2vendor.402d3b4.bundle.js:8 ERROR TypeError: Cannot read property 'data' of undefined
at t.addPoint (vendor.402d3b4.bundle.js:309)
at n.addPoint (main.058f3e0.bundle.js:1)
at Object.handleEvent (main.058f3e0.bundle.js:1)
at Object.w [as handleEvent] (vendor.402d3b4.bundle.js:99)
at Object.handleEvent (vendor.402d3b4.bundle.js:99)
at Xt (vendor.402d3b4.bundle.js:78)
at vendor.402d3b4.bundle.js:78
Hello,
I have updated angular-highcharts from 3.4.7 to 4.0.5. After that I have been getting errors. Is there any changes do i need to make after updating version?
Looks like 'HighchartsOptions' is not in the @types module recommended in the readme. My charts will render, but I get a series of errors looking like this:
client:80 [default] /...node_modules/angular-highcharts/src/chart.d.ts:7:13 Cannot find name 'HighchartsOptions'.
Any thoughts?
Hi,
Is it possible to register event handlers like legendItemClick
or point select events on the tag where [chart]
directive ws placed?
Thanks in advance, plunker example would be nice 😉
A plunker demo showing all files and configuration required will help to setup. Can you guide the process to setup this. Also is this angular 4.4.3 comapatible ?
I am trying to create boxplot chart. but it is throwing error.
Highcharts error #17: www.highcharts.com/errors/17
at Object.a.error (highcharts.js:10)
at a.Chart.initSeries ....
i have imported chartmodule on my appcomponent:
import { ChartModule } from 'angular-highcharts';
and Chartmodule injected into import array.
How do I set lang. This code doesn't work:
// Configuracion global de highcharts (definicion de idioma)
Highcharts.setOptions({
lang: {
months: ["Enero", 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
shortMonths: [ 'Ene' , 'Feb' , 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
loading: 'Cargando...',
exportButtonTitle: 'Exportar',
printButtonTitle: 'Importar',
rangeSelectorFrom: 'De',
rangeSelectorTo: 'A',
rangeSelectorZoom: 'Periodo',
downloadPNG: 'Descargar gráfica PNG',
downloadJPEG: 'Descargar gráfica JPEG',
downloadPDF: 'Descargar gráfica PDF',
downloadSVG: 'Descargar gráfica SVG',
printChart: 'Imprimir Gráfica',
decimalPoint: ',',
thousandsSep: '.'
}
});
Close this report when you want. Not an issue.
I researched 3 main libraries on NPM. After careful examination I choose this library and I'm certain it was the right choice.
Other Libraries
I really like this library. Five thumbs up. Great job!
Hi all,
i have a chart with two series (spline and column).
This is my app.component.s
import {Component} from '@angular/core';
import {Chart} from 'angular-highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
template: `
<div [chart]="chart" ></div>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
chart= new Chart({
chart: {
backgroundColor: '#f2f2f2',
borderColor: '#e8e8e8',
height: 395,
width: 660,
},
colors: ['#4ec5c1'],
title: {
text: 'Movements per month'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
},
yAxis: {
floor: 0,
ceiling: 33000,
title: {
text: null
},
labels: {
format: '{value} €'
}
},
plotOptions: {
series: {
connectNulls: true,
marker: {
radius: 6,
states: {
hover: {
radiusPlus: 2,
fillColor: '#ffffff',
lineColor: '#4ec5c1',
lineWidthPlus: 5
}
}
}
}
},
series: [{
type: 'spline',
name: null,
data: [1000, 1300, 800, 920, null, null, 1283, 1250, 0, 0, 1280, 1220],
}, {
type: 'column',
name: null,
data: [800, 1300, 800, 920, null, null, 1283, 1250, 0, 0, 1280, 1220],
enableMouseTracking: false
}],
tooltip: {
shadow: false,
shared: true,
borderRadius: 20,
borderColor: '#54c6be',
backgroundColor: '#54c6be',
style: {
color: '#fff'
},
useHTML: true,
headerFormat: null,
pointFormat: '{point.y} €'
},
credits: {
enabled: false
}
});
}
If i try to add the option: enableMouseTracking: false
for disabled tooltip on the column serie i have an compilation error:
D:/wamp64/www/angular-test/src/app/app.component.ts (61,7): Argument of type '{ chart: { backgroundColor: string; borderColor: string; height: number; width: number; }; colors...' is not assignable to parameter of type 'Options'. Types of property 'series' are incompatible. Type '({ type: string; name: null; data: number[]; } | { type: string; name: null; data: number[]; enab...' is not assignable to type 'IndividualSeriesOptions[]'. Type '{ type: string; name: null; data: number[]; } | { type: string; name: null; data: number[]; enabl...' is not assignable to type 'IndividualSeriesOptions'. Type '{ type: string; name: null; data: number[]; enableMouseTracking: boolean; }' is not assignable to type 'IndividualSeriesOptions'. Object literal may only specify known properties, and 'enableMouseTracking' does not exist in type 'IndividualSeriesOptions'.
Can you help me please, im lost?
How can I refresh the data. I have modal that opens I hook to ngOnChanges to call the new data. Problem is that the graph is never updated:
getChartData(id: number) {
this.mainService.getPriceHistory(id).subscribe(
(data) => {
console.log(data);
this.chart.addSerie(data);
}
);
}
Any help?
Thnaks
Hi,
It seems your Demo link gets a 404 error currently
hello,
since updating to the latest highcharts and angular-highcharts i'm running into this highcharts 27 error... you need to include boost-canvas and boost .js... I added those but the error still appears. Did anyone manage this?
using systemjs.
https://www.highcharts.com/errors/27
regards
Hey there,
i'm trying to figure out how to access the methods like reflow or setSize from controller.
In regular javascript it was always just like get the div element (#somechart).highcharts().reflow()... As mentioned in the example I'd suggest I should do something like this.chart.reflow but none of them works. I have my charts wrapped in angular2 grid and as soon as the size of the widget changed the chart needs to be rerendered.
hope anyone can help out.
cheers
In old angular highchart(version:3.7.0), it was working check bellow:
series: [
{
//showInLegend: false,
name: 'Target',
color: '#FF0000',
data: diseaseAreaTargetData,
pointPadding: 0.3,
pointPlacement: -0.2
}, {
//showInLegend: false,
name: 'Actual',
color: '#8085e9',
data: diseaseAreaActualData,
pointPadding: 0.4,
pointPlacement: -0.2
}]
]
In new angular highchart(version:5.0.1), pointPadding and pointPlacement is not working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.