question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Need to create Solidgauge using highcharts in angular2

See original GitHub issue

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
            }]
        }]
    });

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
arunsaibkcommented, Mar 24, 2017

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 .

0reactions
ceborcommented, Mar 24, 2017
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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to create a solid gauge chart with Highcharts in angular 6?
You have made a simple typo. The solid gauge series is called solidgauge instead of solidGauge . chart: { 'type': 'solidgauge' }. Demo:....
Read more >
how to display a gauge · Issue #21 - GitHub
Hi all, I'm trying to display a highcharts solidgauge and I'm getting error #17. My typescript looks like this import {CHART_DIRECTIVES} ...
Read more >
Value not visible in solid-gauge chart in newer versions
I am using Angular 7 with angular2-highcharts version 0.5.5. You do not have the required permissions to view the files attached to this...
Read more >
Beautiful and Dynamic Charts with Angular2+ and HighCharts
Creating a solid gauge graph to show speed values. ... Before installing angular2-highcharts we need to install certain dependencies ...
Read more >
Angular Highcharts Solid Gauge - StackBlitz
angular-highcharts stock demo.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found