FlexChart CSS

Like all C1 MVC controls, the FlexChart adds well-known class names to elements in its DOM tree. These class names allow you to define CSS rules that customize the appearance of each chart element.

This example customizes a chart using CSS, and allows you to toggle the CSS class to see the effect of the customization:

Custom CSS

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

// This file locates: "Content/css/Lesson/C1FlexChart/Styling.css".
/* custom chart theme */
.custom-chart {
  background: #efefef;
  background: linear-gradient(to bottom right, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);  
  box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
  padding: 8px;
 }
.custom-chart .wj-label {
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
}
.custom-chart .wj-legend .wj-label {
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
}
.custom-chart .wj-legend > rect {
  fill: #f8f8f8;
  stroke: #c0c0c0;
}
.custom-chart .wj-plot-area > rect {
  fill: white;
  stroke: #c0c0c0;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Styling_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Styling_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Styling_Text2)
</p>
 
<div class="demo-settings">
    <label for="customCSS">@Html.Raw(Resources.C1FlexChart.Styling_Text3)</label>
    <input id="customCSS" type="checkbox" checked="checked">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .CssClass("custom-chart")
    .Bind("Country", Model)
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)