Chart

Live demo

Renders a chart.

Node name : chart

Attributes

Attribute	Type	Required	Default value	Description
type	string (bar, line, scatter, bubble, pie, doughnut, polarArea, radar)	true		Chart type.
data	object	true		Chart data. The structure of the object depends of the type.
options	object	false		Chart options. The structure of the object depends of the type.
item-labels	object (array of string arrays)	false		Per-data-point display labels (e.g. names behind a slice or bar), shown as extra tooltip lines on hover.
element-click	string (method name)	false		Name of the UI method called with an IChartElementClickEventArgs when a data element (slice, bar, point) is clicked.

Note

This component is powered by Chart.js.

The data and options objects must follow the format defined by Chart.js for each chart type.

You can pass these objects as anonymous types (as shown in the examples below) or define your own data objects that match the expected format.

For detailed structure and usage examples, refer to the official Chart.js documentation and samples.

The optional item-labels attribute adds extra lines to the hover tooltip, one array of labels per data point (same index as the values in data). Useful when a single point already summarizes several underlying items and the reader needs to see which ones - for example the names behind one slice of a doughnut chart. A chart that doesn't pass this attribute keeps Chart.js's default tooltip unchanged.

Clicking a chart element

The optional element-click attribute names a UI method called when the user clicks a data element: a slice of a pie or doughnut chart, a bar, a point of a line or radar chart. The method receives a GroupeIsa.Neos.Designer.UIAbstractions.IChartElementClickEventArgs as its first parameter, which must be declared explicitly. Inside a repeat node, the method receives the current item as a second parameter.

Property	Type	Description
DatasetIndex	int	Index of the clicked element's dataset in data's datasets.
Index	int	Index of the clicked element in its dataset, also its index in data's labels.
Label	string?	data's label at Index, or null when there is none.
DatasetLabel	string?	Label of the clicked element's dataset, or null when there is none.
Value	decimal?	Value of the clicked element when it is a number, null when it is an object (e.g. a scatter or bubble point).

To find the business item behind the clicked element, keep the source list used to build data (in a field, for example) and read it at Index - for example to open a detail view.

• Only a click directly on a data element calls the method, a click on empty space does nothing.
• On a chart with several datasets, only the element under the cursor is reported (e.g. one bar of a group).
• The legend keeps its default Chart.js behavior: clicking an entry hides or shows its dataset.
• While hovering a data element, the cursor becomes a pointer.

Examples

Horizontal bar

<chart type="bar" data="@Fields.HorizontalBarData" options="@Fields.HorizontalBarOptions" />

Fields.HorizontalBarData = new
{
    Labels = new[] { "January", "February", "March", "April", "May", "June", "July" },
    Datasets = new[]
    {
        new
        {
            Label = "Dataset 1",
            BackgroundColor = "rgb(249, 115, 22)",
            Data = new[] { 65, 59, 80, 81, 56, 55, 40 }
        },
        new
        {
            Label = "Dataset 2",
            BackgroundColor = "rgb(6, 182, 212)",
            Data = new[] { 28, 48, 40, 19, 86, 27, 90 }
        }
    }
};

Fields.HorizontalBarOptions = new
{
    IndexAxis = "y",
};

Doughnut chart with tooltip item labels

<chart type="doughnut" data="@Fields.StatusData" item-labels="@Fields.StatusItemLabels" />

Fields.StatusData = new
{
    Labels = new[] { "Healthy", "At risk" },
    Datasets = new[]
    {
        new
        {
            Data = new[] { 3, 2 },
            BackgroundColor = new[] { "rgb(22, 163, 74)", "rgb(220, 38, 38)" },
        }
    }
};

// One array of names per slice, in the same order as StatusData's own values (3 healthy, 2 at risk).
Fields.StatusItemLabels = new[]
{
    new[] { "ClusterA", "ClusterB", "ClusterC" },
    new[] { "ClusterD", "ClusterE" },
};

Pie chart opening a detail view on click

<chart type="pie" data="@Fields.SalesByCategoryData" element-click="OpenCategoryDetailAsync" />

// Fields.Categories is the source list SalesByCategoryData was built from, in the same order.
Fields.SalesByCategoryData = new
{
    Labels = Fields.Categories.Select(category => category.Name).ToArray(),
    Datasets = new[]
    {
        new
        {
            Data = Fields.Categories.Select(category => category.Sales).ToArray(),
        }
    }
};

// UI method OpenCategoryDetailAsync, with a first parameter "args" of type
// GroupeIsa.Neos.Designer.UIAbstractions.IChartElementClickEventArgs
CategorySales category = Fields.Categories[args.Index];
await NavigateAsync(new NavigationOptions(UIViews.CategoryUI)
    .WithId(new Dictionary<string, object> { ["Id"] = category.Id }));

Mixed chart (Bar + Line)

Fields.BarLineData = new
{
    Labels = new[] { "January", "February", "March", "April", "May", "June", "July" },
    Datasets = new[]
    {
        new
        {
            Type = "line",
            Label = "Dataset 1",
            Data = new[] { 50, 25, 12, 48, 56, 76, 42 },
            BackgroundColor = (string?)"rgb(249, 115, 22)",
            BorderColor = (string?)"rgb(249, 115, 22)",
            BorderWidth = 2,
            Fill = (bool?)false,
            Tension = (decimal?)0.4,
        },
        new
        {
            Type = "bar",
            Label = "Dataset 2",
            Data = new[] { 21, 84, 24, 75, 37, 65, 34 },
            BackgroundColor = (string?)"rgb(107, 114, 128)",
            BorderColor = (string?)null,
            BorderWidth = 0,
            Fill = (bool?)null,
            Tension = (decimal?)null,
        },
        new
        {
            Type = "bar",
            Label = "Dataset 3",
            Data = new[] { 41, 52, 24, 74, 23, 21, 32 },
            BackgroundColor = (string?)"rgb(6, 182, 212)",
            BorderColor = (string?)null,
            BorderWidth = 0,
            Fill = (bool?)null,
            Tension = (decimal?)null,
        }
    }
};