DxChart<T> Class

A Chart component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChart<T> :
    DxChart,
    IDisposable

Type Parameters

Name	Description
T	The data item type.

Remarks

The DevExpress Chart component (<DxChart>) allows you to create Line, Area, Bar, Bubble, Pie, and other chart types for Blazor applications.

Run Demo: Charts - Series Types

Add a Chart to a Project

Follow the steps below to add the Chart component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add the <DxChart>…</DxChart> markup to a Razor page.
3. Bind the component to data.
4. Configure the component (see the sections below).

Read Tutorial: Get Started with Charts Watch Video: Get Started with Charts

Chart Types

<DxChart> provides a variety of 2D series types that display data as a single chart or a combination of different series.

Chart View	Series Type	Demo
Area	DxChartAreaSeries DxChartRangeAreaSeries DxChartSplineAreaSeries DxChartStackedAreaSeries DxChartStackedSplineAreaSeries DxChartFullStackedAreaSeries DxChartFullStackedSplineAreaSeries DxChartStepAreaSeries	Charts - Series Types Charts - Range Area Series
Bar	DxChartBarSeries DxChartRangeBarSeries DxChartStackedBarSeries DxChartFullStackedBarSeries	Charts - Series Types Charts - Range Bar Series
Bubble	DxChartBubbleSeries	Charts - Series Types
Financial	DxChartCandlestickSeries DxChartStockSeries	Charts - Financial Series
Line	DxChartLineSeries DxChartSplineSeries DxChartStackedLineSeries DxChartStackedSplineSeries DxChartFullStackedLineSeries DxChartFullStackedSplineSeries DxChartStepLineSeries	Charts - Series Types
Pie	DxChartPieSeries DxChartDonutSeries	Charts - Pie Series
Scatter	DxChartScatterSeries	Charts - Series Types

Bind to Data

Use the Data property to specify an IEnumerable<T> data source, and the ArgumentField and ValueField properties to specify data source fields that contain arguments and values for chart points. For a sample data source, refer to our GitHub repository.

Note

The Chart operates in bound mode only.

Razor

<DxChart Data="@SalesData">
    <DxChartLineSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" 
                       AggregationMethod="Enumerable.Sum"/>
    <DxChartLineSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" 
                       AggregationMethod="Enumerable.Sum"/>
    <DxChartLineSeries Name="2019" Filter="@((SaleInfo s) => s.Date.Year == 2019)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" 
                       AggregationMethod="Enumerable.Sum"/>
    <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>

@code {
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            //...
    };
    }
}

Series

A chart series is a collection of related data points. You can specify common settings for all chart series, or add series to component markup and configure series-specific settings individually.

Note

Pie charts can only display a Pie or Donut series.

Common Settings

Use the DxChartCommonSeries component to specify common settings for all chart series. The SeriesType property specifies the chart type.

Razor

<DxChart Data="@SalesData">
    <DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)"
                         ArgumentField="@((SaleInfo s) => s.City)"
                         ValueField="@((SaleInfo s) => s.Amount)"
                         SeriesType="ChartSeriesType.Bar">
    </DxChartCommonSeries>
</DxChart>

@code {
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            //...
    };
    }
}

Run Demo: Charts - Series Types

The table below lists common settings for chart series:

Member	Description
AggregationMethod	Specifies how to aggregate series points.
ArgumentField	Specifies a data source field that provides arguments for series values.
Filter	Specifies a filter that is applied to data source objects.
NameField	Specifies a data source field that is used to group data by series.
PaneField	Specifies which data source field provides pane names for chart series.
SeriesTemplate	Specifies a series template
ValueField	Specifies a data source field that provides values for series points.

Note

Individual series settings have priority over common series settings.

Type-Specific Settings

Type-specific series have their own settings. For example, Bubble series display chart data as points with different sizes called “bubbles”. To specify a data source field that provides bubble sizes, use the DxChartBubbleSeries.SizeField property.

Razor

@using System.Drawing

