Title Styles

Use CSS to customize the style of the chart titles.

Custom Titles:

// This file locates: "Scripts/Lesson/C1FlexChart/TitleStyles.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // toggle custom styles
    document.getElementById('customTitles').addEventListener('click', function (e) {
        wijmo.toggleClass(theChart.hostElement, 'custom-titles', e.target.checked)
    });
});

// This file locates: "Content/css/Lesson/C1FlexChart/TitleStyles.css".
/* custom color for all titles */
.custom-titles.wj-flexchart .wj-title {
  fill: #42357C;
}
 
/* custom size/weight for header */
.custom-titles.wj-flexchart .wj-header .wj-title {
  font-size: 120%;
  font-weight: bold;
}
 
/* custom size/weight for footer */
.custom-titles.wj-flexchart .wj-footer .wj-title {
  font-size: 90%;
  font-weight: bold;
}
 
/* custom style for axis-x/y titles */
.custom-titles.wj-flexchart .wj-axis-x .wj-title,
.custom-titles.wj-flexchart .wj-axis-y .wj-title{
  font-size: 75%;
  font-style: normal;
  opacity: .5;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.TitleStyles_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.TitleStyles_Text1)
</p>
 
<div class="demo-settings">
    <label for="customTitles">@Html.Raw(Resources.C1FlexChart.TitleStyles_Text2) </label>
    <input id="customTitles" type="checkbox" checked="true">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .CssClass("custom-titles")
    .Bind("Country", Model)
    .Header(Resources.C1FlexChart.LegendStyles_Text3)
    .Footer(Resources.C1FlexChart.LegendStyles_Text4)
    .AxisX(x=>x.Title("Country"))
    .AxisY(y=>y.Title("Values/Units"))
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)