Align DataLabels of Solidguage in Highcharts

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.