Blazor Chart - Create and Configure a Line Chart

This example uses the DevExpress Blazor Chart component to create and customize a multi-line chart. A DataTable object supplies chart data.

Implementation Details

Add a Chart and Populate It with Data

To begin, place a DxChart component on the page (Index.razor) and add line series objects to chart markup.

This example generates series in a loop and binds them to specific regions in the DataTable using Data properties. ArgumentField and ValueField properties use lambda expressions to retrieve data from each table row (using the corresponding column name).

<DxChart T="object" Width="70%">
    @* ... *@
    @foreach (var region in regionNames) {
        <DxChartLineSeries Data="@(regionSeriesData[region])"
                           ArgumentField='(DataRow row) => (DateTime)row["Month"]'
                           ValueField='(DataRow row) => (int)row["Amount"]'
                           Width="2"
                           Color="@(region == "Europe" ? ColorTranslator.FromHtml("#6DFFE7") :
                                                         ColorTranslator.FromHtml("#1873D3"))"
                           Name="@region">
        </DxChartLineSeries>
    }
</DxChart>

Extend Functionality and Apply Customizations

The DevExpress Blazor Chart component (DxChart) allows you to extend chart capabilities and configure descriptive elements as necessary. This example applies the following changes:

• Adds a chart title:

  <DxChartTitle Text="Sales Amount by Region, $" />

• Configures legend settings and allows users to toggle series visibility (via the AllowToggleSeries property):

  <DxChartLegend Position="RelativePosition.Outside"
                 AllowToggleSeries="true"
                 VerticalAlignment="VerticalEdge.Bottom" />

• Formats argument axis labels:

  <DxChartArgumentAxis>
      <DxChartAxisLabel Format="ChartElementFormat.ShortDate" />
  </DxChartArgumentAxis>

• Adds and formats chart tooltips:

  <DxChartTooltip Enabled="true">
      @context.Point.Render((seriesPoint) =>
          @<div style="margin: 0.75rem">
              <div>@seriesPoint.SeriesName</div>
              <span>@($"{seriesPoint.Argument: MMMM yyyy}: ")</span>
              <span>@($"{seriesPoint.Value: $0}K")</span>
          </div>
      )
  </DxChartTooltip>

• Enables zoom/pan operations for both argument and value axes and adds a scroll bar:

  <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both" />
  <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                            ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Bottom" />

This example also changes individual series point colors using the CustomizeSeriesPoint event:

<DxChart T="object"
         CustomizeSeriesPoint="CustomizeSeriesPoint">
    @* ... *@
</DxChart>

@code {
    // ...
    protected void CustomizeSeriesPoint(ChartSeriesPointCustomizationSettings e) {
        int value = (int)((ChartSeriesPoint<object>)e.Point).Value;
        var color = ColorTranslator.FromHtml("#00A86B");
        if (value < 1200)
            color = ColorTranslator.FromHtml("#FFBF00");
        if (value < 1000)
            color = ColorTranslator.FromHtml("#F04923");
        e.PointAppearance.Color = color;
    }
}

Files to Review

• Index.razor

Documentation

• DxChart Class
• Get Started with Charts
• Series Types
• Descriptive Elements
• Customization
• Zoom Operations

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)