Home
Analytics
Bar / Column Chart Axis Labels Misaligned
anonymoose
<p>Greetings BIRTers!</p>
<p> </p>
<p>I'm seeing what appears to be a bug of label alignment in bar charts. In a horizontally spanning bar chart, the category labels along the vertical axis are non-uniformly right aligning (png example attached)</p>
<p> </p>
<p> </p>
<p>What I know for sure:</p>
<p> </p>
<p>- changing font family doesn't fix the issue and causes the mis-alignement to change slightly</p>
<p>- setting the chart to PNG instead of SVG actually fixes the alignment issue - but quality of text is reduced drastically and is unacceptable for our reports</p>
<p>- left aligning the labels aligns them correctly (but right align looks better and is the current requirement)</p>
<p>- setting all labels to a common value (ie 'abc') aligns them correctly relative to eachother</p>
<p> </p>
<p>Looking at the SVG markup, it seems that the X and Y coordinates are calculated / set explicitly for each label. The X value seems to be off ever so slightly. So the issue seems to be happening when creating the SVG.</p>
<p> </p>
<p>Is this a known bug? Or am I doing something wrong?</p>
<p> </p>
<p>Thanks in advance!</p>
Find more posts tagged with
Comments
anonymoose
<p>I'm surprised no one has reported this. I've marked up the original screenshot to explicitly demonstrate the misalignment. Any suggestions on how to fix/workaround this would be appreciated.</p>
<p> </p>
<p> </p>
Mad1s0n
<blockquote class="ipsBlockquote" data-author="anonymoose" data-cid="140782" data-time="1450707029">
<div>
<p>I'm surprised no one has reported this. I've marked up the original screenshot to explicitly demonstrate the misalignment. Any suggestions on how to fix/workaround this would be appreciated.</p>
</div>
</blockquote>
<p>I am facing the same problem with label alignment. Is anyone has a clue, I'd appreciate any help too</p>
Mad1s0n
<p>I've found this workaround to use your second option.</p>
<p>If you set your chart as PNG and add</p>
<pre class="_prettyXprint _lang-js">
reportContext.getAppContext().put("CHART_RESOLUTION", 600);
</pre>
<p>in the beforeFactory of the report, the quality of the chart becomes satisfying and the labels are well aligned</p>
<p> </p>
<p>source: <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/topic/11781-poor-chart-font-quality/'>http://developer.actuate.com/community/forum/index.php?/topic/11781-poor-chart-font-quality/</a></p>
;
anonymoose
<p>Thanks Mad1s0n.</p>
<p> </p>
<p>I'll try and report back.</p>
anonymoose
<p>Works for PNG but not SVG, which is what we are using.</p>
<p> </p>
<p>My workaround is to left align the labels.</p>
jfranken
<p>Hi anonymoose,</p>
<p> </p>
<p>I'm not sure why the alignment is off. I tried different fonts in the latest version of open source BIRT and the results varied. The best font that I could find in terms of alignment was Courier New. Also, I tested this issue in the commercial version of BIRT. I tried all of the different output formats (SVG, HTML5, JPG, etc.) and I tried a number of different fonts. This issue did not occur for any of the scenarios I tested in commercial BIRT.</p>
<p> </p>
<p>Regards,</p>
<p>Jeff</p>