Axes

Chart axes have two main purposes:

scaling: Axes set the range of values shown on the chart. By default, this range is calculated automatically by the chart. The ranges are used even if the axes are hidden from view.
context: Axes display tickmarks and labels that help identify the values being displayed (e.g. "what country and value does this bar represent?").

By default, the FlexChart uses horizontal lines to show the x-axis and major gridlines along the y-axis. This makes charts clean and easy-to-read.

The chart below adds minor tickmarks and gridlines to make it easier to compare the values on the chart.

You can remove the axes completely by setting their position property to 'None'. The result is the 'cleanest' possible chart, with a high data-to-ink ratio.

In this example, the reduction is a little too radical, but the chart is still usable (check the tooltips):

Show Axes

// This file locates: "Scripts/Lesson/C1FlexChart/Axes.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    var axisX = theChart.axisX;
    axisX.format = 'MMM dd';
    axisX.majorGrid = true; // show major gridlines
    axisX.majorTickMarks = 'Cross'; // None,Outside,Inside,Cross
    axisX.majorUnit = 7;
    axisX.minorGrid = true; // show minor gridlines
    axisX.minorTickMarks = 'None'; // None,Outside,Inside,Cross
    axisX.minorUnit = 1;
 
    var axisY = theChart.axisY;
    axisY.min = 790;
    axisY.max = 860;
    axisY.format = 'c0';
    axisY.axisLine = true; // show axis line
    axisY.majorGrid = true; // show major gridlines
    axisY.majorTickMarks = 'Cross'; // None,Outside,Inside,Cross
    axisY.majorUnit = 20;
    axisY.minorGrid = true; // show minor gridlines
    axisY.minorTickMarks = 'None'; // None,Outside,Inside,Cross
    axisY.minorUnit = 5;
 
    // toggle axes
    document.getElementById('showAxes').addEventListener('click', function (e) {
        var show = e.target.checked;
        theChart.axisX.position = show ? 'Bottom' : 'None';
        theChart.axisY.position = show ? 'Left' : 'None';
    });
});

// This file locates: "Content/css/Lesson/C1FlexChart/Axes.css".
.custom-gridlines.wj-flexchart .wj-axis-x .wj-tick,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-tick {
    stroke: darkgreen;
}
.custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline {
    opacity: .25;
    stroke: darkgreen;
    stroke-width: 1px;
}
.custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor,
.custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor {
    opacity: .25;
    stroke: darkgreen;
    stroke-dasharray: 0;
    stroke-width: .25px;
}
 
.wj-tooltip {
  padding: 12px;
}
.wj-tooltip table tr td {
  text-align: right;
  padding-right: 6px;
}
.wj-tooltip table tr td:last-child {
  font-weight: bold;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
@{ 
    var tooltipContent = "<b>{Date:MMM dd}</b><br/>" +
        "<table>" +
        "<tr><td>high</td><td>{High:n2}</td><tr/>" +
        "<tr><td>low</td><td>{Low:n2}</td><tr/>" +
        "<tr><td>open</td><td>{Open:n2}</td><tr/>" +
        "<tr><td>close</td><td>{Close:n2}</td><tr/>" +
        "</table>";
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Axes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Axes_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexChart.Axes_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.Axes_Text3)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexChart.Axes_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Axes_Text5)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Axes_Text6)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Axes_Text7)
</p>
 
<div class="demo-settings">
    <label for="showAxes">@Html.Raw(Resources.C1FlexChart.Axes_Text8)</label>
    <input id="showAxes" type="checkbox" checked="checked">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .Header(Resources.C1FlexChart.Axes_Text9)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Series(sb=>sb.Add().Binding("High,Low,Open,Close").Name(Resources.C1FlexChart.Axes_Text10))
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Tooltip(t=>t.Content(tooltipContent))
)
<div id="theChart" class="custom-gridlines"></div>