<DxChart Data="@SalesData">
    <DxChartBubbleSeries Name="United States" Filter="@((SaleInfo s) => s.Country == "United States")"
                         ArgumentField="@(s => s.Date.DayOfWeek.ToString())"
                         ValueField="@(s => s.Date.Year)"
                         SizeField="@(s => s.Amount)"
                         Color="@(Color.FromArgb(208, 208, 208))"
                         AggregationMethod="Enumerable.Max" />
    <DxChartBubbleSeries Name="Canada" Filter="@((SaleInfo s) => s.Country == "Canada")"
                         ArgumentField="@(s => s.Date.DayOfWeek.ToString())"
                         ValueField="@(s => s.Date.Year)"
                         SizeField="@(s => s.Amount)"
                         Color="@(Color.FromArgb(252, 58, 48))"
                         AggregationMethod="Enumerable.Max" />
    <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>

@code {
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            //...
    };
    }
}

Run Demo: Charts - Series Types

For line series, you can use the DxChartSeriesPoint component to customize the point’s color, size, symbol, and visibility. These settings apply to all points in a series. To override individual point settings, handle the chart’s CustomizeSeriesPoint event.

Razor

@inject WeatherForecastService ForecastService

<DxChart Data="@ChartData" CustomizeSeriesPoint="@PreparePointColor">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       Color="@System.Drawing.Color.Gray"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesPoint Symbol="ChartPointSymbol.Polygon" Color="@System.Drawing.Color.Gray" Size="25" />
    </DxChartLineSeries>
</DxChart>

@code {
    WeatherForecast[] ChartData;

    protected override async Task OnInitializedAsync() {
        ChartData = await ForecastService.GetForecastAsync();
    }

    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if (value > 75)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if (value < 25)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Blue;
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
}

WeatherForecastService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 15).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
        }).ToList();
    }

    public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
        return Task.FromResult(Forecast.ToArray());
    }
}

Startup

public class Startup {
//...
    public void ConfigureServices(IServiceCollection services) {
    //...
        services.AddSingleton<WeatherForecastService>();
        //...
    }
    //...
}

Run Demo: Charts - Series Point Customization

Labels

Use the DxChartSeriesLabel component to show and configure labels for series data points. These settings apply to all labels in the series.

To override individual label settings, handle the chart’s CustomizeSeriesPoint event and use the event argument’s PointLabel property.

Razor

@inject WeatherForecastService ForecastService

<DxChart Data="@ChartData" CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesLabel Position="RelativePosition.Outside">
            <DxChartSeriesLabelConnector Visible="true" Width="3" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
</DxChart>

@code {
    WeatherForecast[] ChartData;

    protected override async Task OnInitializedAsync() {
        ChartData = await ForecastService.GetForecastAsync();
    }

    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if (value > 25 && value < 75)
            pointSettings.PointLabel.Visible = true;
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
}

WeatherForecastService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 15).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
        }).ToList();
    }

    public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
        return Task.FromResult(Forecast.ToArray());
    }
}

Startup

public class Startup {
//...
    public void ConfigureServices(IServiceCollection services) {
    //...
        services.AddSingleton<WeatherForecastService>();
        //...
    }
    //...
}

Run Demo: Charts - Series Label Customization

Use the LabelOverlap property to specify how the chart resolves overlapping labels.

The code below hides overlapping point labels.

<DxChart Data="@SalesData" LabelOverlap="ChartLabelOverlap.Hide">
    @*...*@
</DxChart>

Run Demo: Charts - Dynamic Series

Axes

Primary X and Y axes are automatically created based on the first series’ data type. The DxChartArgumentAxis class represents the X-axis, and the DxChartValueAxis class represents the Y-axis. Use the Position property to specify the Y-axis position. The DxChartAxisTitle object specifies the axis title.

Axis labels are displayed on the chart’s X-axis. The <DxChart> uses smart label management to ensure that labels do not overlap and are displayed correctly. The Format property specifies the axis label’s format.

If the data range or format is series-specific, each series can use its own Y-axis. The number of Y-axes in a chart is not limited.

