Skip to main content

WidgetFunction

Namespace: Wisej.Web.Ext.ChartJS4

Assembly: Wisej.Web.Ext.ChartJS4 (4.1.0.0)

Defines a named JavaScript function that can be referenced in chart options using the (ctx)=>functionName pattern for scriptable options.

public class WidgetFunction

Assign instances to WidgetFunctions. On the client, an option value such as "(ctx)=>myFunction" is replaced by a function that declares the parameters listed in the parentheses and uses Source as its body.

Example:

var alternate = new ChartJS4.WidgetFunction
{
    Name = "alternateColor",
    Source = "return ctx.dataIndex % 2 === 0 ? 'red' : 'blue';"
};
chart.WidgetFunctions = new[] { alternate };
chart.DataSets[0].BackgroundColor = "(ctx)=>alternateColor";

Constructors​

Instance member WidgetFunction()​

Initializes a new instance of WidgetFunction.

Properties​

Instance member Name​

String: Returns or sets the name of the function (referenced in chart options as (ctx)=>Name).

Value: The function name. The default is an empty string.

The name must not contain white space or parentheses. The function is also registered on the client widget under this name; a warning is logged if it overrides an existing member.

Example:

var fn = new ChartJS4.WidgetFunction { Name = "borderColor", Source = "return ctx.raw < 0 ? 'red' : 'green';" };
chart.WidgetFunctions = new[] { fn };
chart.DataSets[0].BorderColor = "(ctx)=>borderColor";

Instance member Source​

String: Returns or sets the JavaScript source code of the function body.

Value: The body of the JavaScript function. The default is an empty string.

The source is used as the body of a function created with the JavaScript Function constructor, so it must not include the function(…) { } declaration. The parameter names are the ones declared in the referencing option value, e.g. ctx for "(ctx)=>Name"; they are also available through arguments. Use return to return the value to Chart.js.

Example:

var fn = new ChartJS4.WidgetFunction
{
    Name = "alternateColor",
    Source = "return ctx.dataIndex % 2 === 0 ? 'red' : 'blue';"
};