Chandradev's Blog

There are so many chart components (Controls) in Radzen. It is very simple and straight forward to use in project. It will save lots of our development time.

In this post, I will take few charts controls

Before using this code, Please configure your project for Radzen Controls like this

https://chandradev819.com/2022/09/28/getting-started-with-radzen-blazor-controls/

Line Chart In Radzen

@page "/linechart"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>LineChart Demo</h3>

<RadzenChart>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. C"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureC">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. F"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureF">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Temp" />
    </RadzenValueAxis>
</RadzenChart>


@code {
    private WeatherForecast[]? forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }
}

Column Chart Controls

@page "/columnchart"
<h3>ColumnChart Demo</h3>

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
</RadzenChart>
@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue = new DataItem[]
  {
      new DataItem
      {
          Quarter = "Q1",
          Revenue = 234000
      },
      new DataItem
      {
          Quarter = "Q2",
          Revenue = 284000
      },
      new DataItem
      {
          Quarter = "Q3",
          Revenue = 274000
      },
      new DataItem
      {
          Quarter = "Q4",
          Revenue = 294000
      }
  };
}

Summary: In the above code snippet, we saw few Radzen chart controls. we saw that it is very simple to use on Blazor project. There are nearly 10 different chart controls in Radzen. We can select the chart control depending on our scenario.

Hey, Thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.