Xamarin Microcharts "blink"

Question

I'm using Microchart on Xamarin, I'm visualizing data from bluetooth temperature sensor on a chart but each times I'll update the data the component redraw all from 0 to value so the effect is a blinking chart:

View

<microcharts:ChartView  x:Name="chartV"  BackgroundColor="Transparent"  
    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.02}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor={x:OnPlatform Android=0.4, iOS=0.4}}" 
    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.96}"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.245}"
/>

View model

private void Bt_ParametersList(List<Com.PAR> parameters, Com.unit UNIT)
{
    Dispatcher.BeginInvokeOnMainThread(new Action(delegate
    {
        if (voltData.Count < graph_Hmax_span)
        {
            voltData.Add(UNIT.OUTPUT_VOLTAGE);
        }
        else
        {
            voltData.Add(UNIT.OUTPUT_VOLTAGE);
            voltData.RemoveAt(0);
        }
        var chartVoltage = new List<ChartEntry>();

        UInt16 counter = 0;
        foreach (var data in voltData)
        {
            chartVoltage.Add(new ChartEntry((float)data)
            {
                ValueLabel = data.ToString(),
                Color = SKColor.Parse("#FF1943"),
                Label = counter.ToString()
            });
            counter++;
        }
        chartV.Chart = new LineChart()
        {
            Entries = chartVoltage,
            IsAnimated = false,
            AnimationProgress = 0,
            AnimationDuration = new TimeSpan(0),
            MaxValue = v_max,
            MinValue = 0,
            LabelTextSize = 25,
            LabelOrientation = Orientation.Horizontal,
            LineSize = 3,
        };
    }));
}

The function is called from an event on receive. I'm using a list like a shift register, add the last and remove the first, then create a data for component.

Each time the data is updated the component redraw all from 0 to the target value and the result is a line from 0 and jump to X. There is a workaround? I have searched on the net but I haven't and good result. Or maybe a way to add a new point and remove the first form a data in a component and not from a external list.

Answer 1

The "blink" is actually your control being redrawn. Micro charts use Skia for the charts which means that when you assign a new line chart it will obviously get drawn from scratch.

Instead of doing something like:

chartV.Chart = new LineChart()
    {
        Entries = chartVoltage,
        IsAnimated = false,
        AnimationProgress = 0,
        AnimationDuration = new TimeSpan(0),
        MaxValue = v_max,
        MinValue = 0,
        LabelTextSize = 25,
        LabelOrientation = Orientation.Horizontal,
        LineSize = 3,
    };

And redrawing the whole thing just assign the Entries again on the existing chart.

So your code would look like this :

chartV.Chart.Entries= chartVoltage;

Also, most of that code does not need to be on MainThread so remove it and only apply it where it's necessary.