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

Message ListMessage List     Post MessagePost Message

  Stacked bar chart - is selective border thickness change possible?
Posted by Joe Chung on Mar-27-2024 22:07
Attachments:
Hi.

I have a question on the capability of stacked bar chart.
Would it be possible to change one of the series' border thickness among stacked bars?

I uploaded changed example from existing stacked bar graph of help page, like attachment.
I want to know whether it is possible to change the thickness of only one of stacked bars, and if this is possible, would you help me how to implement in  C#?

Thanks / Joe
stacked_barchart_example.PNG

  Re: Stacked bar chart - is selective border thickness change possible?
Posted by Peter Kwan on Mar-28-2024 02:03
Attachments:
Hi Joe Chung,

I can only achieve this by using two bar layers with identical data. The bottom layer is the stacked bar chart with thick borders. All 3 segment will have thick borders. The top layer is the same stacked bar chart but with no border, and with the middle segment using the Chart.Transparent fill color. The top layer covers up the top and bottom segments, so you they have no border. Only the middle segment reveal the border.

Following is the code, modified from the original Stacked Bar Chart sample code.

// The data for the bar chart
double[] data0 = {100, 115, 165, 107, 67};
double[] data1 = {85, 106, 129, 161, 123};
double[] data2 = {67, 87, 86, 167, 157};

// The labels for the bar chart
string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"};

// Create a XYChart object of size 600 x 360 pixels
XYChart c = new XYChart(850, 360);

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

// Set the plotarea at (70, 20) and of size 400 x 300 pixels, with transparent
// background and border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 20, 400, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);

// Add a legend box at (480, 20) using vertical layout and 12pt Arial font. Set
// background and border to transparent and key icon border to the same as the fill
// color.
LegendBox b = c.addLegend(480, 20, true, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setKeyBorder(Chart.SameAsMainColor);

// Set the x and y axis stems to transparent and the label font to 12pt Arial
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);

// Add a stacked bar layer
BarLayer layer = c.addBarLayer2(Chart.Stack);

// Add the three data sets to the bar layer
layer.addDataSet(data0, 0xaaccee, "Server # 1");
layer.addDataSet(data1, 0xbbdd88, "Server # 2");
layer.addDataSet(data2, 0xeeaa66, "Server # 3");

// Set the bar border to transparent
layer.setBorderColor(0xff0000, Chart.flatBorder(6));

// For a vertical stacked bar with positive data, the first data set is at the bottom. For the
// legend box, by default, the first entry at the top. We can reverse the legend order to make
// the legend box consistent with the stacked bar.
layer.setLegendOrder(Chart.ReverseLegend);

BarLayer layer2 = c.addBarLayer2(Chart.Stack);

// Add the three data sets to the bar layer
layer2.addDataSet(data0, 0xaaccee, "Server # 1");
layer2.addDataSet(data1, Chart.Transparent, "Server # 2");
layer2.addDataSet(data2, 0xeeaa66, "Server # 3");
layer2.moveFront(layer);

layer2.setLegendOrder(Chart.NoLegend);

// Enable labelling for the entire bar and use 12pt Arial font
layer2.setAggregateLabelStyle("Arial", 12);

// Enable labelling for the bar segments and use 12pt Arial font with center alignment
layer2.setDataLabelStyle("Arial", 10).setAlignment(Chart.Center);

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

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

// Add a title to the y axis using dark grey (0x555555) 14pt Arial Bold font
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial Bold", 14, 0x555555);

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


Best Regards
Peter Kwan
stackedbar.png

  Re: Stacked bar chart - is selective border thickness change possible?
Posted by Joe Chung on Mar-28-2024 08:56
Hi Peter

This is ingenious idea!   I couldn't think about layering two graphs and making one of them transparent.
Thanks for fast reply and solution to my problem.

Best Regards / Joe