ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Axis label overlap
Posted by Electron Shepherd on May-26-2015 04:39
| Reply | Monitor
Attachments:
When specifying large font sizes for an axis, I'm seeing "overlap" on the labels, which looks bad. My code is below:

#include "chartdir.h"

int main(int argc, char *argv[])
{
    // The data for the line chart
    double data[] = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 91, 60, 55,
        53, 35, 50, 66, 56, 48, 52, 65, 62};

    // The labels for the line chart
    const char *labels[] = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
        "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",
        "24"};

    // Create a XYChart object of size 250 x 250 pixels
    XYChart *c = new XYChart(450, 350);

    // Set the plotarea at (30, 20) and of size 200 x 200 pixels
    c->setPlotArea(130, 120, 200, 200);

    // Add a line chart layer using the given data
    c->addLineLayer(DoubleArray(data, (int)(sizeof(data) / sizeof(data[0]))));

    // Set the labels on the x axis.
    c->xAxis()->setLabels(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0]
        ))));

    // Display 1 out of 3 labels on the x-axis.
    c->xAxis()->setLabelStep(3);

c->yAxis()->setLabelStyle("Courier New", 48);

    // Output the chart
    c->makeChart("simpleline.png");

    //free up resources
    delete c;
    return 0;
}


This is the "simpleline" sample application, with the line

c->yAxis()->setLabelStyle("Courier New", 48);

added, and the parameters to the XYChart and setPlotArea updated so that the whole chart can be seen. Those are the only changes made. The result is attached, and as you can see, the Y axis labels overlap.

While I accept that for a 200 pixel high chart, a label size of 48 point is silly, our application allows end-users to fully specify the chart sizes, fonts and sizes used, so getting charts like this is possible, and will make our software look bad. How can I ensure that ChartDirector will reduce the number of labels so that they all fit without overlapping?
simpleline.png

  Re: Axis label overlap
Posted by Peter Kwan on May-26-2015 23:35
| Reply | Monitor
Hi Electron,

The label density is configurable using Axis.setTickDensity. The default is 20 pixels for the
vertical axis, which means if the labels are automatically determined by ChartDirector, the
tick position will be at least 20 pixels apart.

Traditionally, the unit of the font is in "points", where one point is equal to around 1/72
inches. In a computer, the actual display size depends on the monitor, and historically,
Windows by default assume the display is 96 pixels per inch. That means The font height in
pixels would be (fontHeightInPoints * 96 / 72). Since you may want to leave some margin
between the lines,  such as half the font height between lines, so you may consider to set
the tick spacing to  (fontHeightInPoints * (96 / 72) * (3 / 2)) = fontHeightInPoints * 2. The
code is then:

c->yAxis()->setTickDensity(fontHeightInPoints * 2);

The above should work for a plain horizontal one line label. (If the label can rotate, or can
contain multiple fonts or embedded images, such as in the "Horizontal Box-Whisker Chart"
sample code, then the situation will become much more complicated.)

Hope this can help.

Regards
Peter Kwan