Chart (Blazor)

This article demonstrates how to use the Radzen Blazor Chart component. Check also the component guide and API reference.

Using in Radzen

We will create a simple column chart that displays the category sales from the Northwind database (via the Category Sales for 1997 view).

First make sure that you have a MSSQL data source for the Northwind database and it includes that view.

1. Create a new page in an existing Radzen Blazor application.
2. Drag and drop a Chart component.
3. Click the “…” button next to the Series label in the Property Grid.
4. Add a new series and set its Type to Column.
5. Series need data. Open the Data dropdown and pick “new…”.
6. Pick the getCategorySalesFor1997s operation from the Operations dropdown and click Save.
7. The series has data. Set CategoryProperty to CategoryName. This means that the X axis of the chart (a.k.a category axis) will display the CategoryName property of the data items.
8. Set ValueProperty to CategorySales. The Y axis (a.k.a. value axis) will use the CategorySales property of the data item.
9. Finally set the Title property of the series to Category Sales.

That’s it! Radzen will display a column chart in design time and use some mock data to simulate the runtime appearance.

We can hide the legend since we have only one series. Expand the Legend section in the property grid and uncheck its Visible property. Also let’s display the Y axis (value) labels as currency. Expand the ValueAxis section in the property grid and set FormatString to $ {0}.

Here is how the final result should look like.

Using from code

The Radzen Blazor Chart can display data as column, line, area and pie series. The chart series needs data and configuration to tell it which property of the data item is the value of the series (Y axis) and which is the category (X axis).

All series have the following common properties:

• IEnumerable<T> Data

Specifies the data source which the series should display.

• string ValueProperty

The name of the property which provides values for the Y axis of the chart. The property should be of numeric type: int, long, float, double, decimal.

• string CategoryProperty

The name of the property which provides value for the X axis of the chart. The property can be string, Date or numeric. If not set the Radzen Chart will use the index of the data item as its X axis value.

Basic usage

Here is a very basic example that creates a column chart with minimal configuration.

<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
      }
  };
}

The RadzenColumnSeries tag is used to specify that the chart has a column series. The Data property specifies the data source. The chart will render a column for every DataItem instance from the revenue array. The Y (value) axis displays the Revenue property and the X (category) axis displays the Quarter property.

Axis configuration

Min, max and step

By default the Radzen Blazor Chart determines the Y axis minimum and maximum based on the range of values. For example it finds the minimum and maximum values and uses the closes “nice” number. A nice number is usually a multiple of a power of 10: 0, 10, 100, 1000, 200000 etc. In the previous example the chart automatically uses 200000 as the minimum and 300000 as the maximum.

To override the defaults use the Min, Max and Step properties of the RadzenValueAxis tag.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenValueAxis Min="0" Max="400000" Step="100000" />
</RadzenChart>

Format the values

The value axis displays values with default formatting (ToString()). This can be customized in two ways - via the FormatString or the Formatter properties.

FormatString supports the standard .NET Number formats.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenValueAxis FormatString="{0:C}"/>
</RadzenChart>

Display grid lines

You can make the chart display grid lines for either the value or category axis. Add a RadzenGridLines tag inside RadzenValueAxis or RadzenCategoryAxis and set its Visible property to true.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenValueAxis>
      <RadzenGridLines Visible="true" />
  </RadzenValueAxis>
  <RadzenCategoryAxis>
      <RadzenGridLines Visible="true" />
  </RadzenCategoryAxis>
</RadzenChart>

Set axis title

Use the RadzenAxisTitle tag to display text below the category axis or next to the value axis.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenValueAxis>
      <RadzenAxisTitle Text="Revenue" />
  </RadzenValueAxis>
  <RadzenCategoryAxis>
      <RadzenAxisTitle Text="Quarter" />
  </RadzenCategoryAxis>
</RadzenChart>

Legend configuration

The Radzen Blazor Chart displays a legend by default. It uses the Title property of the series (or category values for pie series) as items in the legend. The legend is at the right side of the chart by default. You can change the position of the legend via the Position property.

Legend position

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

Hide the legend

To hide the legend set the Visible property to false.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenLegend Visible="false" />
</RadzenChart>

Tooltip

The Radzen Blazor chart displays a tooltip when the user hovers series with the mouse. The tooltip by default inclused the series category, value and series name.

Customize tooltip content

To customize the tooltip content use the TooltipTemplate setting of the series.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue">
    <TooltipTemplate Context="data">
      <div>
        Revenue for <span>@data.Quarter</span> 2020:
        <strong>@data.Revenue</strong>
      </div>
    </TooltipTemplate>
  </RadzenColumnSeries>
</RadzenChart>

Disable tooltips

To disable the tooltips set the Visible property of the RadzenChartTooltipOptions tag to false.

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
  <RadzenChartTooltipOptions Visible="false" />
</RadzenChart>

API

RadzenChart

RadzenCategoryAxis

RadzenValueAxis

RadzenLineSeries<TItem>

RadzenAreaSeries<TItem>

RadzenColumnSeries<TItem>

RadzenPieSeries<TItem>

RadzenPieSeries<TItem>

RadzenLegend

RadzenTicks

Configure the ticks of RadzenCategoryAxis or RadzenValueAxis.

<RadzenCategoryAxis>
  <RadzenTicks Stroke="green" StrokeWidth="2" />
</RadzenCategoryAxis>

RadzenChartTooltipOptions

RadzenMarkers

Enables and configures marker rendering for line and area series. Markers are shapes rendered for each item in the series data source.

<RadzenLineSeries Data="@revenue" CategoryProperty="Date" ValueProperty="Revenue">
  <RadzenMarkers MarkerType="MarkerType.Square" />
</RadzenLineSeries>