Search code examples
c#asp.netlayoutchartsasp.net-charts

ASP.NET chart control - layout x-axis label with reversed y-axis


I have an asp.net chart control with different Series and i have reversed the y-axis. Because of this i had to set Crossing AxisY to Maximum to have the xaxis on the bottom. Without setting the crossing value to maximum i have the xaxis on the top but i want it at the bottom.

The Problem is that the x-axis label are still on top and not at the bottom. Anyone has an idea how to reverse y-axis and have the normal x-axis labels at the bottom?

    Chart1.ChartAreas[0].AxisY.IsReversed = true;
    Chart1.ChartAreas[0].AxisY.Crossing = Double.MaxValue;

Chart


Solution

  • Alternative solution (I may come back later and tell you how to do it with your existing code) Note: While I am using a winform to demonstrate this, it should work the same in your asp.net application.

    In my alternate solution, you could skip the use of this statement

    //Chart1.ChartAreas[0].AxisY.Crossing = Double.MaxValue;
    

    and instead, you could set your dataseries to use the secondary x-axis!

    //chart1.ChartAreas[0].AxisY.Crossing = Double.MaxValue; // Disabled - from your example.
    chart1.ChartAreas[0].AxisY.IsReversed = true;
    chart1.Series[0].XAxisType = AxisType.Secondary;
    
    // Example data for image below
    chart1.Series[0].ChartType = SeriesChartType.Spline;
    chart1.Series[0].Points.Add(new DataPoint(1, 0));
    chart1.Series[0].Points.Add(new DataPoint(2, 40));
    chart1.Series[0].Points.Add(new DataPoint(3, 20));
    chart1.Series[0].Points.Add(new DataPoint(4, 90));
    chart1.Series[0].Points.Add(new DataPoint(5, 20));
    

    My example code it results in the following picture:

    Example

    Should you find my answer adequate please mark as accepted. Thanks!