Adding a scroll bar to MS Chart control C#

Question

please understand that I know there are other threads concerning this issue, but my needs are different.

Basically before I seen people saying to implement a scroll bar with MSChart they use the

.Size = ...

or

.View = ...

But, this make a scroll bar automatically apprear, and this scroll bar contains a button that when clicked causes the bar to vanish, making the chart show all data, and no way of bringing back the scroll bar to the chart without restarting the app.

So I ask, please, Is there a way to incorportate a horizontal scroll bar on the X-axis of my Chart? I am needing on so that I can view my chart data on blocks of 100 second blocks.

i.e. 0 - 100, then click sroll bar will bring me to 100 - 200 block.

Thank you in advance guys!!!!! im coding in C# also

digEmAll · Answer 1 · 2011-03-01T07:40:27.933

30

Here's an example of what you need:
(to try it, just create a form, add a mschart and call the following method)

private void FillChart()
{
    int blockSize = 100;

    // generates random data (i.e. 30 * blockSize random numbers)
    Random rand = new Random();
    var valuesArray = Enumerable.Range(0, blockSize * 30).Select(x => rand.Next(1, 10)).ToArray();

    // clear the chart
    chart1.Series.Clear();

    // fill the chart
    var series = chart1.Series.Add("My Series");
    series.ChartType = SeriesChartType.Line;
    series.XValueType = ChartValueType.Int32;
    for (int i = 0; i < valuesArray.Length; i++)
        series.Points.AddXY(i, valuesArray[i]);
    var chartArea = chart1.ChartAreas[series.ChartArea];

    // set view range to [0,max]
    chartArea.AxisX.Minimum = 0;
    chartArea.AxisX.Maximum = valuesArray.Length;

    // enable autoscroll
    chartArea.CursorX.AutoScroll = true;

    // let's zoom to [0,blockSize] (e.g. [0,100])
    chartArea.AxisX.ScaleView.Zoomable = true;
    chartArea.AxisX.ScaleView.SizeType = DateTimeIntervalType.Number;
    int position = 0;
    int size = blockSize;
    chartArea.AxisX.ScaleView.Zoom(position, size);

    // disable zoom-reset button (only scrollbar's arrows are available)
    chartArea.AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;

    // set scrollbar small change to blockSize (e.g. 100)
    chartArea.AxisX.ScaleView.SmallScrollSize = blockSize;
}

Snapshot:

mschart zooming

edited Mar 01 '11 at 07:40

answered Feb 28 '11 at 19:10

digEmAll

56,430
9
115
140

@digEmAll, the snapshot link is broken. – Devendra D. Chavan Mar 01 '11 at 07:59
@Devendra: It's not a link but there's an image below... maybe your browser didn't load the image... ? – digEmAll Mar 01 '11 at 08:23
@digEmAll, the image is not visible. I tried to check the link (by editing the answer), but even this is invalid. – Devendra D. Chavan Mar 01 '11 at 08:30
@digEmAll, the snapshot is visible. – Devendra D. Chavan Mar 01 '11 at 14:36
@digEmAll, the image might have been blocked by the firewall at my office. :) – Devendra D. Chavan Mar 02 '11 at 02:36
I can't upvote this for some reason, but thought I'd just say that this helped me solve a problem with my RangeBar chart. However, the scrollbar doesn't seem to draw correctly - it seems to be transparent instead of the usual winforms grey! Any ideas? – Jez Clark Apr 05 '11 at 12:43
@Jez: Sorry, I have no idea (in particular without seeing your code). Try to post a new question showing your problem and the code to reproduce it :) – digEmAll Apr 05 '11 at 13:07
I figured this out, it was just a load of properties buried in the Axis that I needed to set that have silly default values :P – Jez Clark Apr 06 '11 at 10:20
Hi @digEmAll, thanks for example code. But i have a query, what if we want to display each value of XAxis (1, 2, 3...). When i set the chart1.ChartAreas[0].AxisX.Interval = 1d; in code, it does not show the X-Axis values correctly. Any pointer on how to acheive it. Appreciate your thoughts on this – Dinesh May 17 '13 at 18:20
@DnshPly9: it's hard to say without looking the code... can you post your own question ? – digEmAll May 17 '13 at 19:08
I added `If Chart1.ChartAreas(0).AxisX.Maximum -Chart1.ChartAreas(0).AxisX.Minimum > 90 Then Chart1.ChartAreas(0).AxisX.ScaleView.Position = Chart1.ChartAreas(0).AxisX.ScaleView.Position + 100 End If` To another function that adds the next set of data to keep auto-scrolling to the right as data is added. – Toby Oct 08 '15 at 14:09

score 0 · Answer 2 · answered Apr 19 '19 at 13:52

I would do it like this:

    if (series1.Points.Count > 2 && chartArea1.AxisX.Maximum - chartArea1.AxisX.Minimum > chartArea1.AxisX.ScaleView.Size)
{
   chartArea1.AxisX.ScrollBar.Enabled = true;
}
else
{
   chartArea1.AxisX.ScrollBar.Enabled = false;
}

So when you added points more than your scaleview - scrollbar is appear

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I worked out my own way for that. Hope it helps you:

Add your chart to a Panel.
Set the AutoScroll property of the panel to true with panelName.AutoScroll=true;
Size the chart properly in the panel.
You can now use the panel's scrollbar as if it were the chart's!
If data gets added continuously(e.g. with a timer or so), add this to the timer's tick event:

chartName.Size = new Size(width++, height++); where int width = chartName.Width; and int height = chartName.Height;

Adding a scroll bar to MS Chart control C#

3 Answers3

Linked