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

Message ListMessage List     Post MessagePost Message

  How can I shrink numbers to fit the bar width
Posted by David Thielen [Windward Studios] on May-28-2018 03:25
| Reply | Monitor
Attachments:
Hi all;

I am working on code I inherited and have a very very minor understanding of ChartDirector so far.

I am trying to have the numbers rendered in the top of the bars in this chart be horizontal. I'm guessing either the font for the number is too large or the region the text is rendered in is too narrow.

How can I tell it to shrink the text so the numbers can appear horizontally on a single line?

thanks - dave
NumbersTooFat.png
NumbersOneLine.png

  Re: How can I shrink numbers to fit the bar width
Posted by Peter Kwan on May-28-2018 17:22
| Reply | Monitor
Attachments:
Hi David,

The setXData provides the x-coordinate of the bars. It does not necessarily mean that they are the x-axis labels. For example, the y-axis also have different number of labels from the number of bars.

For your case, it is possible you have other lines of code that sets the x-axis labels, such as Axis.setDateScale.

For your case, the best method is to use Axis.setLabels for the x-axis, and do not use Layer.setXData. Below is an example that I would use to achieve the chart you want. It is written in Java/C# and is modified from the "Multi-Color Bar Chart" sample code that comes with ChartDirector (http://www.advsofteng.com/doc/cdnet.htm#colorbar.htm)


// The data for the bar chart
double[] data = {85.23, 56, 79.33, 21, 67.93};

// The labels for the bar chart
string[] labels = {"12/1/2017", "1/1/2018", "2/1/2018", "3/1/2018", "4/1/2018"};

// The colors for the bars
int[] colors = {0x4374a0, 0x5089bc, 0x5b9bd5, 0x97b9e0, 0xbed1ea};

// Create a XYChart object of size 700 x 370 pixels
XYChart c = new XYChart(700, 370, 0xffffff, 0xcccccc);
c.setRoundedFrame();

// Set default text color to dark grey (0x333333)
//c.setColor(Chart.TextColor, 0x333333);

// Add a title box using grey (0x555555) 12pt Arial font
c.addTitle("Multi-Color Bar Chart", "Arial Bold", 12).setMargin(12);

// Set the plotarea at (50, 30) and of size 630 x 300 pixels, with transparent background and
// border and light grey (0xcccccc) horizontal grid lines
PlotArea p = c.setPlotArea(50, 40, 620, 300, Chart.Transparent, -1, Chart.Transparent);
p.setGridColor(0x888888, Chart.Transparent, Chart.Transparent, Chart.Transparent);

// Set the x and y axis label font to 10pt Arial
c.xAxis().setLabelStyle("Arial", 10);
c.yAxis().setLabelStyle("Arial", 10);

// Add a multi-color bar chart layer with transparent border using the given data
BarLayer layer = c.addBarLayer3(data, colors);
layer.setBorderColor(Chart.Transparent);
layer.setBarGap(0.6);

layer.setDataLabelFormat("${value|2}");
layer.setDataLabelStyle("Arial", 10);

// Set the labels on the x axis.
c.xAxis().setLabels(labels);
c.xAxis().setTickOffset(0.5);

// For the automatic y-axis labels, set the minimum spacing to 40 pixels.
c.yAxis().setTickDensity(20, 4);

// Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.PNG);


Hope this can help.

Regards
Peter Kwan
colorbar_test.png

  Re: How can I shrink numbers to fit the bar width
Posted by David Thielen [Windward Studios] on May-28-2018 22:10
| Reply | Monitor
Peter - thank you!