Chart types about angular-highcharts HOT 13 CLOSED

Hi @shay972, I integrated angular-highcharts recently and I got the same issues as you.

With angular-highcharts version 3, here is the code that works.

import * as Highcharts from 'highcharts';
import highchartsMoreExtension from 'highcharts/highcharts-more.src';
import solidGaugeExtension from 'highcharts/modules/solid-gauge.src';

highchartsMoreExtension(Highcharts);
solidGaugeExtension(Highcharts);

With the version 4, this code works:

import highchartsMoreExtension from 'highcharts/highcharts-more.src';
import solidGaugeExtension from 'highcharts/modules/solid-gauge.src';
import {FactoryProvider} from '@angular/core';
import {HIGHCHARTS_MODULES} from 'angular-highcharts';

export function highchartsModules() {
  return [highchartsMoreExtension, solidGaugeExtension];
}

// Don't forget to declare this provider
const HighchartsProvider: FactoryProvider = {
  provide: HIGHCHARTS_MODULES,
  useFactory: highchartsModules
};

Note that in both cases, I had to add this in the typings declarations:

declare function HighchartsModule(H: any): any;

declare module 'highcharts/highcharts-more.src' {
  export default HighchartsModule;
}

declare module 'highcharts/modules/solid-gauge.src' {
  export default HighchartsModule;
}

I don't know why I have to declare these additional symbols. Is it due to a problem in the typing definitions coming from @types/highcharts? From the fact that I use the noImplicitAny Typescript option? From the fact I use es2015 modules? Or from something else? I am new in the Angular 4 / Typescript world and for now I cannot answer this question.

Hope it will help!

from angular-highcharts.

You have to import the gauge plugin: https://github.com/cebor/angular-highcharts#using-highcharts-modules

from angular-highcharts.

Ok thanks, I added the this to the modules, but what is the next step?
can you provide example for the component

from angular-highcharts.

@shay972 just set type: 'gauge' and it should work, maybe you also have to import highcharts-more

from angular-highcharts.

I am still getting:
ERROR Error: Highcharts error #17: www.highcharts.com/errors/17

from angular-highcharts.

I have some progress, still having issue with "series" and "yAxis"
https://www.highcharts.com/demo/gauge-speedometer
I am trying to solve it..

from angular-highcharts.

as soon as I put the series, I am getting the above error,
here is my code:

`
chart = new Chart({

chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},

title: {
text: 'Speedometer'
},

pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
},
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
},
{
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}
]},

yAxis: {
  min: 0,
  max: 200,

},

series: [{
name: 'Speed',
data: [80],
}]

});

`

from angular-highcharts.

I think I am not importing the modules correctly:
import { Chart } from 'angular-highcharts';
import 'highcharts/highcharts-more';
import 'highcharts/modules/solid-gauge';

from angular-highcharts.

@shay972 nope, this is not correct. Please follow the instructions i posted above.

from angular-highcharts.

The part you posted I already did in the app.modules
what do I need to do on the component itself in order to make it to work?
can you please send working example for the solidgauge

from angular-highcharts.

Sorry im very busy atm, maybe i have time to prepare an example for you tomorrow.

But it should very easy to accomplish what you want:

1. Extend Highcharts with highcharts-more and solidgauge (See node_modules/highcharts for file paths).
2. Just create Chartwith correct options object. (Just use the example from highcharts.com)
3. To control the gauge, use yourChart.ref, which is a reference to the original Highcharts object. (You can use the official Highcharts docs for that)

from angular-highcharts.

When I am putting the data inside chart definition I am getting error 17
when I just did it as you suggested:
this.chart2.ref.series[0].setData([80]);
I got new error:
typeError: Cannot read property 'setData' of undefined

please note, that other charts such as "column" is working fine for me, only the guage* - now I am working on the solidgauge

from angular-highcharts.

Finally !!
Thanks @bsautel for the working solution !!!

from angular-highcharts.