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

<h1>
    Series Styles
</h1>

<p>
    The FlexChart automatically picks colors for each series based
    on a default palette, which you can override by setting the
    <b>palette</b> property.
</p>
<p>
    You can also override the default style settings for each series
    by setting the <b>style</b> and <b>symbolStyle</b> properties of
    any series to an object that specifies SVG styling attributes,
    including fill, stroke, strokeThickness, and so on.
</p>
<p>
    The Series.style property is an exception to the general rule
    that all styling in C1 MVC is done through CSS. This is because
    many charts have dynamic series, which would be impossible to
    style in advance.
</p>
<p>
    This example uses the <b>style</b> and <b>symbolStyle</b>
    properties to select style attributes for each series:
</p>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols);
    })
)