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

// This file locates: "Content/css/Lesson/C1FlexChart/LegendStyles.css".
/* custom color for legend box */
.custom-legend.wj-flexchart .wj-legend > rect {
  fill: #003000;
}
 
/* custom color for legend labels */
.custom-legend.wj-flexchart .wj-legend .wj-label {
  fill: white;
  opacity: .9;
  font-size: 80%;
  font-style: italic;
}

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

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