Legends and Titles

Use the header, footer, and axis title properties to add titles to your charts.

The series elements can also have titles, defined by the series name property and displayed in the chart's legend:

Header:
Footer:
X-Axis Title:
Y-Axis Title:

// This file locates: "Scripts/Lesson/C1FlexChart/LegendsTitles.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var header = wijmo.Control.getControl('#header');
    var footer = wijmo.Control.getControl('#footer');
    var xTitle = wijmo.Control.getControl('#xTitle');
    var yTitle = wijmo.Control.getControl('#yTitle');
 
    header.textChanged.addHandler(function (s, e) {
        theChart.header = s.text;
    });
 
    footer.textChanged.addHandler(function (s, e) {
        theChart.footer = s.text;
    });
 
    xTitle.textChanged.addHandler(function (s, e) {
        theChart.axisX.title = s.text;
    });
 
    yTitle.textChanged.addHandler(function (s, e) {
        theChart.axisY.title = s.text;
    });
 
    // initialize titles
    header.text = 'My Great Chart'
    footer.text = 'powered by ComponentOne\'s MVC FlexChart';
    xTitle.text = 'Country';
    yTitle.text = 'Values/Units';
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.LegendsTitles_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.LegendsTitles_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.LegendsTitles_Text2)
</p>
 
<div class="demo-settings">
    <label for="header">@Html.Raw(Resources.C1FlexChart.LegendsTitles_Text3) </label>
    @Html.C1().ComboBox().Id("header").ShowDropDownButton(false)
    <br>
    <label for="footer">@Html.Raw(Resources.C1FlexChart.LegendsTitles_Text4) </label>
    @Html.C1().ComboBox().Id("footer").ShowDropDownButton(false)
    <br>
    <label for="xTitle">@Html.Raw(Resources.C1FlexChart.LegendsTitles_Text5) </label>
    @Html.C1().ComboBox().Id("xTitle").ShowDropDownButton(false)
    <br>
    <label for="yTitle">@Html.Raw(Resources.C1FlexChart.LegendsTitles_Text6) </label>
    @Html.C1().ComboBox().Id("yTitle").ShowDropDownButton(false)
</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");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)