Multiple chart areas in one column

Question

I have a chart with multiple chart areas. When I press a button a new chart area is being created etc. My problem is that after adding some chart areas I get the following result : I want to have each chart area in only one column, one after the other like this :

is this possible ?

EDIT: Adding chart areas dynamically

on the left it is the chart with 3 chart areas added and the right is the chart with 4 areas.

score 2 · Answer 1 · answered Apr 15 '21 at 13:06

2

Use property ChartArea.AlignWithChartArea

Through the use of the AlignWithChartArea, AlignmentOrientation and AlignmentStyle properties, it is possible to align or synchronize two or more chart areas horizontally, vertically or both.

First, set the AlignWithChartArea property to the name of a ChartArea object. This chart area will then be aligned, based on the AlignmentStyle setting, which defines the alignment to use, and the AlignmentOrientation setting, which defines the elements of the chart area that should be used to set the alignment.

So to put ChartArea2 below ChartArea1:

ChartArea2.AlignWithChartArea1;
ChartArea2.AlignmentStyle = AreaAlignmentStyles.Position;
ChartArea2.AlignmentOrientation = AreaAlignmentOrientation.Vertical;

answered Apr 15 '21 at 13:06

Harald Coppoolse

28,834
7
67
116

Thanks a lot for your answer. I applied what you proposed and it works, but in my case I want this to happen each time the user adds a new chart area, and if the user adds too many areas I can no longer see the initial chart areas. My goal is to minimize the old so that all chart areas can be seen at the same time. – nickolas Apr 15 '21 at 14:28
1

Your actual goal seems a bit unclear.. - _My goal is to minimize the old so that all chart areas can be seen at the same time_ By minimize do you mean make smaller? (The usualy meaning would be to turn into an icon). This is not supported really but if you really want to you can write a ChartArea manger that does that. The key is to set the ChartArea.Position, which is an ElementPosition. Its values are in percentages of the chart's ClientArea..[Examples](https://stackoverflow.com/search?q=user%3A3152130+ElementPosition) of setting a chartarea.Position.. – TaW Apr 15 '21 at 14:40
2

The 1st line ought to use the chartarea name, maybe ChartArea2.AlignWithChartArea = "ChartArea1"; – TaW Apr 15 '21 at 14:40
I edited my question to make clear what I mean – nickolas Apr 16 '21 at 07:55
This seems to work only with up to 3 chart areas no more – nickolas Apr 16 '21 at 10:11
I got it to work fine with 4 CAs only, (after correcting your indexing) - For full control you may need to set the Positions of the chartareas. – TaW Apr 16 '21 at 12:46
__Instead__ of the alignment you can set positions, maybe like so : `chart1.Legends.Clear(); int numCAs = Areas.Count; for (int i = 0; i < numCAs; i++) { Areas[i].Position = new ElementPosition(0, i * 100f / numCAs, 100, 100f / numCAs); }` If you need the Legend make enough room for it, ie make the widths < 100..You may also want to make room for other elements like titel etc.. – TaW Apr 16 '21 at 12:55

score 0 · Accepted Answer · answered Apr 16 '21 at 13:05

Here is how you can achive what you need, also referring for your question here:
https://stackoverflow.com/questions/67124754/dynamically-add-chart-areas-in-vertical-alignment

Use the Position property and please read comments inside the code:

private void button1_Click(object sender, EventArgs e)
{
    List<ChartArea> Areas = new List<ChartArea>();
    int numberOfAreas = 5;
    chart1.Legends[0].Enabled = false;

    for (int k = 1; k <= numberOfAreas; k++) // YOU WANT 5 and not 4 AREAS - changed k< to k<=
    {
        var S1 = new Series();
        chart1.Series.Add(S1);
        S1.Name = k.ToString();
        for (int j = 0; j < 100; j += 10) S1.Points.AddXY(j, j / 10);
        S1.Color = Color.Transparent;

        Areas.Add(new ChartArea(k.ToString()));
        chart1.ChartAreas.Add(Areas[k - 1]); // IT IS k-1 and not k - we start counting from 0                 
        S1.ChartArea = k.ToString();
        chart1.ChartAreas[k - 1].AlignWithChartArea = chart1.ChartAreas[k - 1].Name;
        chart1.ChartAreas[k - 1].AlignmentStyle = AreaAlignmentStyles.Position;
        chart1.ChartAreas[k - 1].AlignmentOrientation = AreaAlignmentOrientations.Vertical;
    }

    // NOW THE IMPORTANT PART
    float currentHeight = 0;
    foreach (var itm in Areas)
    {
        itm.Position.Height = 100 / numberOfAreas; // Note: the valus are in percenteges and not absolute pixels
        itm.Position.Y = currentHeight;
        itm.Position.X = 5;
        itm.Position.Width = 95;
        currentHeight += 100 / numberOfAreas;
    }

}

OUTPUT:

Multiple chart areas in one column

2 Answers2

Linked