Align DataLabels of Solidguage in Highcharts - html

Question

I am trying to create a solidguage highchart, but i am not able to align datalabels as per the visual. My code for the chart is:
function dcadjustmentschart() {
$('#adjustments-chart1').highcharts({
chart: {
type: 'solidgauge',
marginTop: 0,
}
},
title: {
text: null,
},
credits : {
enabled : false
},
exporting: {
enabled: false
},
tooltip: {
borderWidth: 0,
enabled: true,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '100%',
borderWidth: 2
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '5px',
},
dataLabels: {
borderWidth: "0",
marginTop: "0"
}
},
series: [{
enableMouseTracking: false,
name: 'Forward <br/> By <br/> 45',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 45,
}],
dataLabels: {
formatter: function () {
return this.series.name
},
y: 25,
x: -50,
styles: {
fontSize: "12px",
borderWidth: "0",
fontWeight: "bold",
width: "50px",
marginleft: "50px"
}
}
}]
});
};
Above is the output.
This is what I need:
I want to align the text "Forward by 45" in the center of the circle
I am using <br/> to break the texts to the second line, how to get rid of that?
I want to change the background color of the circle

Answer 1

I think that you have small mistake in your code. Instead of dataLabels.styles you should use dataLabels.style. Here you can see information about this parameter in Highcharts API:
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.style
You can use 'text-anchor' property width dataLabels.align and dataLabels.verticalAlign to position your text in the center of you pane:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.align
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.verticalAlign
You can add backgroundColor inside your background array:
http://api.highcharts.com/highcharts#pane.background
function dcadjustmentschart() {
$('#container').highcharts({
chart: {
type: 'solidgauge',
marginTop: 0,
},
title: {
text: null,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
backgroundColor: '#bada55',
borderWidth: 0,
outerRadius: '100%'
}, {
outerRadius: '100%',
innerRadius: '100%',
borderWidth: 2,
borderColor: 'black'
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '5px',
dataLabels: {
padding: 0,
x: 25,
align: 'center',
verticalAlign: 'middle',
}
},
},
series: [{
enableMouseTracking: false,
name: 'Forward By 45',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 45,
}],
dataLabels: {
overflow: "none",
crop: false,
borderWidth: 0,
formatter: function() {
return this.series.name
},
y: 0,
style: {
fontSize: "12px",
fontWeight: "bold",
width: "50px",
textAnchor: 'middle',
}
}
}]
});
};
dcadjustmentschart()
Here you can see an example how it can work:
http://jsfiddle.net/cune5qs5/25/
Kind regards.