component design

[GtxMexico BackDoor]

I would like you to help me achieve this design.

*Rounded edges

*a gray background of the component

*different sizes

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager

            <SfChart Background="black" Width="100%" Height="110%" >

                <ChartArea Width="100%" Background="black"></ChartArea>

                <ChartPrimaryXAxis Visible="false" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" EdgeLabelPlacement="EdgeLabelPlacement.Shift"> </ChartPrimaryXAxis>

                <ChartSeriesCollection>

                    <ChartSeries DataSource="@SalesReports" XName="Month" YName="Sales" Type="ChartSeriesType.Column">

                        <ChartEmptyPointSettings Fill="red" Mode="@Mode">

                            <ChartEmptyPointBorder Color="#FFFFFF" Width="4"></ChartEmptyPointBorder>

                        </ChartEmptyPointSettings>

                    </ChartSeries>

                </ChartSeriesCollection>

            </SfChart>

@code {

    public class ChartData

    {

        public string Month { get; set; }

        public Nullable<double> Sales { get; set; }

    }

    public EmptyPointMode Mode = EmptyPointMode.Average;

    public List<ChartData> SalesReports = new List<ChartData>

    {

        new ChartData{ Month= "Jan", Sales= 30 },

    };

}

This is what I have achieved with the code I have made, thank you very much for your help

[Nishanthi Panner Selvam]

Hi GtxMexico,

Greetings from Syncfusion.

We suggest you to use ChartCornerRadius to display column rectangle with rounded edge. You can change the ChartSeries color using Fill property. We have prepared sample based on your requirement. Please check with the below snippet and sample.

<SfChart Background="black" EnableSideBySidePlacement="false">

<ChartSeriesCollection>

 <ChartSeries Fill="lightgrey">

    <ChartCornerRadius BottomLeft="20" BottomRight="20" TopLeft="20" TopRight="20">

    </ChartCornerRadius>

 </ChartSeries>

</ChartSeriesCollection>

</SfChart>

Sample : https://blazorplayground.syncfusion.com/LjBpZWrdpqpUrKhx

We already have an online which demonstrates the rounded column chart sample.

Demo : https://blazor.syncfusion.com/demos/chart/rounded-column?theme=bootstrap5

Kindly revert us if you have any other concerns.

Regards,

Durga Gopalakrishnan.