You can also override the default style settings for each series by setting the style and symbolStyle properties of any series to an object that specifies SVG styling attributes, including fill, stroke, strokeThickness, and so on.

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.

This example uses the style and symbolStyle properties to select style attributes for each series:

// This file locates: "Scripts/Lesson/C1FlexChart/SeriesStyles.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    theChart.series[0].style = { fill: 'green', stroke: 'darkgreen', strokeWidth: 1 };
    theChart.series[1].style = { fill: 'red', stroke: 'darkred', strokeWidth: 1 };
    theChart.series[2].style = { stroke: 'orange', strokeWidth: 5 };
    theChart.series[2].symbolStyle = { fill: 'gold', stroke: 'gold' };
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.SeriesStyles_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesStyles_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesStyles_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesStyles_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesStyles_Text4)
</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);
    })
)