How to align content of legend to left in Microsoft .net chart?

Question

I have legend text of varying length and need to align the legend items to the left of the legend for a consistent layout.

|         My Legend         |

|     X what I have now     |

|  X what I have now long   |   -->  causes irregular layout

| X what I need             |

| X what I need long        |   --> nice, regular layout

Must be something obvious but have been looking at this for hours and do not seem to be any closer to a working example. Thanks in advance for your help!

EDIT:

I am trying to produce a pie-chart so have multiple series, each of which will need the series symbol and the appropriate series datapoint text, as is the case in the default legend layout. My legend creation method:

public Legend CreateLegend()
{
    var legend = new Legend();

    legend.Enabled = true;
    legend.Font = new Font("Arial", 11F);
    legend.ForeColor = Color.FromArgb(102, 102, 102);
    legend.InsideChartArea = "Result Chart";

    legend.Position = new ElementPosition(50, 20, 50, height);

    legend.LegendStyle = LegendStyle.Column;

    return legend;
}

And my series creation method (which currently takes the legend as a parameter from my experiments/ideas for a solution here):

public Series CreateSeries(List<ChartDivision> series, Legend legend)
{
    var seriesDetail = new Series();
    seriesDetail.Name = "Result Chart";
    seriesDetail.IsValueShownAsLabel = false;
    seriesDetail.ChartType = SeriesChartType.Pie;
    seriesDetail.BorderWidth = 2;

    foreach(var datapoint in series)
    {
        var p = seriesDetail.Points.Add(datapoint.Logged);
        p.LegendText = datapoint.Name;                
    }

    seriesDetail.ChartArea = "Result Chart";
    return seriesDetail;
}

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Speaking of the System.Windows.Forms.DataVisualization.Charting.Chart here. This is in fact default behavior.

But you can override it: Select the chart in the designer, click on the Legends-property. In the appropriate legend, edit CellColumns-Property. This is by default empty. You can add two columns and set the first one to "ColumnType=SeriesSymbol" to get the default with custom columns. Then, on the second column, the alignment property (by default on MiddleCenter) should be what you are looking for.

So here is my test program: http://pastebin.com/ZTwMhsXB Add a chart control and two buttons to the form and run it. However, I was unable to reproduce your problem.

Note that I did some more wiring. Can you please confirm that you have these lines somewhere:

chart1.Legends.Add(leg);
// and
legend.Name = // whatever
seriesDetail.Legend = legend.Name;

Because else it may be that you are not seeing your created legend but the default one. If you don't add the legend to the chartarea, it is invisible.

Okay, so we are now at the point that the text is left-justified within its column, bit the columns are always centered within the legend-area. See this SO thread for the solution: How to control winform mschart legend text alignment c#?

Edit the code like this:

legend.LegendStyle = LegendStyle.Column;
legend.CellColumns.Add(new LegendCellColumn() {
    ColumnType = LegendCellColumnType.SeriesSymbol,
    MinimumWidth = 250,
    MaximumWidth = 250
});
legend.CellColumns.Add(new LegendCellColumn()
{
    ColumnType = LegendCellColumnType.Text,
    Alignment = ContentAlignment.MiddleLeft,
    MinimumWidth = 1500,
    MaximumWidth = 1500
});

Note that the numbers 250 and 1500 are percentages of the font size therefore 1500 means 15-times the font height. I have updated the pastebin accordingly ( http://pastebin.com/GGCZGWF9 ) and here is a screenshot of my sample program:

Screenshot of my sample program

edited May 23 '17 at 11:43

Community

1
1

answered Mar 02 '13 at 09:44

DasKrümelmonster

4,859
1
19
43

Thanks for the answer, its definitely on the right path. I am actually using MVC but can access these properties in the controller. I had tried this but the problem, which should have included in my question, is that I am trying to produce a pie chart and it has multiple series. I can get the series symbol and text to out put but need it on a per datapoint basis. Any ideas? – GP24 Mar 05 '13 at 01:55
1

I edited my answer to include what I have tried to reproduce your issue. I suspect the legends you are creating are invisible. Also, how do you do multiple series in a pie chart? – DasKrümelmonster Mar 06 '13 at 22:08
I guess, strictly speaking, a pie chart only has one series, but the legend deals with each chart division as a separate one. I have got it pretty close - correctly aligned symbols and text - but with text either not taken from the datapoint value or adding another column. I have looked but can't see how I add/replace text in the column cells once I create the column. Thanks for sticking with me here! – GP24 Mar 07 '13 at 00:32
The displayed text is given by Datapoint.LegendText (line 47 in the pastebin). However, you _must use_ the parameterless constuctor when you create the CellColumn in order to avoid setting the Text-Property. (line 71) – DasKrümelmonster Mar 07 '13 at 14:28
Hmmm, I have set it up that exact way, even down to the order of legend and series property setting. If you create multiple charts using this set up and have enough variation between legend text, you will see that the legend items are not aligned consistently - the distance between the chart and the symbols is smaller or greater. – GP24 Mar 08 '13 at 01:53
1

Yes, the legend is centered in the "legend area" by default. See my edit. – DasKrümelmonster Mar 08 '13 at 11:44
Works like a charm, thanks for sticking with me, @DasKrumelmonster. Sorry the bounty is up. It seems odd that you have to hack something like this though doesn't it? Maybe there will be a fix in a later version. – GP24 Mar 12 '13 at 01:12

score 1 · Answer 2 · answered Mar 02 '13 at 19:58

1

Try something like this:

myChart.Legends["MySeries Name"].CellColumns.Add(new LegendCellColumn("", LegendCellColumnType.Text, "MySeries Name"));
myChart.Legends["MySeries Name"].CellColumns[1].Alignment = ContentAlignment.MiddleLeft;

answered Mar 02 '13 at 19:58

tmwoods

2,149
7
24
52

I am curious if this solution worked for you. Did you have any luck? – tmwoods Mar 07 '13 at 23:10
It certainly helped but @DasKrumelMonster's additional detail regarding the min/max widths was the missing piece of the puzzle. Seems weird you have to hack something so obvious to me but it works so I'm happy. Thanks for your help. – GP24 Mar 12 '13 at 01:14
No problemo. Glad to have helped :) – tmwoods Mar 12 '13 at 03:09

How to align content of legend to left in Microsoft .net chart?

2 Answers2