Blazor Charts - Zoom and Pan, Aggregation and Summaries, Custom Label Format, and more (available in v21.1)

As you may already know, our most recent release (v21.1) includes a number of enhancements for the DevExpress Blazor Chart component. In this post I’ll summarize these new features and briefly describe their use.

Zoom and Pan

The DevExpress Blazor Chart component now supports zoom and scroll operations for the following XY (Cartesian) series views: bars, lines, areas, financial, range bar, and range area.

To enable zoom/scroll, add the DxChartZoomAndPanSettings component to the chart and set the ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties.

To add a scrollbar, use the DxChartScrollBarSettings component. The ArgumentAxisScrollBarPosition property allows you to specify the scrollbar position.

<DxChart ...>
  <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
    ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.None" />
  <DxChartScrollBarSettings ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Top"
    ArgumentAxisScrollBarVisible="true" />
    ...
</DxChart>

Aggregation and Summaries

Our Blazor Chart component now supports data aggregation - as such, you can now decrease the number of visible points and optimize chart performance. You can use different aggregate methods to group chart data.

Data aggregation is available for the X-axis. The chart splits the X-axis into intervals, aggregates data for each interval and displays values as series points. When users zoom the chart, it automatically re-aggregates data.

You can adjust aggregation settings by adding the DxChartAggregationSettings component to the series component:

<DxChart ...>
  <DxChartLineSeries ... >
    <DxChartAggregationSettings Enabled="true" Method="AggregationMethod.Average"/>
  </DxChartLineSeries>
  ...
</DxChart>

If you only need to group data (without the automatic re-aggregation on zoom operations), use the SummaryMethod property instead.

Axis Range

You can now specify visual ranges for both argument and value axes. Use the StartValue and EndValue properties as requirements dictate.

Customize Margins

With v21.1, you can specify whether to add margins between outermost series points and chart boundaries. Use the SideMarginsEnabled and EndOnTick properties to control this behavior. If you set both these properties to false, maximum and minimum series points fall onto the axis lines.

<DxChart ... />
  <DxChartArgumentAxis EndOnTick="false" SideMarginsEnabled="false">
  </DxChartArgumentAxis>
  <DxChartValueAxis EndOnTick="false" SideMarginsEnabled="false">
  </DxChartValueAxis>
  ...
</DxChart>

Size Settings

You can now customize Chart size using the Height and Width properties. You can use absolute or relative units. If you specify a relative height/width, the final render will be based on parent container options. You can also specify a floating-point value which will be automatically converted to a pixel value.

Axis and Series Label Format

You can specify the display format used for axis and series labels. Use the Format property for axis or series as requirements dictate. The ChartElementFormat class contains properties for date-time formats and methods for numeric formats. You can also define a custom format based on the LDML standard.

<DxChartSeriesLabel Visible="true"
  Format='ChartElementFormat.FromLdmlString("\"Value: \" #0.00$;\"Value: \"-#0.00$")' />

<DxChartSeriesLabel Visible="true" Format='ChartElementFormat.FixedPoint(3)' />

It's also possible to use a custom format string and specify precision for numeric formats.

<DxChartAxisLabel Format='ChartElementFormat.FromLdmlString("dd.MM.yyyy h:m")' />

<DxChartAxisLabel Format='ChartElementFormat.Exponential(3)' />

Disable Animation

You can now disable the animation effect for Chart series when the Chart component is initially rendered. Set the DxChartAnimationSettings.Enabled property to false.

<DxChart ...>
  <DxChartAnimationSettings Enabled="false"/>
</DxChart>