Need to create Solidgauge using highcharts in angular2
See original GitHub issueI 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:
- Created 6 years ago
- Comments:7 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:
This should fix it! I also updated the plunker.