<div style="display: flex; align-items: baseline">

    <TelerikChart Width="400px" Height="300px">
        <ChartSeriesItems>
            <ChartSeries Type="ChartSeriesType.Pie" Data="@PieData"
                         Field="@nameof(PieModel.Value)"
                         CategoryField="@nameof(PieModel.Name)"
                         ColorField="@nameof(PieModel.Color)">
            </ChartSeries>
        </ChartSeriesItems>

        <ChartTitle Text="Revenue per product"></ChartTitle>

        <ChartLegend Visible="false" />
    </TelerikChart>

    <TelerikListView Data="@PieData" Width="240px">
        <Template>
            @{ var pieItem = (PieModel)context; }
            <div style="display: flex; gap: .4em;">
                <span style="flex: 0 1 auto; line-height: 1.2">
                    <span style="display: inline-block; vertical-align: middle; width: 20px; height: 4px; background-color: @pieItem.Color"></span>
                </span>
                <span style="flex: 1 0 auto;">@pieItem.Name</span>
                <span style="flex: 1 0 auto; text-align: right">@pieItem.Value.ToString("C2")</span>
            </div>
        </Template>
    </TelerikListView>

</div>

@code {
    public class PieModel
    {
        public string Name { get; set; }
        public double Value { get; set; }
        public string Color { get; set; }
    }

    public List<PieModel> PieData = new List<PieModel>
    {
        new PieModel
        {
            Name = "Product 1",
            Value = 123,
            Color = "#f66"
        },
        new PieModel
        {
            Name = "Product 2",
            Value = 456,
            Color = "#6f6"
        },
        new PieModel
        {
            Name = "Product 3",
            Value = 789,
            Color = "#66f"
        }
    };
}