<DxChart Data="@SalesData">
    <DxChartTitle Text="Sales amount" />
    <DxChartLegend Position="RelativePosition.Outside" />
    <DxChartValueAxis>
        <DxChartAxisLabel Format="ChartAxisLabelFormat.Percent"></DxChartAxisLabel>
        <DxChartAxisTitle Text="Amount"></DxChartAxisTitle>
    </DxChartValueAxis>
    <DxChartValueAxis Name="TotalAxis" Position="HorizontalEdge.Right">
        <DxChartAxisTitle Text="Total Amount"></DxChartAxisTitle>
    </DxChartValueAxis>
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Cities"></DxChartAxisTitle>
    </DxChartArgumentAxis>
    @*...*@
</DxChart>

Set the chart’s Rotated property to true to swap the axes (e.g., display the X-axis vertically and the Y-axis horizontally).

Use the DxChartArgumentAxis.Type and DxChartValueAxis.Type properties to change the type of X and Y axes, respectively.

Run Demo: Charts - Multiple Axes

Run Demo: Charts - Rotation

Run Demo: Charts - Axis Types

Legend

A chart’s legend lists all chart series. The DxChartLegend component implements the chart legend. Use the Visible property and series’ Name property to specify the legend’s visibility and text, and the Position property to specify the legend’s position.

Enable the AllowToggleSeries property to display checkboxes that toggle the visibility of individual series.

<DxChart Data="@SalesData">
    <DxChartLegend AllowToggleSeries="true" 
                   Orientation="Orientation.Vertical" 
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years">
            <DxChartSubTitle Text="(2017-2019)"></DxChartSubTitle>
        </DxChartTitle>
    </DxChartLegend>
    <DxChartBarSeries Name="2017" ... />
    <DxChartBarSeries Name="2018" ... />
    <DxChartLineSeries Name="2019" ... />
        <DxChartSeriesLegendItem IconCssClass="oi oi-flag">
            <TextTemplate>Last year</TextTemplate>
        </DxChartSeriesLegendItem>
    </DxChartLineSeries>
</DxChart>

Run Demo: Charts - Legend Customization

Titles and Subtitles

The <DxChart> component can display chart/legend titles (DxChartTitle) and subtitles (DxChartSubTitle).

<DxChart Data="@SalesData">
   <DxChartTitle Text="Sales amount">
       <DxChartSubTitle Text="by cities"></DxChartSubTitle>
   </DxChartTitle>
    <DxChartLegend AllowToggleSeries="true" 
                   Orientation="Orientation.Vertical" 
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years">
            <DxChartSubtitle Text="(2017-2019)"></DxChartSubtitle>
        </DxChartTitle>
    </DxChartLegend>
</DxChart>

Run Demo: Charts - Legend Customization

Tooltips

DxChartTooltip specifies tooltip templates. Tooltips are displayed when the mouse pointer is above a chart series.

An instance of this class consists of the following properties:

• Enabled - Specifies whether tooltips are enabled. Set this property to true to display tooltips.
• Position - Specifies the tooltip position.

<DxChart Data="@SalesData"
         CssClass="mw-1100">
    <DxChartTitle Text="Sales amount" />

    <DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
        <div style="margin: 0.75rem">
            <div class="font-weight-bold">@context.Point.SeriesName</div>
            <div>City: @context.Point.Argument</div>
            <div>Amount: @context.Point.Value</div>
        </div>
    </DxChartTooltip>

    <DxChartBarSeries Name="2017" 
                      Filter="@((SaleInfo s) => s.Date.Year == 2017)" 
                      AggregationMethod="Enumerable.Sum" 
                      ArgumentField="@(s => s.City)"
                      ValueField="@(s => s.Amount)" />
    <DxChartBarSeries Name="2018" 
                      Filter="@((SaleInfo s) => s.Date.Year == 2018)" 
                      AggregationMethod="Enumerable.Sum" 
                      ArgumentField="@(s => s.City)"
                      ValueField="@(s => s.Amount)" />
    <DxChartLineSeries Name="2019" 
                       Filter="@((SaleInfo s) => s.Date.Year == 2019)" 
                       AggregationMethod="Enumerable.Sum" 
                       ArgumentField="@(s => s.City)"
                       ValueField="@(s => s.Amount)" />
</DxChart>

Run Demo: Charts - Tooltip Customization

Grid Lines

The DxChartAxisGridLines object specifies Chart grid lines. To show/hide grid lines, use this axis’s Visible property.

