|
 Axis labels change position on setting font size |
| Posted by James on Jul-01-2017 03:36 |
|
Hello,
I'm trying to change the font size of the labels on an axis in an XYChart but when I change it to 6, the labels on the Y axis seem to shift right into the chart (see image attached - the 0 looks correct but the 10,000, 20,000, 30,000, and 40,000 look shifted).
This is the code I'm using:
ChartDirector.XYChart chart = new ChartDirector.XYChart(700, 194);
chart.setPlotArea(40, 0, 700 - 80, 194 - 40);
ChartDirector.PlotArea plotArea = chart.getPlotArea();
plotArea.setGridColor(GRID_LINE_COLOR, 0xFF0000, GRID_LINE_COLOR, GRID_LINE_COLOR);
plotArea.setGridWidth(1, 0, 1, 1);
double axisLabelFontSize = 6; //Toggle this value between 6 and 8
chart.xAxis().setLinearScale(2016, 2035, 1, 0.5);
chart.xAxis().setTickLength(0);
chart.xAxis().setLabelStyle("", axisLabelFontSize);
chart.yAxis().setLinearScale(0, 40000);
chart.yAxis().setTickLength(0);
chart.yAxis().setLabelFormat("{value|,}");
chart.yAxis().setLabelStyle("", axisLabelFontSize);
BarLayer bl = chart.addBarLayer();
bl.setXData(new double[] { 2022, 2023, 2024 });
bl.addDataSet(new double[] { 2000, 8000, 9000 }, 0x0000FF, "Random data");
bl.addDataSet(new double[] { 2000, 8000, 9000 }, 0x00FF00, "Random data2");
bl.addDataSet(new double[] { 2000, 8000, 9000 }, 0xFF0000, "Random data3");
bl.setBarGap(0.4, Chart.TouchBar);
chart.makeChart("cdChart.svg");
I'm using the trial version currently.
Please let me know what can be done about this.
James
|
| Re: Axis labels change position on setting font size |
| Posted by Peter Kwan on Jul-02-2017 22:31 |
|
Hi James,
I have just tried to view your SVG using the Google Chrome browser. It displays normally if it is viewed at its natural size. See scrshot_svg1.png. (In its natural size, the text should look like 6pt in size.)
If I view the SVG using increasingly larger size (by dragging the window border), the text length does not increase smoothly but jumps in steps. As far as I know, this is because browsers tend round the SVG text to integer pixel size. For example, 9.5 pixels can be rounded to 10 pixels for text. If there are many characters, the accumulated error can be enough to cause the labels to extend into the axis. I have attached another screen shot (scrshot_svg2.png) that shows how the same SVG looks like when viewed in a magnified size.
So the issue is not related to ChartDirector. It is just how browsers display SVG. The text length can be longer or shorter than the correct length. The issue is more visible for small font size, because at small font size, even 0.5 pixel is a large error comparing to the font size.
Are you intending to create a chart using a small font size, and they display it at a bigger size?
Regards
Peter Kwan
|
| Re: Axis labels change position on setting font size |
| Posted by James on Jul-05-2017 00:41 |
|
Hey Peter, thanks for getting back to me.
What we're trying to do is create chart svgs and then put them into pdf files for reports.
I've attached what the report looks like right now with the 8pt font size. We feel like the 8pt is too large so I just changed that to 6pt and then the labels don't look correct at all, the Y labels intersect with the axis and the x labels are shifted a bit to the right that they no longer look centered in the interval.
If you have any tips on how to deal with this, it would be greatly appreciated.
James
|
| Re: Axis labels change position on setting font size |
| Posted by James on Jul-05-2017 05:58 |
|
I wanted to add that when I change the size of the browser, and go pretty small, it looks like the problem is still there, the labels other than 0 are shifted a bit to the right (see image please).
I looked at the svg file in a text editor and I can see the code that draws the labels:
<text id='b38' style="font-family:'Arial';font-size:8px;" x='16' y='118'>10,000</text>
Maybe there is a bug somewhere that causes the x value to be wrong? It should be less to prevent intersection with the axis.
It's just a thought I had.
James
|
| Re: Axis labels change position on setting font size |
| Posted by Peter Kwan on Jul-06-2017 01:42 |
|
Hi James,
For your PDF, it seems the 8pt and 6pt font size are the same. I suspect there is a bug in your PDF software that it does not handle the SVG font size correctly.
ChartDirector position the text assuming is 6pt font size. If the PDF render it as 8pt font size, the text will be longer than expected. As the result, the text will go into the plot area.
Even if the text is rendered using 6pt font size, there can still be difference in the text length. Consider the label "10,000". Different software and operating systems can render the characters slightly differently. The difference usually will be less than 1 pixel for each character. But for small font size, even less than 1 pixel can become significant if the text has a number of characters. The IE screen shot you attached is probably due to this phenomena.
For your case, if your intention is to create PDF, and the PDF software cannot handle SVG font size correctly, you may consider to output the chart in PDF instead, and then import the PDF chart to your PDF. (Many PDF software can insert one PDF into another.)
If the labels are still a few pixels longer than expected and touching the axis, you may consider to just increase the "label gap". It is like:
c.yAxis().setLabelGap(7);
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(James)