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" />
<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>
<SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" />
<SettingsToolTip Enabled="True"></SettingsToolTip>
</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>
<SettingsLegend Visible="false" />
<SettingsToolTip Enabled="True"></SettingsToolTip>
</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>
<SettingsLegend Visible="false" />
<SettingsToolTip Enabled="True"></SettingsToolTip>
</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" />
<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" Color="#8c8cff"></dx:BootstrapChartConstantLine>
<dx:BootstrapChartConstantLine Value="5500" Color="#8c8cff"></dx:BootstrapChartConstantLine>
</ConstantLineCollection>
</ArgumentAxis>
<SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" />
<SettingsToolTip Enabled="True"></SettingsToolTip>
</dx:BootstrapChart>
Axis Positions
The Chart allows you to specify the custom position and offset of the X and Y axes relative to each other using the following properties:
<dx:BootstrapChart ID="AxisPositionsChart" runat="server" TitleSettings-Text="Custom Axis Positions">
<SettingsCommonSeries Type="Scatter">
</SettingsCommonSeries>
<SeriesCollection>
<dx:BootstrapChartScatterSeries ArgumentField="x1" ValueField="y1">
</dx:BootstrapChartScatterSeries>
<dx:BootstrapChartScatterSeries ArgumentField="x2" ValueField="y2">
<Point Symbol="TriangleDown" />
</dx:BootstrapChartScatterSeries>
</SeriesCollection>
<ArgumentAxis CustomPosition="0">
<VisualRangeSettings>
<NumericAxis StartValue="-20" EndValue="20" />
</VisualRangeSettings>
</ArgumentAxis>
<ValueAxisCollection>
<dx:BootstrapChartValueAxis EndOnTick="false" CustomPosition="0">
<VisualRangeSettings>
<NumericAxis StartValue="-20" EndValue="20" />
</VisualRangeSettings>
</dx:BootstrapChartValueAxis>
</ValueAxisCollection>
<SettingsLegend Visible="false" />
<SettingsToolTip Enabled="True"></SettingsToolTip>
</dx:BootstrapChart>
protected void Page_Load(object sender, EventArgs e) {
AxisPositionsChart.DataSource = GetDataForCustomPosition();
AxisPositionsChart.DataBind();
}
public static IEnumerable<object> GetDataForCustomPosition() {
var rnd = new Random();
Nullable<int> x1 = null;
Nullable<int> x2 = null;
Nullable<int> y1 = null;
Nullable<int> y2 = null;
int i;
List<object> ds = new List<object>();
for(i = 0; i < 20; i++) {
x1 = rnd.Next(5, 15);
y1 = rnd.Next(5, 15);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x2 = rnd.Next(5, 15);
y2 = rnd.Next(-15, -5);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x2 = rnd.Next(-15, -5);
y2 = rnd.Next(5, 15);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
for(i = 0; i < 20; i++) {
x1 = rnd.Next(-15, -5);
y1 = rnd.Next(-15, -5);
ds.Add(new { x1 = x1, y1 = y1, x2 = x2, y2 = y2 });
}
return ds.ToArray();
}