Need to create Solidgauge using highcharts in angular2

[arunsaibk]

I successfully able to create line chart but when I am changing chart type to solidgauge , I am getting errors ,

I followed the same steps in npmjs of this library https://www.npmjs.com/package/angular-highcharts

Please let me know what types i need to import in order to use solidgauge

chart = new Chart({
        chart: {
            type: 'solidgauge',
            marginTop: 50
        },

        title: {
            text: 'Activity',
            style: {
                fontSize: '24px'
            }
        },

        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '16px'
            },
            pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
            positioner: function (labelWidth) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 180
                };
            }
        },

        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: 'red',
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: 'blue',
                borderWidth: 0
            }, { // Track for Stand
                outerRadius: '62%',
                innerRadius: '38%',
                backgroundColor: 'green',
                borderWidth: 0
            }]
        },

        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false

            }
        },
        series: [{
            name: 'Move',
            data: [{
                color: 'red',
                radius: '112%',
                innerRadius: '88%',
                y: 80
            }]
        }, {
            name: 'Exercise',
            data: [{
                color: 'blue',
                radius: '87%',
                innerRadius: '63%',
                y: 65
            }]
        }, {
            name: 'Stand',
            data: [{
                color: 'green',
                radius: '62%',
                innerRadius: '38%',
                y: 50
            }]
        }]
    });

[cebor]

Add the following code should fix this:

import { Highcharts } from 'angular-highcharts';
require('highcharts/modules/solid-gauge')(Highcharts);

See: https://github.com/cebor/angular-highcharts#using-highcharts-modules

[arunsaibk]

@cebor Thanks for your prompt reply, I tried but no luck

My requirement to use exactly this kind of chart using highcharts in angular2 , please let me know what i am missing http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/

[cebor]

Can you please provide me a plunker using this template: https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5

So i can reproduce this issue, thanks.

[cebor]

Just did it for you: https://plnkr.co/edit/yrPSBbGftdTI8N4lASyG

[arunsaibk]

hi

yes I am getting exactly same error .

https://plnkr.co/edit/yrPSBbGftdTI8N4lASyG

On Fri, Mar 24, 2017 at 4:39 PM, Felix Itzenplitz notifications@github.com wrote:

Just did it for you: https://plnkr.co/edit/yrPSBbGftdTI8N4lASyG

Do you getting same error as here ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cebor/angular-highcharts/issues/35#issuecomment-288994959, or mute the thread https://github.com/notifications/unsubscribe-auth/AQTCVu__7xNTa2x7mZjeDTHvE66fCitMks5ro6RugaJpZM4MnHsO .

[cebor]

import { Highcharts } from 'angular-highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

This should fix it! I also updated the plunker.

[arunsaibk]

hi

Thank you very much, it finally worked with your fix..

I am really more thanks to you

regards, Arunsai B K

On Fri, Mar 24, 2017 at 4:46 PM, Felix Itzenplitz notifications@github.com wrote:

import { Highcharts } from 'angular-highcharts';require('highcharts/highcharts-more')(Highcharts);require('highcharts/modules/solid-gauge')(Highcharts);

This should fix it!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cebor/angular-highcharts/issues/35#issuecomment-288996390, or mute the thread https://github.com/notifications/unsubscribe-auth/AQTCVmZGeDKyngz_NWhvFH-7CGDxHVFgks5ro6YcgaJpZM4MnHsO .