Bars Background
Hover over the image to see the chart animation
Notice this web site wraps every sample using the UserControl class, but LiveCharts controls can be used inside any container,
this sample also follows a Model-View-* pattern.
View model
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
namespace ViewModelsSamples.Bars.WithBackground;
public class ViewModel
{
public ISeries[] Series { get; set; }
= {
new ColumnSeries<double>
{
IsHoverable = false, // disables the series from the tooltips // mark
Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
Stroke = null,
Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
IgnoresBarPosition = true
},
new ColumnSeries<double>
{
Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
Stroke = null,
Fill = new SolidColorPaint(SKColors.CornflowerBlue),
IgnoresBarPosition = true
}
};
public Axis[] YAxes { get; set; }
= new Axis[]
{
new Axis { MinLimit = 0, MaxLimit = 10 }
};
}
XAML
<UserControl x:Class="AvaloniaSample.Bars.WithBackground.View"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
xmlns:vms="using:ViewModelsSamples.Bars.WithBackground">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}" YAxes="{Binding YAxes}"></lvc:CartesianChart>
</Grid>
</UserControl>
