DxChartZoomAndPanDragBoxStyle.Color Property

Specifies the color of the drag box that appears when a user selects a chart area for zooming.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string Color { get; set; }

Property Value

Type	Description
String	The drag box color.

Remarks

In DxChart, users can drag the mouse to select a chart area for zooming. To enable this functionality, set the AllowDragToZoom property to true.

The DxChartZoomAndPanDragBoxStyle component allows you to configure style settings for the drag box that appears when a user selects a chart area.

The Color property accepts the following values:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names

The example below changes the drag box appearance:

<DxChart Data="@DataSource"
         Width="100%">
    <DxChartTitle Text="Life Expectancy vs. Birth Rate" />
    <DxChartLegend Position="RelativePosition.Inside"
                    VerticalAlignment="VerticalEdge.Top"
                    HorizontalAlignment="HorizontalAlignment.Right" />
    <DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
                            ValueField="@((BirthLife i) => i.BirthRate)"
                            Filter="@((BirthLife i) => i.Year == 1970)"
                            Name="1970">
        <DxChartSeriesPoint Size="8" />
    </DxChartScatterSeries>
    <DxChartScatterSeries ArgumentField="@((BirthLife i) => i.LifeExp)"
                            ValueField="@((BirthLife i) => i.BirthRate)"
                            Filter="@((BirthLife i) => i.Year == 2010)"
                            Name="2010">
        <DxChartSeriesPoint Size="8" />
    </DxChartScatterSeries>
    <DxChartArgumentAxis>
        <DxChartAxisTitle Text="Life Expectancy" />
    </DxChartArgumentAxis>
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Birth Rate" />
    </DxChartValueAxis>
    <DxChartTooltip Enabled="true">
        <div style="margin: 0.75rem">
            <div>@(((BirthLife)context.Point.DataItems.First()).Country)
                 @(((BirthLife)context.Point.DataItems.First()).Year)</div>
        </div>
    </DxChartTooltip>
    <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                                ValueAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                                AllowDragToZoom="true"
                                AllowMouseWheel="true"
                                PanKey="ChartEventPanKey.Shift">
        <DxChartZoomAndPanDragBoxStyle Color="purple" Opacity="0.8" />
    </DxChartZoomAndPanSettings>
</DxChart>

@code {
    IEnumerable<BirthLife> DataSource = Enumerable.Empty<BirthLife>();
    protected override void OnInitialized() {
        DataSource = ChartBirthLifeDataProvider.GenerateData();
    }
}