Custom Axis Labels

The Axis class has an itemFormatter property that allows you to customize the content and appearance of specific labels along the axes.

If specified, the itemFormatter function takes two parameters:

engine: The IRenderEngine object used for rendering the labels.
label: An object that represents the label and has these properties:
- value: The value that the label represents.
- text: The text content of the label (usually the formatted value).
- pos: The position where the label will be rendered, in control coordinates.
- cls: A CSS class to be applied to the label element.

// This file locates: "Scripts/Lesson/C1FlexChart/AxesCustomLabels.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    theChart.axisY.itemFormatter = function (engine, label) {
        if (label.val >= 4000) {
            label.cls = 'large-value';
        }
        return label;
    }
});

// This file locates: "Content/css/Lesson/C1FlexChart/AxesCustomLabels.css".
.large-value {
  fill: darkgreen;
  font-size: 125%;
  font-weight: bold;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text3)
    </li>
  <li>
    @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text4)
    <ul>
      <li>
        @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text5)
      </li>
      <li>
        @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text6)
      </li>
      <li>
        @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text7)
      </li>
      <li>
        @Html.Raw(Resources.C1FlexChart.AxesCustomLabels_Text8)
      </li>
    </ul>
  </li>
</ol>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
    .AxisY(a=>a.Format("n0,").Title("US$ (thousands)"))
)