how to display a gauge

Hi all,

I’m trying to display a highcharts solidgauge and I’m getting error #17.

My typescript looks like this

import {CHART_DIRECTIVES} from "angular2-highcharts/index"; … constructor() { this.options = { chart: { type: 'solidgauge' }, series: [ { name: 'test', data: [1] } ] }; }

and my html look like that

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

so nothing fancy.

BTW running these options in a JSFiddle from the Highcharts website works.

Any idea what I’m missing or doing wrong? Thanks for the help!

[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.