Gauge chart in ng2-highcharts

I’m trying to find/work out how to implement a gauge using ng2-highcharts.

I’ve been looking at how the line and bar charts are implemented in the angular2-seed-ng2-highcharts project – https://github.com/Bigous/angular2-seed-ng2-highcharts and thought it would be a simple matter of modifying the chart options to something like:

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%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

with the template referencing it:

    <td width="50%">
        <div [ng2-highcharts]="chartGauge" class="graph"></div>
    </td>

The chart is not rendered and theses errors which I currently can’t interpret:

angular2.js?1460493363215:23083 ORIGINAL EXCEPTION: Error: Highcharts error #17: www.highcharts.com/errors/17BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1194(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ angular2.js?1460493363215:12690schedulerFn @ angular2.js?1460493363215:12934tryCatcher @ Rx.js?1460493363214:31Subscriber.next @ Rx.js?1460493363214:9500Subject._next @ Rx.js?1460493363214:9999Subject.next @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262
angular2.js?1460493363215:23083 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1197(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ angular2.js?1460493363215:12690schedulerFn @ angular2.js?1460493363215:12934tryCatcher @ Rx.js?1460493363214:31Subscriber.next @ Rx.js?1460493363214:9500Subject._next @ Rx.js?1460493363214:9999Subject.next @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262
angular2.js?1460493363215:23083 Error: Highcharts error #17: www.highcharts.com/errors/17
at Error (native)
at ea (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:8:256)
at Object.Ca.initSeries (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:213:1)
at http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:235:42
at Array.forEach (native)
at Array.forEach (http://localhost:5556/node_modules/es6-shim/es6-shim.js?1460493363213:1107:14)
at n (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:26:295)
at Object.Ca.firstRender (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:235:13)
at Object.Ca.init (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:212:415)
at Object. (http://localhost:5556/node_modules/highcharts/highstock.js?1460493363216:400:355)BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1198(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ angular2.js?1460493363215:12690schedulerFn @ angular2.js?1460493363215:12934tryCatcher @ Rx.js?1460493363214:31Subscriber.next @ Rx.js?1460493363214:9500Subject._next @ Rx.js?1460493363214:9999Subject.next @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262
angular2.js?1460493363215:23083 ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1201(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ angular2.js?1460493363215:12690schedulerFn @ angular2.js?1460493363215:12934tryCatcher @ Rx.js?1460493363214:31Subscriber.next @ Rx.js?1460493363214:9500Subject._next @ Rx.js?1460493363214:9999Subject.next @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262
angular2.js?1460493363215:23083 _Context {element: div.graph, componentElement: home, context: HomeCmp, locals: Object, injector: Injector…}BrowserDomAdapter.logError @ angular2.js?1460493363215:23083ExceptionHandler.call @ angular2.js?1460493363215:1202(anonymous function) @ angular2.js?1460493363215:12591NgZone._notifyOnError @ angular2.js?1460493363215:13515collection_1.StringMapWrapper.merge.onError @ angular2.js?1460493363215:13419Zone.run @ angular2-polyfills.js?1460493363213:1247(anonymous function) @ angular2.js?1460493363215:13438NgZone.run @ angular2.js?1460493363215:13400(anonymous function) @ angular2.js?1460493363215:12690schedulerFn @ angular2.js?1460493363215:12934tryCatcher @ Rx.js?1460493363214:31Subscriber.next @ Rx.js?1460493363214:9500Subject._next @ Rx.js?1460493363214:9999Subject.next @ Rx.js?1460493363214:9963EventEmitter.emit @ angular2.js?1460493363215:12915(anonymous function) @ angular2.js?1460493363215:13331Zone.run @ angular2-polyfills.js?1460493363213:1243NgZone._notifyOnTurnDone @ angular2.js?1460493363215:13330(anonymous function) @ angular2.js?1460493363215:13445zoneBoundFn @ angular2-polyfills.js?1460493363213:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js?1460493363213:262

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

The gauge required the highcharts-more library, I added the following lines to the index.html and it resolved the above issue.

<script src="../node_modules/highcharts/highcharts.js"></script>
<script src="../node_modules/highcharts/highcharts-more.js"></script>

The chart now renders.