Adding scrollbar in chart

Question

I create a chart with line CharType, my problem is. The more data I input, the more line will compress and in that situation it's difficult to see the image of graph.

Now my plan is to put a scroll bar in the down side area.

private void GraphRecord()
        {
            string connection = Db_Connection_String.ConnectionString;
            MySqlConnection mysqlconnection = new MySqlConnection(connection);
            MySqlCommand cmd = new MySqlCommand("select * from db_record", mysqlconnection);
            MySqlDataReader reader;
            try
            {
                mysqlconnection.Open();
                reader = cmd.ExecuteReader();
                while (reader.Read())
                {
                    chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false;
                    chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;
                    //-----try
                    //--------
                    this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;//for grid color
                    this.chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.Gray;//change fore color
                    this.chart1.ChartAreas[0].AxisY.Maximum = 43;//limit
                    this.chart1.ChartAreas[0].AxisY.Interval = 2;//display visible by 2
                    
					//this.chart1.Series["Stage"].Points.AddXY(reader.GetString("stage"), reader.GetString("one"));
  					//this.chart1.Series["Point-Stage"].Points.AddXY(reader.GetString("stage"), reader.GetString("one"));

                    this.chart1.ChartAreas[0].AxisX.Interval = 1;
                    this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;
                    this.chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 30;
                    this.chart1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.Gray;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }

I use the code above to display my graph, I tried also to display a scroll bar with this code.

chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false;                    chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;

But! nothing happen. I hope someone can help me to fix my problem. Because It's so difficult to see my line graph is compress due to many inputs, so I think the only one solution of this is a scrollbar.

Answer 1

Hi @YUI-012 , Welcome to Microsoft Q&A,

To display scroll bars in a chart and implement smooth zooming and scrolling, you can control the size of the visible area by setting the ScaleView property of the AxisX. Specifically, when you have a large amount of data, you can limit the amount of X-axis data displayed and enable scroll bars to view all the data.

private void GraphRecord()
{
// Clear existing series
chart1.Series.Clear();

// Create two new series: Stage and Point-Stage
Series stageSeries = new Series("Stage");
Series pointStageSeries = new Series("Point-Stage");

// Set series type to Line
stageSeries.ChartType = SeriesChartType.Line;
pointStageSeries.ChartType = SeriesChartType.Line;

// Add series to chart
chart1.Series.Add(stageSeries);
chart1.Series.Add(pointStageSeries);

// Add test data
for (int i = 0; i < 20; i++)
{
// Use X axis for time/stage and Y axis for random values
chart1.Series["Stage"].Points.AddXY("Stage " + (i + 1), i * 2); // Assume Y value is i*2
chart1.Series["Point-Stage"].Points.AddXY("Stage " + (i + 1), i * 3); // Assume that the Y value is i*3
}

// Set the Y axis style
this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;
this.chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.Gray;
this.chart1.ChartAreas[0].AxisY.Maximum = 50; // Y axis maximum value, assumed to be 50
this.chart1.ChartAreas[0].AxisY.Interval = 5; // Y axis display interval

// Set the X axis style
this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;
this.chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 30;
this.chart1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.Gray;
this.chart1.ChartAreas[0].AxisX.Interval = 1;

// Enable scroll bar and zoom view
chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false; // Scroll bar outside
chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true; // Enable scroll bar

// Set the size of the default display area (for example, display 5 data points at a time)
int viewSize = 5;
if (chart1.Series["Stage"].Points.Count > viewSize)
{
chart1.ChartAreas[0].AxisX.ScaleView.Size = viewSize; chart1.ChartAreas[0].AxisX.ScaleView.Scroll(chart1.Series["Stage"].Points.Count - viewSize); } }

Best Regards,

Jiale

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". 

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.