Skip to main content

Scrollbars

One or more scrollbars can be added via chart. HorizontalScrollBars or chart. VerticalScrollBars collection property. The appearance is fully customizable, allowing defining even oval shaped buttons and scroll box. For example, a bitmap can be used as a button icon. Scrollbars can be used with all views, but the most apparent usage is in ViewXY.

Scrollbars example
Two different looking scrollbars.

Scrollbar properties

HorizontalScrollBar can be aligned to fit the width of the graph by setting Alignment property to BelowGraph, AboveGraph or GraphCenter. Respectively, VerticalScrollBar can be aligned to fit the height of the graph by setting Alignment property to LeftToGraph, GraphCenter or RightToGraph. By setting Alignment to None, the scrollbar can be freely positioned with Offset property. Adjust its size with Size property.

// Setting the position and the size of a scrollbar. Offset is based on the top-left corner of the chart
horizontalScrollBar.Alignment = HorizontalScrollBarAlignment.None;
horizontalScrollBar.Offset = new PointIntXY(100, 10);
horizontalScrollBar.Size = new Size(500, 30);

Scrollbars use 64-bit unsigned integer values instead of the usual 32-bit signed integer values. Value is the current position, Minimum is the minimum range value and Maximum is the maximum range value. This allows direct support for long measurements with high sampling frequency. For example, when SampleDataSeries is used in the measurement, set the sample index directly as scrollbar value. Minimum value represents the first sample index, and Maximum represents the last sample index.

SmallChange property is the amount of increment or decrement, when a scroll button is clicked. If KeyControlEnabled is active and the scrollbar has focus, you can use also arrow keys to change the Value by SmallChange amount.

LargeChange represents a page change, which occurs when the scrollbar is clicked outside the scroll box or scroll buttons. Use PageUp and PageDown keys to change the Value respectively.

WheelChange sets the change value when mouse wheel is scrolled over the scroll bar.

Scroll event

Scroll event handler can be used in code to react to scrollbar value changes. Alternatively, ValueChanged event handler can be used. However, Scroll provides more information of how the scroll has been done.

Scrollbars with decimals or negative values

As scrollbars are designed to use unsigned integers to support long measurements, they cannot be directly used when axis values are decimals or negative values. In these cases, the result will be a crash or otherwise bad usability due to rounding errors. However, Scrollbar Minimum and Maximum values do not have to be tied to axis ranges. This allows scaling the bars even if the axis values and/or data values are small decimals or negative numbers.

For example, if the values to be shown range from 0.500 to 1.500, the scrollbar can be set to use range 500 -> 1500. Respectively, with data ranges from -150 to 0, the scrollbar can use values from 0 to 150.

The following example shows how to modify a vertical scrollbar when the Y-axis values are decimals ranging from negative to positive.

double yMin = -0.178; // Some arbitrary axis values
double yMax = 1.253;
double upShift = 0.178; // To prevent the scrollbar from using negative values
double scaleFactor = 1000.0; // To scale the scrollbar to use integer values
_chart.ViewXY.YAxes[0].Minimum = yMin;
_chart.ViewXY.YAxes[0].Maximum = yMax;
_chart.VerticalScrollBars[0].Minimum = (ulong)((yMin + upShift) * scaleFactor);
_chart.VerticalScrollBars[0].Maximum = (ulong)((yMax + upShift) * scaleFactor);
_chart.VerticalScrollBars[0].LargeChange = _chart.VerticalScrollBars[0].Maximum -
_chart.VerticalScrollBars[0].Minimum;
_chart.ViewXY.YAxes[0].SetRange(0.3, 0.6); // Display only a portion of the axis
// The scroll event
private void VerticalScrollBar_Scroll(object sender, ScrollEventArgs e)
{
double newMin = (yMax + upShift) * scaleFactor - (double)e.NewValue -
currentRangeY + (yMin + upShift) * scaleFactor;

if (newMin < (yMin + upShift) * scaleFactor)
{
// The scroll bar cannot go below the minimum axis value
newMin = (yMin + upShift) * scaleFactor;
}

double newMax = newMin + currentRangeY;
if (newMax > (yMax + upShift) * scaleFactor)
{
// The scroll bar cannot go above the maximum axis value
newMax = (yMax + upShift) * scaleFactor;
newMin = newMax - currentRangeY;
}

// Adjusting axis range based on the scrollbar value, triggers RangeChanged event.
// Converts the values used by the scrollbar back to unscaled axis values.
_chart.ViewXY.YAxes[0].SetRange((newMin / scaleFactor - upShift) , (newMax / scaleFactor - upShift) );
}
// RangeChanged -event to modify the axis ranges correctly
private void AxisY_RangeChanged(object sender, RangeChangedEventArgs e)
{
// Prevent axis minimum value from going below yMin set earlier
if (e.NewMin < yMin)
{
double newRange = e.NewMax - e.NewMin;
if (newRange <= yMax - yMin)
{
_chart.ViewXY.YAxes[0].SetRange(yMin, yMin + newRange);
}
else
{
_chart.ViewXY.YAxes[0].SetRange(yMin, yMax);
}
}

// Prevent axis maximum value from going above yMax set earlier
else if (e.NewMax > yMax)
{
double newRange = e.NewMax - e.NewMin;
if (newRange <= yMax - yMin)
{
_chart.ViewXY.YAxes[0].SetRange(yMax - newRange, yMax);
}
else
{
_chart.ViewXY.YAxes[0].SetRange(yMin, yMax);
}
}

// Modify the scrollbar based on the the new axis range.
else
{
double newRange = (e.NewMax - e.NewMin) * scaleFactor;
_chart.BeginUpdate();

_chart.VerticalScrollBars[0].LargeChange = (ulong)(newRange + 0.1);
_chart.VerticalScrollBars[0].Value = (ulong)((yMax - e.NewMax +
yMin + upShift) * scaleFactor);

_chart.EndUpdate();

currentRangeY = newRange;
}
}

Examples

info

To see feature demonstration as example, check Scrollbars, ThreadFedScrollbar and ExampleTradingScaleBreaks from our Demo.