none
How to Overlap Two Different Line Graphs for Comparision? RRS feed

  • Question

  • Hello,

    I am new to the Visual Studio (2019) Forms Chart tool. I have two line graphs that show a correlation between them. I would like to compare both line plots together but they don't overlap on the same graph. One graph plots temperature over time and the other plots quantities of gases over time. The values for temperature are all negative and the values for gases are all positive.

    I tried overlapping two Chart Areas with transparent backgrounds, but when I set both Chart Areas to the same size and location, nothing from the second Chart Area is visible at all. I have tried setting the Chart background, the Chart Area background and even the Series background transparent.

    chart1.BackColor = Color.Transparent;
    chart1.BackSecondaryColor = Color.Transparent;
    chart1.ChartArea[0].BackColor = Color.Transparent;
    chart1.ChartArea[0].BackSecondaryColor = Color.Transparent;
    chart1.Series[0].BackSecondaryColor = Color.Transparent;

    The only change I saw was the visible graph background changed from white to the off white color of the Form window background. I can see both graphs fine when they are not overlapping, so there is no problem there.

    Is this possible to achieve or is there a different solution to overlap two line graph plots of different data types?

    Thank you kindly.


    • Edited by JustPeter Friday, September 20, 2019 4:11 AM clarification
    Friday, September 20, 2019 4:05 AM

Answers

  • Hi JustPeter,

    Do you want to set two Y axes for Chart? If so, you can refer to the following code.

        List<string> time = new List<string> { "00:00", "01:00", "02:00", "03:00", "04:00" };
        List<double> temperature = new List<double> { -12, -17, -15, -1, -20 };
        List<double> gas = new List<double> { 25, 33, 17, 35, 4 };
    
        chart1.Series.Clear();
        // Two AxisY
        chart1.Series.Add("temperature");
        chart1.Series.Add("gas");
    
        // Show the Axis title
        chart1.ChartAreas[0].AxisX.Title = "Time";
        chart1.ChartAreas[0].AxisY.Title = "Temperature";
        chart1.ChartAreas[0].AxisY2.Title = "Gas";
    
        chart1.Series["temperature"].Points.DataBindXY(time, temperature);
        chart1.Series["gas"].Points.DataBindXY(time, gas);
    
        chart1.Series[0].ChartType = SeriesChartType.Line;
        chart1.Series[1].ChartType = SeriesChartType.Line;
    
        chart1.Series[0].YAxisType = AxisType.Primary;
        chart1.Series[1].YAxisType = AxisType.Secondary;
    
        chart1.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
        chart1.ChartAreas[0].AxisY2.MajorGrid.Enabled = false;
        chart1.ChartAreas[0].AxisY2.Enabled = AxisEnabled.True;
        chart1.ChartAreas[0].AxisY2.IsStartedFromZero = chart1.ChartAreas[0].AxisY.IsStartedFromZero;

    Hope this can help you.

    Regards,

    Kyle


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by JustPeter Friday, September 20, 2019 7:39 AM
    Friday, September 20, 2019 6:29 AM
    Moderator

All replies

  • Hi JustPeter,

    Do you want to set two Y axes for Chart? If so, you can refer to the following code.

        List<string> time = new List<string> { "00:00", "01:00", "02:00", "03:00", "04:00" };
        List<double> temperature = new List<double> { -12, -17, -15, -1, -20 };
        List<double> gas = new List<double> { 25, 33, 17, 35, 4 };
    
        chart1.Series.Clear();
        // Two AxisY
        chart1.Series.Add("temperature");
        chart1.Series.Add("gas");
    
        // Show the Axis title
        chart1.ChartAreas[0].AxisX.Title = "Time";
        chart1.ChartAreas[0].AxisY.Title = "Temperature";
        chart1.ChartAreas[0].AxisY2.Title = "Gas";
    
        chart1.Series["temperature"].Points.DataBindXY(time, temperature);
        chart1.Series["gas"].Points.DataBindXY(time, gas);
    
        chart1.Series[0].ChartType = SeriesChartType.Line;
        chart1.Series[1].ChartType = SeriesChartType.Line;
    
        chart1.Series[0].YAxisType = AxisType.Primary;
        chart1.Series[1].YAxisType = AxisType.Secondary;
    
        chart1.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
        chart1.ChartAreas[0].AxisY2.MajorGrid.Enabled = false;
        chart1.ChartAreas[0].AxisY2.Enabled = AxisEnabled.True;
        chart1.ChartAreas[0].AxisY2.IsStartedFromZero = chart1.ChartAreas[0].AxisY.IsStartedFromZero;

    Hope this can help you.

    Regards,

    Kyle


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by JustPeter Friday, September 20, 2019 7:39 AM
    Friday, September 20, 2019 6:29 AM
    Moderator
  • Thank you Kyle, that is the answer. I modified my project to use a single Chart Area and it works perfectly.

    My deepest thanks.


    • Edited by JustPeter Friday, September 20, 2019 7:43 AM
    Friday, September 20, 2019 7:41 AM