CODEWITHSUNDEEP
asp.netchartsmschartasp.net-charts
Ninja In Pajamas
Ninja In Pajamas

Reputation: 97

Create a custom legend in tabular format - ASP.NET Chart

I am quite new to ASP.NET Charting and have a question about adding custom component to a bar chart. I am trying to create a custom legend in a tabular format. What I mean is my legend style is table. And I am creating each LegendItem from database values and adding it to chart.Legends[0].CustomItems collection.

I get the data but I am getting all the LegendItems in one row. I want to display each LegendItem on new row. My current code look like this - 

chart.Legends.Add(new Legend
{
LegendStyle = LegendStyle.Table,
BorderColor = Color.Black,
BorderWidth = 1,
BorderDashStyle = ChartDashStyle.Solid,
Alignment = StringAlignment.Center,
DockedToChartArea = areaCounter.ToString(),
Docking = Docking.Bottom,
Name = "CustomLegend",
IsTextAutoFit = true,
InterlacedRows = true,
TableStyle = LegendTableStyle.Auto,
IsDockedInsideChartArea = false
});

LegendItem newItem = new LegendItem();
newItem.Cells.Add(LegendCellType.Text, " - value1 - ", ContentAlignment.MiddleCenter);
newItem.Cells.Add(LegendCellType.Text, " - State Average = - ", ContentAlignment.MiddleCenter);
newItem.Cells[1].CellSpan = 2;
newItem.BorderColor = Color.Black;
newItem.Cells.Add(LegendCellType.Text, " - ", ContentAlignment.MiddleCenter);
newItem.Cells.Add(LegendCellType.Text, " - top - ", ContentAlignment.MiddleCenter);
chart.Legends[1].CustomItems.Add(newItem);



LegendItem newItem1 = new LegendItem();
newItem1.Cells.Add(LegendCellType.Text, "value1", ContentAlignment.MiddleCenter);
newItem1.Cells.Add(LegendCellType.Text, "State Average =", ContentAlignment.MiddleCenter);
newItem1.Cells[1].CellSpan = 2;
newItem1.BorderColor = Color.Black;
newItem1.Cells.Add(LegendCellType.Text, "", ContentAlignment.MiddleCenter);
newItem1.Cells.Add(LegendCellType.Text, "top", ContentAlignment.MiddleCenter);
chart.Legends[1].CustomItems.Add(newItem1);

newItem and newItem1 both appear on same row as legend. Can you please help me solve this issue ? I'd really appreciate your help.

Upvotes: 2

Views: 3805

Answers (1)

Ninja In Pajamas
Ninja In Pajamas

Reputation: 97

Found out that once I add HeaderSeparator to my custom Legend object and handle the chat object's CustomizeLegend event it worked as I wanted. The custom items are displayed on separate rows. Here are the changes that I did. 

chart.Legends.Add(new Legend
                {
                    LegendStyle = LegendStyle.Table,
                    BorderColor = Color.Black,
                    BorderWidth = 1,
                    BorderDashStyle = ChartDashStyle.Solid,
                    Alignment = StringAlignment.Center,
                    DockedToChartArea = areaCounter.ToString(),
                    Docking = Docking.Bottom,
                    Name = "CustomLegend",
                    IsTextAutoFit = true,
                    InterlacedRows = true,
                    TableStyle = LegendTableStyle.Tall,
                    HeaderSeparator = LegendSeparatorStyle.Line,
                    HeaderSeparatorColor = Color.Gray,
                    IsDockedInsideChartArea = false
                });

                LegendItem newItem3 = new LegendItem();
                var strVal = item.Value;
                foreach (var val in strVal)
                {
                    newItem3.Cells.Add(LegendCellType.Text, val, ContentAlignment.BottomCenter);
                }
                chart.Legends["CustomLegend"].CustomItems.Add(newItem3);

                chart.CustomizeLegend += chart_CustomizeLegend;



        void chart_CustomizeLegend(object sender, CustomizeLegendEventArgs e)
        {
            Chart chart = sender as Chart;
            if (chart == null) return;
            foreach (var item in e.LegendItems)
            {
                item.SeparatorType = LegendSeparatorStyle.Line;
                item.SeparatorColor = Color.Black;
            }

        }

Upvotes: 4

Related Questions