Your search did not match any results.
Bar Charts

Scale Breaks

Documentation

Scale breaks allow breaking off parts of the axis to improve the readability of a chart with high amplitude values. This example demonstrates auto-calculated scale breaks. You can change the number of breaks, their style or disabled them.

@(Html.DevExtreme().Chart() .ID("chart") .Title("Relative Masses of the Heaviest\n Solar System Objects") .Legend(l => l.Visible(false)) .Series(s => s .Add() .Type(SeriesType.Bar) .ValueField("Mass") .ArgumentField("Name") ) .ValueAxis(v => v .Add() .Visible(true) .AutoBreaksEnabled(true) .MaxAutoBreakCount(3) .BreakStyle(b => b.Line(ScaleBreakLineStyle.Waved)) ) .DataSource(new List<object> { new { Name = "Jupiter", Mass = 318 }, new { Name = "Saturn", Mass = 95 }, new { Name = "Uranus", Mass = 14.6 }, new { Name = "Neptune", Mass = 17.2 }, new { Name = "Earth", Mass = 1 }, new { Name = "Venus", Mass = 0.82 }, new { Name = "Mars", Mass = 0.11 }, new { Name = "Mercury", Mass = 0.06 } }) ) <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Enable Breaks") .Value(true) .ElementAttr("class", "checkbox") .OnValueChanged(@<text> function(data) { var chart = $("#chart").dxChart("instance"); chart.option("valueAxis[0].autoBreaksEnabled", data.value); } </text>) ) </div> <div class="option"> <span>Max Count</span> @(Html.DevExtreme().SelectBox() .DataSource(new int[] { 1, 2, 3, 4 }) .Value(3) .Width(60) .OnValueChanged(@<text> function(data) { var chart = $("#chart").dxChart("instance"); chart.option("valueAxis[0].maxAutoBreakCount", data.value); } </text>) ) </div> <div class="option"> <span>Style</span> @(Html.DevExtreme().SelectBox() .DataSource(new ScaleBreakLineStyle[] { ScaleBreakLineStyle.Waved, ScaleBreakLineStyle.Straight }) .Value(ScaleBreakLineStyle.Waved) .Width(120) .OnValueChanged(@<text> function(data) { var chart = $("#chart").dxChart("instance"); chart.option("valueAxis[0].breakStyle.line", data.value); } </text>) ) </div> </div>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ScaleBreaks() { return View(); } } }
#chart { height: 440px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { display: inline-block; margin-right: 70px; margin-top: 5px; } .option > span { margin: 0 10px 0 0; } .checkbox{ margin-top: -4px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }