Axis Ranges

The FlexChart calculates axis ranges automatically, based on the data being shown. Because of this, in most cases you don't have to worry about setting the axis min, max, majorUnit, or minorUnit properties.

In a few cases, however, setting these values explicitly may improve the chart.

For example, the chart below shows values that are relatively close, so all bars have almost the same height. The chart shows that sales are even across countries, but it does not show the differences clearly.

To emphasize the differences, click the 'Custom Range' checkbox. It will set the min and max properties of the Y axis so it starts at 150k, close to the minimum value for all countries but higher than zero. The chart will show the same data, but the differences will appear much larger.

Custom Range

// This file locates: "Scripts/Lesson/C1FlexChart/AxesRanges.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // toggle the custom range
    var warning = document.getElementById('warning');
    document.getElementById('customRange').addEventListener('click', function (e) {
        if (e.target.checked) {
            theChart.axisY.min = 150000;
            theChart.axisY.max = 160000;
            warning.style.display = '';
        } else {
            theChart.axisY.min = theChart.axisY.max = null;
            warning.style.display = 'none';
        }
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AxesRanges
        public ActionResult AxesRanges()
        {
            return View(Models.FlexChartData.GetSales2(150000));
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesRanges_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AxesRanges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesRanges_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesRanges_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesRanges_Text4)
</p>
 
<div class="demo-settings">
    <label for="customRange">@Html.Raw(Resources.C1FlexChart.AxesRanges_Text5)</label>
    <input id="customRange" type="checkbox">
    <div id="warning" class="panel panel-warning" style="display:none">
        <div class="panel-heading">
            @Html.Raw(Resources.C1FlexChart.AxesRanges_Text6)
        </div>
    </div>
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb=>sb.Add().Binding("Sales").Name("Sales"))
    .AxisY(y=>y.Format("n0,").Title("US$ (thousands)"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)