I have tried config gauge highchart like
This is my code jsfiddle code
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
}
I want to make larger for width of circle, change the color of line.
Please help me, thank you.
You can add thickness property of each plotBand
plotBands: [{
thickness: 50,
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
thickness: 50,
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
thickness: 50,
from: 160,
to: 200,
color: '#DF5353' // red
}]
And to change the color of line use dial option to your series
series: [{
name: 'Speed',
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 5,
baseLength: '5%',
baseWidth: 10,
rearLength: '0%',
},
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
https://jsfiddle.net/viethien/8q56hmz2/17/
Related
I have a nice gauge that displays a percentage value like so:
The options are:
{
title: false,
legend: false,
chart: {
type: 'solidgauge',
width: 150,
height: 150,
},
pane: {
size: '100%',
startAngle: 0,
background: {
backgroundColor: '#eee',
outerRadius: '100%',
innerRadius: '60%',
borderWidth: 0,
shape: 'arc',
},
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
enabled: false,
},
labels: {
enabled:false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
format: '{y}%',
style: {
fontSize: '1rem',
fontWeight: 'normal',
}
},
}
},
series: [{
data: [{
y: 75,
color: cyan,
}]
}]
}
But now I need two values:
I'd have expected to add some stacking option somewhere, along with something like:
series: [{
data: [{
y: 10,
color: blue,
}, {
y: 65,
color: cyan,
}]
}]
but it doesn't work. And I haven't found any example for this use-case over the internet either. :(
How can I achieve this?
There is no stacking option for soliidgague. You need to count expected values by yourself to achieve the effect from provided image:
series: [{
data: [{
y: 75,
color: 'cyan',
},
{
y: 15,
color: 'blue',
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/4zq6ehfj/
As #magdalena said, unfortunately there is no stacking option in a solidgauge chart :(
I succeeded to fake this by applying the following transformation:
const absoluteValues = [{
y: 75,
color: 'cyan',
},
{
y: 15,
color: 'blue',
}];
const options = {
series: [{
name: 'My serie',
data: [].concat(absoluteValues).reduce((acc, val) => {
return [...acc, {
...val,
y: acc.reduce((result, {y}) => result + y, val.y),
}]
}, []).reverse()
}],
};
series: [
{
name: 'Operating Systems',
data: [{ y: 10, color: white, }]
size: '60%'
},
{
name: 'Browsers',
data: [{ y: 10, color: blue, }],
size: '80%',
}, {
name: 'Versions',
data: [{ y: 65, color: cyan, }],
size: '100%',
}]
I'm playing with bullet chart and can't make bullet higher and bands thinner.
What I have:
What I want:
I'm tried set thickness but it's not helps:
plotBands: [
{
from: 0,
to: 50,
color: "#61Cd8D",
thickness: '5%'
}
Here is example:
https://jsfiddle.net/e9z5rvat/2/.
Help me please
Plot lines occypy the entire height of the plot area, and series is not visible outside of it. As a solution, instead of using plot lines, you can add a stacked column series:
series: [{
stacking: 'normal',
type: 'column',
groupPadding: 0.1,
pointPadding: 0,
enableMouseTracking: false,
data: [{
x: 0,
y: 50,
color: "#61Cd8D"
},
{
x: 0,
y: 50,
color: "#E6E4A5"
},
{
x: 0,
y: 51,
color: "#F0A434"
}
]
}, {
data: [{
y: 0,
target: 45
}],
groupPadding: 0,
pointPadding: 0,
targetOptions: { // Options related with look and position of targets
width: '100%', // The width of the target
height: 5, // The height of the target
borderWidth: 0, // The border width of the target
borderColor: 'black', // The border color of the target
color: 'black' // The color of the target
}
}]
Live demo: https://jsfiddle.net/BlackLabel/wjyadh7f/
API Reference: https://api.highcharts.com/highcharts/series.column.groupPadding
Is it possible to remove/hide the concentric circles (yAxis plotLines) that Highcharts automatically draws in polar charts? Setting the yAxis lineWidth to zero did not work. Also, setting the yAxis plotLines to an empty array did not work.
These options successfully create a green plot band filling the chart, but do not create a red plot line in the chart. However, what appears to be a light grey y-axis plot line circle is drawn at y=5. This is the line I want to remove or hide.
{
colors: COMPETITOR_COLORS,
chart: {
polar: true,
backgroundColor: 'pink',
plotBackgroundColor: KAHN_DARK_GRAY_BG,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
labels: {
format: '{}',
},
},
yAxis: {
min: 0,
max: 10,
plotLines: [{color: 'red', value: 7, width: 3}],
plotBands: [{color: 'green', from: 0, to: 10}],
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
The lines that you want to remove are grid lines, not plot lines. To remove them use:
yAxis: {
gridLineWidth: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/46xvajn5/
API Reference: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/
I would like to display the ranges as my legend. An example gauge would be something like this
Can I have it so that I can have legends with colors and the text [Bad/Good/Excellent] based on the values?
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
Sure, just create separate series for legend, and enable them: http://jsfiddle.net/kbvC3/734/
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}, {
showInLegend: true,
name: "Bad",
color: '#55BF3B' // green
}, {
showInLegend: true,
name: "Good",
color: '#DDDF0D' // yellow
}, {
showInLegend: true,
name: "Excellent",
color: '#DF5353' // red
}]