score:0

    it's working. angular2-seed-ng2highcharts 

ref: https://github.com/angularshowcase/angular2-seed-ng2-highcharts
    chart.html:
    -------------
    <div [ng2-highcharts]="chartgauge" class="graph" ></div>

    chart.component.ts:
    ------------------

    add series option within the chart option.

    chartgauge = {
            chart: {
                        type: 'solidgauge'
                    },

                    title: {
                        text: 'asup'

                    },

                    pane: {
                        center: ['50%', '70%'],
                        size: '140%',
                        startangle: -90,
                        endangle: 90,
                        background: {
                            backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#eee',
                            innerradius: '60%',
                            outerradius: '100%',
                            shape: 'arc'
                        }
                    },


                    tooltip: {
                        enabled: true
                    },

                    // the value axis
                    yaxis: {
                        min: 0,
                        max: 200,
                        title: {
                            text: 'speed'
                        }
                        stops: [
                            [0.5, '#ff5252'], // red*
                            [0.9, '#69f0ae'] // green

                        ],
                        linewidth: 0,
                        minortickinterval: null,
                        tickamount: 1,
                        title: {
                            y: -40
                        },
                        labels: {
                            y: 15
                        }
                    },

                    plotoptions: {
                        solidgauge: {
                            datalabels: {
                                y: 25,
                                borderwidth: 0,
                                usehtml: true
                            }
                        }
                    }
                    series: [{
                name: 'speed',
                data: [80],
                datalabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' +
                           '<span style="font-size:12px;color:silver">km/h</span></div>'
                },
                tooltip: {
                    valuesuffix: ' km/h'
                }
            }]
      };

score:1

here's a demo for solid-gauge in angluar2 with angular2-highcharts.

http://plnkr.co/edit/6etk5kldxplws6v6dk3w?p=preview

i have imported both required files: highcharts-more and modules/solid-gauge from same version as the one used by angular2-highcharts (btw. this is a third party in relation to highcharts). you can see that in systemjs.config.js file lines 18-19 and in app/main.js lines 4-8. in latter group of lines the additional files are initialized on highcharts.

the demo i have posted is based on angular2-highcharts demo for using highcharts with modules: http://plnkr.co/edit/4eifda2ippcjykonsqqj?p=preview

important parts of the code:

app/main.js:

...
import { chart_directives, highcharts } from 'angular2-highcharts'; 
import highchartsmore from 'highcharts/highcharts-more';
import hcsoldgauge from 'highcharts/modules/solid-gauge';

highchartsmore(highcharts);
hcsoldgauge(highcharts);
...

systemjs.config.js:

 ...
'angular2-highcharts':        'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist',
'highcharts/highstock.src':   'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',
'highcharts/highcharts-more': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-more.js',
'highcharts/modules/solid-gauge': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/modules/solid-gauge.js'
...

Related Query

More Query from same tag