FlexChart
FlexChart
Gradients
This example shows how to specify gradients for series style properties.
Features
Sample
Settings
Description
The FlexChart supports gradient colors.
The gradient descriptor is an expression formatted as follows:
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]]
The <type> can be either linear or radial. The uppercase L or R letters indicate absolute coordinates offset from the SVG surface. Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied.
The <coords> specify a linear gradient vector as x1, y1, x2, y2, or a radial gradient as cx, cy, r and optional fx, fy, fr specifying a focal point away from the center of the circle.
Specify <colors> as a list of dash-separated CSS color values. Each color may be followed by a custom offset and opacity value, separated with a colon character.
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
Linear gradient format example:
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
Source
GradientsController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexChartController { public ActionResult Gradients() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Fill", new object[]{ "Light Blue - l(0,0,1,0)#89f7fe-#66a6ff", "Aqua - l(0,0,0,1)#13547a-#80d0c7", "Red - l(0, 0, 1, 1)#ff0844-#ffb199", "Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef", "Plum - r(0.5,0.5,0.7)#cc208e-#6713d2", "Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867", "Orange - l(0, 0, 0, 1)#e27f00-#ae1a73", "Green - l(0, 0, 1, 1)#abd800-#5c7e00" } } } }; return View(Fruit.GetFruitsSales()); } } }
Gradients.cshtml
@model IEnumerable<Fruit> @using C1.Web.Mvc.Chart @{ ViewBag.DemoSettings = true; } @section Scripts{ <script> var chart, series; c1.documentReady(function () { chart = wijmo.Control.getControl('#chartGradients'); series = chart.series[0]; }); function customChangeFill(control, value) { series.style.fill = value.substr(value.indexOf('-') + 2); chart.refresh(); } </script> } @(Html.C1().FlexChart().Id("chartGradients") .ChartType(ChartType.Column) .Bind(Model) .BindingX("Name").Legend(Position.None) .DataLabel(label => { label.Content("{y}"); }) .Series(ser => { ser.Add().Name("March").Binding("MarPrice").Style(s => s.Stroke("darkred").StrokeWidth(1).Fill("l(0,0,1,0)#89f7fe-#66a6ff")); }) ) @section Summary{ @Html.Raw(Resources.FlexChart.Gradients_Text7) } @section Description{ <p>@Html.Raw(Resources.FlexChart.Gradients_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text1)</p> <pre> <type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]] </pre> <p>@Html.Raw(Resources.FlexChart.Gradients_Text2)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text3)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text4)</p> <pre> 'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8' </pre> <p>@Html.Raw(Resources.FlexChart.Gradients_Text5)</p> <pre> 'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff' </pre> }
Documentation