Series Gradients

The FlexChart allows you to specify gradients for series style properties. The gradients are specified as strings with the following syntax:

{type}({coords}){color[:offset[:opacity]]}

Where:

{type} is either 'l' or 'r', for linear or radial gradients,
{coords} is a set of three or four numbers that specify the gradient direction (x1/y1/x2/y2 for linear, cx.cy.r for radial), and
{color:offset:opacity} is an HTML color string optionally followed by offset and opacity values. You may add add additional colors using a hyphen as a separator.

The chart below uses gradients to fill the area under the series:

// This file locates: "Scripts/Lesson/C1FlexChart/Gradients.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    theChart.series[0].style = { fill: 'l(0, 0, 0, 1)#ff0000-#ff0000:1:0', stroke: 'darkred', strokeWidth: 1 };
    theChart.series[1].style = { fill: 'l(0, 0, 0, 1)#00b050-#00b050:1:0', stroke: 'darkgreen', strokeWidth: 1 };
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Gradients_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Gradients_Text1)
</p>
 
<pre>{type}({coords}){color[:offset[:opacity]]}</pre>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Gradients_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.Gradients_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.Gradients_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.Gradients_Text5)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1FlexChart.Gradients_Text6)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Area)
    .Stacking(C1.Web.Mvc.Chart.Stacking.Stacked)
    .Series(sb=>
    {
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Sales").Name("Sales");
    })
)