Highcharts - Torus Title centering

Positioned in Chart load event

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>


<div id="container1" style="min-width: 350px; min-height: 350px; margin: 0 auto"></div>
<div id="container2" style="min-width: 350px; min-height: 350px; margin: 0 auto"></div>
<br><br>
<h4>Center positioning the Title has many challenges:</h4>
Useful doc: https://www.highcharts.com/docs/chart-design-and-style/design-and-style#layout-and-positioning<br>
1) You need to first identify what object you want to be then center of?
The obvious Highchart objects are 'contianer' or 'plotarea' neither which are correct as the Pie labels fit within the plotarea. And due to varying length labels text, the Pie gets offset from the middle to allow for this especially when the contianer width falls below ~300px<br>
Note: the plotarea is not an actual svg element, but a virtual object held with HC code used to calculate svg element X/Y coordinates from. Beware a lot of svg positioning is absolute WRT svg contianer<br>
So the object you want to be center of is the 'seriesGroup'.<br><br>
2) The Title text object can be positioned by updating it's X/Y but the X must be set with offset from Plotarea Center (as the HC config is set to title.align:'center'), and the Y must be set with absolute from plotarea top.
The seriesGroup object offers a 'plotbox' object which offeres many of the properties you require.
<br><br>
3) The svg 'text' y offset sets the position of the baseline of the text (not top of text). To make it easier for vertical middle alignment, change the style to have "dominantBaseline": "middle" for text object.
<br><br>
This all works nicely for charts with whatever labels and whatever legend positioning is used, but doesn't handle multiple lines of text (putting '&lt;br&gt;' ) in title text.

JavaScript

var cfg = {
  "data": {
    "csv": "Name;Value\nIE;10\nFF;20\nChromium;41\n"
  },
  "chart": {
    "type": "pie",
    "events": {
      "load": function() {

        this.update({
          title: {
            x: this.series[0].center[0] + this.plotBox.x - this.chartWidth / 2,
            y: this.series[0].center[1] + this.plotBox.y / 2 
          }
        });
      }
    }
  },
  "plotOptions": {
    "series": {
      "showInLegend": true,
      "dataLabels": {
        "format": "<b>{point.name}</b>: {point.y}",
        "enabled": true
      }
    }
  },
  "tooltip": {
    "pointFormat": "{series.name}: <b>{point.y} ({point.percentage:.1f}%)</b>"
  },
  "legend": {
    "layout": "horizontal",
    "verticalAlign": "bottom",
    "x": 0,
    "y": 0,
    "align": "center"
  },
  "title": {
    "y": 0,
    "floating": true,
    "x": 0,
    "text": "OXO",
    "style": {
      "fontSize": "60px",
      "dominantBaseline": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "series": [{
    "innerSize": "50%"
  }]
}


Highcharts.chart('container1', cfg);

cfg.legend.layout = "vertical";
cfg.legend.verticalAlign = "middle";
cfg.legend.align = "right";

Highcharts.chart('container2', cfg);