<p><span style="font-size:14px;">Hi,</span></p>
<p>​attached is a screenshot of the donut chart I am trying to alter slightly.</p>
<p>I'd like the chart's title to be in the center of the pie using "verticalAlign"</p>
<p>this seems easy in highcharts as these samples show:</p>
<p><span style="font-size:14px;"><a data-ipb='nomediaparse' href='
http://jsfiddle.net/LHSey/129/'>http://jsfiddle.net/LHSey/129/</a> and <a data-ipb='nomediaparse' href='
http://jsfiddle.net/pDdcd/'>http://jsfiddle.net/pDdcd/</a></span></p>
<p><span style="font-size:14px;">but getting it to work in Birt isn't. At least not to me.</span></p>
<p> </p>
<p><span style="font-size:14px;">I tried it first by editing the xml directly (got errors) and then using a variety of client scripts on the chart, but somehow it doesn't work.</span></p>
<p><span style="font-size:14px;">I tried this:</span></p>
<p><span style="font-size:11px;">beforeRendering: </span><span style="font-size:11px;color:rgb(147,26,104);"><b>function</b></span><span style="font-size:11px;">(options, chart)</span></p>
<p style="font-size:11px;">{</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;">title: {</p>
<p style="font-size:11px;">text: <span style="color:#3933ff;">""</span>,</p>
<p style="font-size:11px;">margin: 0,</p>
<p style="font-size:11px;">y: 0,</p>
<p style="font-size:11px;">x: 0,</p>
<p style="font-size:11px;">align: <span style="color:#3933ff;">'center'</span>,</p>
<p style="font-size:11px;">verticalAlign: <span style="color:#3933ff;">'middle'</span>,</p>
<p style="font-size:11px;">},</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>function</b></span> addTitle() {</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>if</b></span> (<span style="color:#931a68;"><b>this</b></span>.title) {</p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>this</b></span>.title.destroy();</p>
<p style="font-size:11px;">}</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>var</b></span> r = <span style="color:#931a68;"><b>this</b></span>.renderer,</p>
<p style="font-size:11px;">x = <span style="color:#931a68;"><b>this</b></span>.series[0].center[0] + <span style="color:#931a68;"><b>this</b></span>.plotLeft,</p>
<p style="font-size:11px;">y = <span style="color:#931a68;"><b>this</b></span>.series[0].center[1] + <span style="color:#931a68;"><b>this</b></span>.plotTop;</p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>this</b></span>.title = r.text(<span style="color:#3933ff;">'TITLE'</span>, 0, 0)</p>
<p style="font-size:11px;">.css({</p>
<p style="font-size:11px;">color: <span style="color:#3933ff;">'#000000'</span>,</p>
<p style="font-size:11px;">fontSize: <span style="color:#3933ff;">'16px'</span>,</p>
<p style="font-size:11px;">fontFamily: <span style="color:#3933ff;">'Corbel'</span></p>
<p style="font-size:11px;">}).hide()</p>
<p style="font-size:11px;">.add();</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>var</b></span> bbox = <span style="color:#931a68;"><b>this</b></span>.title.getBBox();</p>
<p style="font-size:11px;"><span style="color:#931a68;"><b>this</b></span>.title.attr({</p>
<p style="font-size:11px;">x: x - (bbox.width / 2),</p>
<p style="font-size:11px;">y: y</p>
<p style="font-size:11px;">}).show();</p>
<p style="font-size:11px;">}</p>
<p style="font-size:11px;">});</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;">},</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="font-size:14px;">and this short one didn't work either:</span></p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;">beforeRendering: <span style="color:rgb(147,26,104);"><b>function</b></span>(options, chart)</p>
<p style="font-size:11px;">{</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;">title: {</p>
<p style="font-size:11px;">verticalAlign: <span style="color:#3933ff;">'middle'</span>,</p>
<p style="font-size:11px;">floating: <span style="color:#931a68;"><b>true</b></span></p>
<p style="font-size:11px;">},</p>
<p style="font-size:11px;">},</p>
<p style="font-size:11px;"> </p>
<p style="font-size:11px;"><span style="font-size:14px;">Could someone point in the right direction?</span></p>
<p style="font-size:11px;"><span style="font-size:14px;">thanks!</span></p>
