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:
1 2 3 4 5 6 7 8 9 | // 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 ); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // 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; } |
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: Styling public ActionResult Styling() { return View(Models.FlexChartData.GetSales1()); } } } |
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 | @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" ); }) ) |