how to display a gauge about angular2-highcharts

[PhilippeOberti]

so after a long fight I found a way to get it working. here is how (for those that would be in the same situation):

in the vendor.ts file you need to add those 2 lines

import 'highcharts/highcharts-more';
import 'highcharts/modules/solid-gauge';

right after the line where you import highchart (or highstock in my case)

import 'highcharts/highstock';

then in my main.ts file (angular2) I needed to require those 2:

require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

in the component ts you want to run the gauge import the CHART_DIRECTIVES as explained in the readme
in the component html use it as follow (no type):

<chart [options]="options"></chart>

I'm having some position issues (I think due to the fact I'm using css flex and hightchart is in relative position) but at least it is displayed with no errors!

hope this helps someone!

[khraibani]

@dndam thanks for pointing me into the right direction the above didn't work with webpack.

I had to use the below:

declare var require: any;
import { ChartModule } from 'angular2-highcharts';
import * as ChartModuleMore from 'highcharts/highcharts-more';
const HCSoldGauge = require('highcharts/modules/solid-gauge');
import * as Highcharts from "highcharts";
ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);

Hope that help someone else.

[PhilippeOberti]

so a bit more details, I'm using webpack and I forgot to add highcharts-more and the solid-gauge module in my vendor.ts file.

now my vendor.ts file looks like this

import 'angular2-highcharts/index';
import 'highcharts/highcharts-more';
import 'highcharts/modules/solid-gauge';
import 'highcharts/highstock';
import 'highcharts/modules/map';
import 'highcharts/modules/data';

When I build I can see that the solidgauge type is within my vendor.bundle.js file used by my application.
But when I run the application I get that same error again

any idea?
thanks a ton!

[gevgeny]

Did you try to plug modules like it is shown in readme ?

[PhilippeOberti]

OK, I tried to figure out how to import modules from highcharts but I can't find a way to do it. When I look at your explanation in the readme I can't find where the "Highcharts3d: come from. I looked at the highcharts-3d.src.js in the node_modules files and there is nothing there.

Also I can't find a proper syntax to import the highcharts-more and the solid-gauge module.

When I debug the error above inside ChartComponent.js file (line 43) I can go inside the initchart function and find the line where is throws the error:

if (!highchartsService.Highcharts[type]) {
        throw new Error(type + " is unknown chart type.");
}

If I look at the available types inside highchartsService.Highcharts gauge or solidgauge are not there...

Sorry I'm pretty new to this... Could you point me to the right direction?

[gevgeny]

Thanks for investigation.

[Abhishek-Ravichandran]

Any idea how one would go about importing the solid gauge file when using systemjs? I've tried adding everything in my config file but it does not seem to work at all.

[witold-gren]

systemjs.config.js

var  map = {
   ...
   'angular2-highcharts':        'node_modules/angular2-highcharts',
   'highcharts/highstock.src':   'node_modules/highcharts/highstock.js',
   'highcharts/highcharts-more.js': 'node_modules/highcharts/highcharts-more.js',
   ...
}

#my.component.ts

import {CHART_DIRECTIVES} from 'angular2-highcharts';
import {Highcharts} from 'angular2-highcharts';


require('highcharts/highcharts-more.js')(Highcharts);


@Component({
   ...
})
export class CompareMeasureComponent implements OnInit {
   ...
}

it's work :)

[alaa-bourouissi]

I have the same problem , but this doesn't solve my problem , I get another problem : Uncaught TypeError: Cannot read property 'arrayMin' of undefined

I think that there is a problemin the highcharts-more.js file , I changed it but the error persist , any suggestions ?

[maneeshmoota]

filoucpp, I am also trying to show a "gauge" chart in my angularjs2 (using webpack) project.

I am able to show spline and simple chart without any problem. But gauge chart is not working.

I am getting angular2-highcharts/index has no exported member CHART_DIRECTIVES

could you please share some code snippet?

[PhilippeOberti]

Hi,

the project I am working on has grown quite a lot and we decided to get rid of the angular2-highcharts library and use highcharts directly. This is way easier for us...

Sorry We made that changes a couple of months ago...

[gevgeny]

@maneeshmoota Here is the example of using highcharts module with webpack
https://github.com/gevgeny/angular2-highcharts/blob/master/examples/src/highchartsModuleExample.ts
https://github.com/gevgeny/angular2-highcharts/blob/master/examples/webpack.config.js

[khraibani]

Hi, I want to use the Gauge chart, I have tried the above example didn't work for me, I have other charts working, line chart, pie etc I'm using webpack.

could you please share some code snippet?

[dndam]

@khraibani If you have Pie, Line and other charts working, this means that you correctly included HighCharts. Gauge however, is part of the HighChartsMore. To achieve this you need to import this "extra" within your project. It should be something similar with:

import { ChartModule } from 'angular2-highcharts';
import * as ChartModuleMore from 'highcharts/highcharts-more.js';
import HCSoldGauge from 'highcharts/modules/solid-gauge';
import * as Highcharts from "highcharts";
ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);

You should be focussing on lines 2, 4 and 5 (the above sample is being used within an Ionic2 + Angular 2 app). This is similar with https://github.com/gevgeny/angular2-highcharts/blob/master/examples/src/highchartsModuleExample.ts

[khraibani]

@dndam As you have answered my previous question, I wondered if you faced the below issue. (i am trying to get highmaps to work, using webpack) I am getting 'node_modules/angular2-highcharts/index' has no exported CHART_DIRECTIVES

using http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview as a reference

[dndam]

Most likely you need to have
import { ChartModule } from 'angular2-highcharts';
on line 4. Error states that angular2-highcharts is no longer exported as CHART_DIRECTIVES. Just (CTRL) click on your import and you should see how highchart is "exported"

If you could share your code, we might be able to help you more.

[khraibani]

@dndam Thanks for the response I have created a stub project

https://bitbucket.org/hkhraibani/ng2-highcharts-webpack-demo

[ermarkar]

I am using

import { HighchartsChartModule} from "highcharts-angular";

and gauge chart is not working, any help?