Labels and Formats

Use the axisX and axisY properties to control the labels shown along the axes.

In this sample, we set the format of the Y axis labels to 'n0,', which scales the values to show thousands instead of the raw values. This is done by C1 MVC's Globalize class, which takes the current culture into account.

Notice how the labels along the X axis are automatically rotated to avoid collisions. If you want to prevent that, set the axis labelAngle to a specific angle.

SalesExpensesUSCanadaMexicoUKGermanyFranceJapanKoreaChina05,000US$ (thousands)
1
2
3
4
5
6
7
8
9
10
11
12
13
// This file locates: "Scripts/Lesson/C1FlexChart/AxesLabelsFormats.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var labelAngle = wijmo.Control.getControl('#labelAngle');
 
    theChart.axisY.format = 'n0';
    theChart.axisY.title = 'US$ (thousands)';
 
 
    labelAngle.textChanged.addHandler(function (s, e) {
        theChart.axisX.labelAngle = s.selectedValue;
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AxesLabelsFormats
        public ActionResult AxesLabelsFormats()
        {
            return View(Models.FlexChartData.GetSales2());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
@{
    var angles = new[] { 0, 30, 45, 60, 90 };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesLabelsFormats_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AxesLabelsFormats_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesLabelsFormats_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesLabelsFormats_Text3)
</p>
 
<div class="demo-settings">
    <label for="labelAngle">@Html.Raw(Resources.C1FlexChart.AxesLabelsFormats_Text4)</label>
    @(Html.C1().ComboBox<int>().Id("labelAngle")
        .Bind(angles)
        .Placeholder(Resources.C1FlexChart.AxesLabelsFormats_Text5)
        .IsRequired(false)
        .Text("")
    )
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)