Multiple Value Axes

The Chart control can have several value axes associated with different series. You can specify a collection of a chart's value axes using the BootstrapChart.ValueAxisCollection property. Each axis in the collection is a BootstrapChartValueAxis object. For each axis, specify the BootstrapChartCommonSeriesBase.Name property that uniquely identifies it. The same value should be assigned to a series's BootstrapChartSeriesBase.Axis property to associate it with a particular value axis.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/engine.json" TitleSettings-Text="Engine Power">
    <SettingsCommonSeries ArgumentField="rpm" />
    <SettingsToolTip Enabled="True"></SettingsToolTip>
    <SeriesCollection>
        <dx:BootstrapChartLineSeries ValueField="power" Axis="power" Name="Power"/>
        <dx:BootstrapChartLineSeries ValueField="torque" Axis="torque" Name="Torque"/>
    </SeriesCollection>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis Name="power" TitleSettings-Text ="kW"></dx:BootstrapChartValueAxis>
        <dx:BootstrapChartValueAxis  Name="torque" Position ="Right" TitleSettings-Text ="kN"></dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
    <ArgumentAxis>
        <Label>
            <Format Type="Decimal"/>
        </Label>
    </ArgumentAxis>
</dx:BootstrapChart>

Axis Breaks

If an axis's values range is huge and most values are significantly smaller than the axis maximum value, or there are intervals in your data, you can collapse the space by adding axis breaks.

Note that axis breaks can only be used with continuous and logarithmic type axes.

For more details, refer to the following articles:

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/dataWithGap.json" TitleSettings-Text="Axis Breaks">
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="value"  ArgumentField="argument"  Name="value" />
    </SeriesCollection>
    <ArgumentAxis>
        <Breaks>
            <dx:BootstrapChartAxisBreak StartValue="16000" EndValue="25000"></dx:BootstrapChartAxisBreak>
            <dx:BootstrapChartAxisBreak StartValue="2000" EndValue="6000"></dx:BootstrapChartAxisBreak>
        </Breaks>
        <BreakStyle Color="OrangeRed" Width="10" />
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis >
            <Breaks>
                <dx:BootstrapChartAxisBreak StartValue="100" EndValue="1100" />
            </Breaks>
            <BreakStyle Color="YellowGreen" LineType="Straight" />
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
</dx:BootstrapChart>

Auto Axis Breaks

The Chart control can automatically detect spaces between neighboring points and collapse them using scale breaks. Use the EnableAutoBreaks property to enable this functionality. Note that this property has effect only if the axis' type is continuous or logarithmic.

You can limit the numer of automatically inserted breaks using the BootstrapChartValueAxis.MaxAutoBreakCount property.

Refer to the following articles for more information:

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/dataWithGap.json" TitleSettings-Text="Axis Breaks">
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ValueField="value"  ArgumentField="argument"  Name="value" />
    </SeriesCollection>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis EnableAutoBreaks="true">
            <BreakStyle Color="YellowGreen"  />
        </dx:BootstrapChartValueAxis>
    </ValueAxisCollection>
</dx:BootstrapChart>

Constant Lines

The Chart can display constant lines, which indicate arbitrary constant values. Constant lines extend over the entire chart and are always perpendicular to the axis to which they belong. You can add constant lines to an axis using the ConstantLineCollection property. Each constant line within this collection is represented by a BootstrapChartConstantLine object. You can configure a constant line's visual presentation through its properties:

  • Color - Specifies the constant line's color.
  • Width - Specifies the constant line's width in pixels.
  • PaddingTopBottom - Generates a space between the top/bottom side of a constant line and the constant line label.
  • PaddingLeftRight - Generates a space between the left/right side of a constant line and the constant line label.
  • Label - Provides access to the constant line label's settings.
  • DashStyle - Specifies the constant line's dash style.

You can also specify these settings for an argument or value axis's constant lines using the BootstrapChartAxisSettingsBase.ConstantLineStyle property. You can also change style of all constant lines in a chart using the BootstrapChart.SettingsCommonAxis.ConstantLineStyle property.

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/engine.json" TitleSettings-Text="Engine Power">
   <SettingsCommonSeries ArgumentField="rpm" />
   <SettingsToolTip Enabled="True"></SettingsToolTip>
   <SeriesCollection>
       <dx:BootstrapChartLineSeries ValueField="power" Axis="power" Name="Power"/>
   </SeriesCollection>
    <SettingsCommonAxis>
        <ConstantLineStyle Color="Black" DashStyle="LongDash"></ConstantLineStyle>
    </SettingsCommonAxis>
   <ValueAxisCollection>
       <dx:BootstrapChartValueAxis Name="power" TitleSettings-Text ="kW">
           <ConstantLineStyle Color="Violet" Width="4" DashStyle="Dot"></ConstantLineStyle>
           <ConstantLineCollection>
               <dx:BootstrapChartConstantLine Value="90" Color="YellowGreen"></dx:BootstrapChartConstantLine>
               <dx:BootstrapChartConstantLine Value="45" ></dx:BootstrapChartConstantLine>
           </ConstantLineCollection>
       </dx:BootstrapChartValueAxis>
   </ValueAxisCollection>
   <ArgumentAxis>
       <Label>
           <Format Type="Decimal"/>
       </Label>
       <ConstantLineCollection>
           <dx:BootstrapChartConstantLine Value="2000" ></dx:BootstrapChartConstantLine>
           <dx:BootstrapChartConstantLine Value="5500" ></dx:BootstrapChartConstantLine>
       </ConstantLineCollection>
   </ArgumentAxis>
        </dx:BootstrapChart>
Screen Size
Color Themes
Demo QR Code