The code below sets the argument axis’s Visible property to true to show vertical grid lines in the Chart component.

<DxChart Data="@forecasts">
    <DxChartBarSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                      ValueField="@((WeatherForecast i) => i.Precipitation)"
                      Name="Precipitation">
        <DxChartSeriesLabel Visible="true">
            <DxChartSeriesLabelConnector Visible="true" Width="2" />
        </DxChartSeriesLabel>
    </DxChartBarSeries>
    <DxChartLineSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                       ValueField="@((WeatherForecast i) => i.TemperatureC)"
                       Name="Temperature">
    </DxChartLineSeries>
    <DxChartArgumentAxis>
        <DxChartAxisGridLines Visible="true" />
    </DxChartArgumentAxis>
</DxChart>

Multiple Panes

The <DxChart> component allows you to create charts with multiple panes under each other. A pane (DxChartPane) can display one or more series and can share its argument axis with other panes. To specify the pane where a series is displayed, use the series Pane property.

<DxChart Data="@SalesData">
    <DxChartTitle Text="Sales amount" />
    <DxChartLegend Position="RelativePosition.Outside" VerticalAlignment="VerticalEdge.Bottom" />
    <DxChartPane Name="Pane1"></DxChartPane>
    <DxChartPane Name="Pane2"></DxChartPane>
    <DxChartBarSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)" AggregationMethod="Enumerable.Sum" 
                      Pane="Pane1" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
    <DxChartBarSeries Name="2019" Filter="@((SaleInfo s) => s.Date.Year == 2019)" AggregationMethod="Enumerable.Sum" 
                      Pane="Pane2" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
</DxChart>

Run Demo: Charts - Multiple Panes Customization

Appearance Customization

Use the chart’s CssClass property to customize the chart’s appearance. The following snippet changes the chart’s background color and font size:

<style>
    .my-style {
        background-color: lavender;
        font-size: 16px;
    }
</style>

<DxChart Data="@SalesData" CssClass="my-style">
    <DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)"
                         ArgumentField="@(s => s.City)"
                         ValueField="@(s => s.Amount)"
                         AggregationMethod="Enumerable.Sum"
                         SeriesType="BarSeriesType.Value">
    </DxChartCommonSeries>
    <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>

You can also apply CSS styles to chart elements:

• DxChartLegend.CssClass
• DxChartAxisLabel.CssClass
• DxChartAxisTitle.CssClass
• DxChartTitle.CssClass
• DxChartSubTitle.CssClass

For more information, refer to the following help topic: CSS Classes.

Visualize Pivot Grid Data

You can link <DxChart> to the DxPivotGrid<T> component as follows:

1. Create a method that asynchronously loads data from an IEnumerable<T> data source (Sales.Load() in this example).
2. Create a DxPivotGridDataProvider<T> object based on the created method.
3. Bind the Chart to the provider object. Use the ChartDataSource property.
4. Bind the Pivot Grid to the provider object. Use the PivotGridDataSource property.

<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         SeriesType="ChartSeriesType.Bar" />
</DxChart>

<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" 
        Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" 
        Area="PivotGridFieldArea.Column" Caption="Year"> </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" 
        SummaryType="PivotGridSummaryType.Count"> </DxPivotGridField>
</DxPivotGrid>

@code {
    DxPivotGridDataProvider<SaleInfo> PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.Load());
}

The Chart shows data from the Pivot Grid’s lowest expanded level. The Chart is updated when a user expands or collapses rows/columns in the Pivot Grid.

Run Demo: Pivot Grid - Chart Integration

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

IDisposable

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponentBase

DxComponentBase<DevExpress.Blazor.Internal.JSInterop.ChartsJSInteropProxy>

DxControlComponent<DevExpress.Blazor.DxChart, DevExpress.Blazor.Internal.JSInterop.ChartsJSInteropProxy>

DxControlComponent<DevExpress.Blazor.DxChart, DevExpress.Blazor.Internal.JSInterop.ChartsJSInteropProxy, DevExpress.Blazor.Internal.ChartBaseModel>

DevExpress.Blazor.DxChart

DxChart<T>