highchartsr-highcharterangular2-highcharts

Not able to center align subtitle in highchart donut chart


I want to show subtitle at the center of the chart. When I set below subtitle properties it will center the subtitle by considering div height and width it is not showing subtitle at the center of chart. I want subtitle tobe shown at chart center, if chart size get's adjusted dynamically then subtitle should auto adjust to center. I have tried using y property from subtitle but it still shows subtitle at same location even after chart height / width get's changed.

Properties used - align: 'center', verticalAlign: 'middle', floating: true, y:0 used this in few cases

Issue is that if I use y to center align and if chart size is changed then again subtitle is showing at same location, not at center of the chart.

Attached image shows subtitle is centered to div not to chart -

Check image by clicking on this - chart

Does anyone know how to center the subtitle?


Solution

    1. You can align the subtitle using align, verticalAlign and y options. The subitlte also rescales correctly when changing chart size. Example demo: https://jsfiddle.net/BlackLabel/9zjv7eqh/

    2. Another way could be to render the subtitle using SVG Renderer. Example demo: https://jsfiddle.net/BlackLabel/vg9noh6y/

      render() {
       const chart = this,
         series = chart.series[0]
       let customLabel = chart.options.chart.custom.label
      
       if (!customLabel) {
         customLabel = chart.options.chart.custom.label = chart.renderer
           .label("Total<br/>" + "<strong>2 877 820</strong>")
           .css({
             color: "#000",
             textAnchor: "middle",
           })
           .add()
       }
      
       const x = series.center[0] + chart.plotLeft,
         y = series.center[1] + chart.plotTop - customLabel.attr("height") / 2
      
       customLabel.attr({
         x,
         y,
       })
       customLabel.css({
         fontSize: `${series.center[2] / 12}px`,
       })
      },