Scrollable Charts

Razor

@page "/General/Scrollable"
@using LiveChartsCore.Kernel.Sketches;
@using LiveChartsCore.Measure
@using LiveChartsCore.SkiaSharpView.Blazor;
@using LiveChartsCore.SkiaSharpView.Drawing;
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;
@using System.Collections.ObjectModel

<div style="max-width: 800px">
    <CartesianChart @ref="_mainChart"
                    Series="@mainSeries"
                    XAxes="@mainAxes"
                    ZoomMode="LiveChartsCore.Measure.ZoomAndPanMode.X"
                    DrawMargin="@drawMargin">
    </CartesianChart>
</div>

<div style="height: 100px; max-width:500px;">
    <CartesianChart
        @ref="_scrollableChart"
        Series="@scrollbarSeries"
        DrawMargin="@drawMargin"
        Sections="@thumbs"
        XAxes="@invisibleX"
        YAxes="@invisibleY"
        OnPointerDownCallback="OnPointerDown"
        OnPointerUpCallback="OnPointerUp"
        OnPointerMoveCallback="OnPointerMove"
        TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Hidden">
    </CartesianChart>
</div>

@code {
    private bool _isDown;
    public CartesianChart _mainChart = null!;
    public CartesianChart _scrollableChart = null!;
    private ObservableCollection<ObservablePoint> _values = new();
    private Axis[] mainAxes;
    private ISeries[] mainSeries;
    private ISeries[] scrollbarSeries;
    private Margin drawMargin = new(100, Margin.Auto, 50, Margin.Auto);
    private RectangularSection[] thumbs;
    private Axis[] invisibleX = new[] { new Axis { IsVisible = false } };
    private Axis[] invisibleY = new[] { new Axis { IsVisible = false } };

    protected override void OnInitialized()
    {
        var trend = 1000;
        var r = new Random();
        for (var i = 0; i < 500; i++)
            _values.Add(new ObservablePoint(i, trend += r.Next(-20, 20)));
        mainSeries = new ISeries[]
        {
            new LineSeries<ObservablePoint>
            {
                Values = _values,
                GeometryStroke = null,
                GeometryFill = null,
                DataPadding = new(0, 1)
            }
        };
        mainAxes = new[] { new Axis() };
        scrollbarSeries = new ISeries[]
        {
            new LineSeries<ObservablePoint>
            {
                Values = _values,
                GeometryStroke = null,
                GeometryFill = null,
                DataPadding = new(0, 1)
            }
        };
        thumbs = new[]
        {
            new RectangularSection
            {
                Fill = new SolidColorPaint(new SKColor(255, 205, 210, 100))
            }
        };
    }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        _mainChart.UpdateStarted += OnChart_Updated;
    }

    private void OnChart_Updated(IChartView chart)
    {
        var x = _mainChart.XAxes.First();
        var thumb = thumbs[0];
        thumb.Xi = x.MinLimit;
        thumb.Xj = x.MaxLimit;
    }

    private void OnPointerDown(PointerEventArgs e) => _isDown = true;
    private void OnPointerUp(PointerEventArgs e) => _isDown = false;
    private void OnPointerMove(PointerEventArgs e)
    {
        if (!_isDown) return;
        var positionInData = _scrollableChart.ScalePixelsToData(new(e.OffsetX, e.OffsetY));
        var thumb = thumbs[0];
        var currentRange = thumb.Xj - thumb.Xi;
        thumb.Xi = positionInData.X - currentRange / 2;
        thumb.Xj = positionInData.X + currentRange / 2;
        mainAxes[0].MinLimit = thumb.Xi;
        mainAxes[0].MaxLimit = thumb.Xj;
    }
}

Articles you might also find useful: