Gridlines and Tickmarks

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.

You can change this by modifying the axisX and axisY properties. This example shows how you create and control major and minor gridlines along both axes, and how to customize them using CSS.

Gridlines

Custom CSS Custom Units

X Major X Minor

Y Major Y Minor

// This file locates: "Scripts/Lesson/C1FlexChart/AxesGridlinesTickmarks.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // toggle custom CSS, grid visibility
    onCheck('customGridlines', function (checked) {
        wijmo.toggleClass(theChart.hostElement, 'custom-gridlines', checked)
    });
    onCheck('x-major', function (checked) {
        theChart.axisX.majorGrid = checked;
    });
    onCheck('x-minor', function (checked) {
        theChart.axisX.minorGrid = checked;
    });
    onCheck('y-major', function (checked) {
        theChart.axisY.majorGrid = checked;
    });
    onCheck('y-minor', function (checked) {
        theChart.axisY.minorGrid = checked;
    });
    onCheck('customUnits', function (checked) {
        if (checked) {
            theChart.axisX.majorUnit = 7;
            theChart.axisX.minorUnit = 1;
            theChart.axisY.majorUnit = 20;
            theChart.axisY.minorUnit = 5;
        } else {
            theChart.axisX.majorUnit = null;
            theChart.axisX.minorUnit = null;
            theChart.axisY.majorUnit = null;
            theChart.axisY.minorUnit = null;
        }
    });
    function onCheck(id, fn) {
        document.getElementById(id).addEventListener('click', function (e) {
            fn(e.target.checked);
        });
    }
});

// This file locates: "Content/css/Lesson/C1FlexChart/AxesGridlinesTickmarks.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;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text2)
</p>
 
<h4>
    @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text3)
</h4>
 
<div class="row demo-settings">
    <div class="col-xs-4">
        <label>
            <input id="customGridlines" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text4)
        </label>
        <label>
            <input id="customUnits" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text5)
        </label>
    </div>
    <div class="col-xs-4">
        <label>
            <input id="x-major" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text6)
        </label>
        <label>
            <input id="x-minor" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text7)
        </label>
    </div>
    <div class="col-xs-4">
        <label>
            <input id="y-major" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text8)
        </label>
        <label>
            <input id="y-minor" type="checkbox" checked="checked">
            @Html.Raw(Resources.C1FlexChart.AxesGridlinesTickmarks_Text9)
        </label>
    </div>
</div>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .CssClass("custom-gridlines")
    .AxisX(x=>x.Format("MMM dd")
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(7)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(1))
    .AxisY(y=>y.Min(790).Max(860)
                .Format("c0")
                .AxisLine(true) // show axis line
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(20)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(5))
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Bind("Date", Model)
    .Series(sb=>sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)