@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>

<h1>
    FlexChart CSS
</h1>

<p>
    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.
</p>
<p>
    This example customizes a chart using CSS, and allows you
    to toggle the CSS class to see the effect of the
    customization:
</p>

<div class="demo-settings">
    <label for="customCSS">Custom CSS</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");
    })
)