FlexChart
Gradients
Features
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.
Linear gradient format example:
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
Radial gradient format example:
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
using System;
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
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());
}
}
}
@model IEnumerable<Fruit>
@{
ViewBag.DemoSettings = true;
var marStyle = new SVGStyle
{
Stroke = "darkred",
StrokeWidth = 1,
Fill = "l(0,0,1,0)#89f7fe-#66a6ff"
};
}
@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>
}
<c1-flex-chart id="chartGradients" binding-x="Name" chart-type="Column" legend-position="None">
<c1-flex-chart-datalabel content="{y}" />
<c1-items-source source-collection="Model" />
<c1-flex-chart-series name="March" binding="MarPrice" style="@marStyle"></c1-flex-chart-series>
</c1-flex-chart>
@section Summary{
This example shows how to specify gradients for series style properties.
}
@section Description{
<p>@Html.Raw(FlexChartRes.Gradients_Text0)</p>
<p>@Html.Raw(FlexChartRes.Gradients_Text1)</p>
<pre>
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]]
</pre>
<p>@Html.Raw(FlexChartRes.Gradients_Text6)</p>
<p>@Html.Raw(FlexChartRes.Gradients_Text2)</p>
<p>@Html.Raw(FlexChartRes.Gradients_Text3)</p>
<p>@Html.Raw(FlexChartRes.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(FlexChartRes.Gradients_Text5)</p>
<pre>
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
</pre>
}