Skip to main content

Zooming and Scrolling

The Chart control allows scrolling and zooming its content. These capabilities have contiguous functionality and should be enabled simultaneously. This topic consists of the following sections:

Zooming

To enable scrolling, specify the ArgumentAxis and ValueAxis properties.

Bootstrap_Charts_ZoomingMode_gif

The following code sample implements the chart’s zooming capability:

<dx:BootstrapChart ID="ChartLine" runat="server" DataSourceUrl="~/Content/fullstackedbar.json" TitleText="Energy Consumption in 2004" SubtitleText="(Millions of Tons, Oil Equivalent)" ZoomingMode="All">
    <SettingsCommonSeries ArgumentField="country" />
    <SeriesCollection>
        <dx:BootstrapChartLineSeries ValueField="hydro" Name="Hydro-electric" />
        <dx:BootstrapChartLineSeries ValueField="oil" Name="Oil" />
        <dx:BootstrapChartLineSeries ValueField="gas" Name="Natural gas" />
        <dx:BootstrapChartLineSeries ValueField="coal" Name="Coal" />
        <dx:BootstrapChartLineSeries ValueField="nuclear" Name="Nuclear" />
    </SeriesCollection>
    <ArgumentAxis ValueMarginsEnabled="false" DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
    <SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TitleText="millions" />
    </ValueAxisCollection>
</dx:BootstrapChart>

Scrolling

Scrolling allows end users to navigate the zoomed chart’s content.

Set the Visible property to true and specify the ArgumentAxis and ValueAxis properties to enable scrolling.

Bootstrap_Charts_ScrollingMode_gif

You can also customize a bar’s position and offset using the corresponding BootstrapChartScrollBarSettings class properties.

Bootstrap_Charts_ScrollBar

Use the following code to implement the chart above:

<dx:BootstrapChart runat="server" DataSourceUrl="~/Content/simple.json" TitleText="Daily Sales" Rotated="true" ScrollingMode="All" ZoomingMode="All">
    <ArgumentAxis ArgumentType="System.DateTime" MaxValue="1/10/2017" >
        <Label>
            <Format Type="ShortDate" />
        </Label>
        </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis TickInterval="1" />
    </ValueAxisCollection>
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ArgumentField="date" ValueField="sales" />
    </SeriesCollection>
        <SettingsScrollBar Visible="True" />
    <SettingsLegend Visible="false" />
</dx:BootstrapChart>