Basic Bars

View Model

namespace ViewModelsSamples.Bars.Basic;

public class ViewModel
{
    public double[] MaryValues { get; set; } =
        [2, 5, 4];

    public double[] AnaValues { get; set; } =
        [3, 1, 6];

    public string[] Labels { get; set; } =
        ["Category 1", "Category 2", "Category 3"];
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiSample.Bars.Basic.View"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
    xmlns:vms="clr-namespace:ViewModelsSamples.Bars.Basic;assembly=ViewModelsSamples"
    xmlns:col="clr-namespace:System.Collections.Generic;assembly=mscorlib"
    xmlns:k="clr-namespace:LiveChartsCore.Kernel.Sketches;assembly=LiveChartsCore"
    x:DataType="vms:ViewModel">

    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>

    <lvc:CartesianChart LegendPosition="Right">

        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlColumnSeries SeriesName="Mary" Values="{Binding MaryValues}"/>
                <lvc:XamlColumnSeries SeriesName="Ana" Values="{Binding AnaValues}"/>
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>

        <!-- We use force to min step to show all the labels always. -->

        <lvc:CartesianChart.XAxes>
            <lvc:AxesCollection>
                <lvc:XamlAxis
                    Labels="{Binding Labels}"
                    LabelsRotation="0"
                    SeparatorsPaint="#c8c8c8"
                    SeparatorsAtCenter="False"
                    TicksPaint="#232323"
                    TicksAtCenter="True"
                    MinStep="1"
                    ForceStepToMin="True"/>
            </lvc:AxesCollection>
        </lvc:CartesianChart.XAxes>

    </lvc:CartesianChart>
</ContentPage>

Articles you might also find useful: