How to align labels properly using System.Web.UI.DataVisualization.Charting

Question

I have a chart which generated through System.Web.UI.DataVisualization.Charting. Below is the code

public ActionResult MBRRChart()
    {
        //Area for generating chart type Range bar
        List<dummyGraph> objGraphList = new List<dummyGraph>();
        dummyGraph objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Underwriter";
        objDummyGraph.min = 1;
        objDummyGraph.max = 8;
        objDummyGraph.Median = "1";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Construction";
        objDummyGraph.min = 2;
        objDummyGraph.max = 5;
        objDummyGraph.Median = "2";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Design";
        objDummyGraph.min = 3;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        objDummyGraph = new dummyGraph();
        objDummyGraph.TKFEType = "Partner";
        objDummyGraph.min = 4;
        objDummyGraph.max = 6;
        objDummyGraph.Median = "3";
        objGraphList.Add(objDummyGraph);

        System.Web.UI.DataVisualization.Charting.Chart chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
        System.Web.UI.DataVisualization.Charting.ChartArea chartArea1 = new System.Web.UI.DataVisualization.Charting.ChartArea();
        System.Web.UI.DataVisualization.Charting.Legend legend1 = new System.Web.UI.DataVisualization.Charting.Legend();
        System.Web.UI.DataVisualization.Charting.Series seriesInstance;

        chart1.Titles.Add("Market Based Rate Range");//Add chart title 

        //chart series initialization
        seriesInstance = new System.Web.UI.DataVisualization.Charting.Series("xAxis");
        seriesInstance.ChartType = SeriesChartType.RangeBar;//Set chart type here
        seriesInstance.Color = Color.SkyBlue;
        seriesInstance.YValuesPerPoint = 2;
        seriesInstance.SmartLabelStyle.Enabled = true;
        seriesInstance.IsValueShownAsLabel = true;
        //END

        chart1.Series.Add(seriesInstance);

        //Bind values to chart
        chart1.DataSource = objGraphList;
        chart1.Series[0].XValueMember = "TKFEType";
        chart1.Series[0].YValueMembers = "min, max";
        chart1.Series[0].Label = "#VALY <-> #VALY2";

        chart1.DataBind();
        //END

        chart1.ChartAreas.Add(chartArea1);
        chartArea1 = chart1.ChartAreas[0];

        //Used to hide Grid lines
        chartArea1.AxisX.MajorGrid.Enabled = false;
        chartArea1.AxisX.MinorGrid.Enabled = false;
        chartArea1.AxisY.MajorGrid.Enabled = false;
        chartArea1.AxisY.MinorGrid.Enabled = false;
        //END

        //Used to hide the x axis values
        chartArea1.AxisY.Enabled = AxisEnabled.False;
        //END

        //END

        //Area for returning created chart as image file
        using (MemoryStream ms = new MemoryStream())
        {
            chart1.SaveImage(ms, ChartImageFormat.Png);
            return File(ms.ToArray(), "image/png");
        }
        //END
    }
    //END

When i run the above code my chart will looks like following image

In that image you can see that Yaxis labels and bar is not aligning properly (In the same line)

Why it is like so

If you're referring to the label outside the bar, the bar is too narrow to fit string "4 <-> 6" inside it. — jsanalytics, Aug 26 '15 at 14:46

jsanalytics · Answer 1 · 2015-08-26T22:35:52.790

Like i said in my previous comment, your range bar in some cases is too narrow to contain the label, so the chart puts it outside. I tried some of the properties in SmartLabelStyle and also CustomProperties but none of them seem to have any effect.

Regarding the vertical alignment along Y-Axis, my suggestion is to not have duplicates. Create multiple List<DummyGraph> and bind each one to its own chart Series. This way there's no duplicates and everything aligns and looks much better.

Here:

    protected void Page_Load(object sender, EventArgs e)
    {
        //Just creating some random data
        Random r = new Random();
        DummyGraphList data1 = new DummyGraphList(r);
        DummyGraphList data2 = new DummyGraphList(r);

        //Bind each list to its own series
        Chart1.Series[0].Points.DataBind(data1, "TKFType", "Min,Max", null);
        Chart1.Series[1].Points.DataBind(data2, "TKFType", "Min,Max", null);
    }

Result:

How to align labels properly using System.Web.UI.DataVisualization.Charting

1 Answers1

Linked