Bar chart of array proprty

Ask the Community
1

I have requirement to plot bar chart on workshop, x axis should be from array property and y axis from another array property. it just one to one mapping between x values and y values how to plot graph of it

2

Hi Priyanka! Happy to add some color here:

Chart XY doesn’t plot array properties directly. Use a TypeScript Function returning a TwoDimensionalAggregation to build your arrays into chart-compatible buckets.

The problem:

Chart XY accepts two data sources: an object set (with aggregation) or a Function returning TwoDimensionalAggregation. Array properties on a single object fit neither as the chart expects rows of objects, not parallel arrays on one object.

The solution is to build a function-backed chart layer:

Write a Function that reads both array properties, zips them, and returns a TwoDimensionalAggregation:

typescript

import { Function } from "@foundry/functions-api";
import { TwoDimensionalAggregation } from "@foundry/functions-api";
import { MyObjectType } from "@foundry/ontology-api";

export class ArrayChartFunctions {
    @Function()
    public async getBarChartData(
        obj: MyObjectType
    ): Promise<TwoDimensionalAggregation<string>> {
        const xValues = obj.xArrayProperty ?? [];
        const yValues = obj.yArrayProperty ?? [];
        
        // Validate arrays are aligned
        if (xValues.length !== yValues.length) {
            throw new Error(
                `Array length mismatch: X has ${xValues.length}, Y has ${yValues.length}`
            );
        }

        return {
            buckets: xValues.map((label, i) => ({
                key: String(label),
                value: yValues[i] ?? 0,
            })),
        };
    }
}

Then wire it in Workshop:

  1. In Chart XY, add a Function-backed layer

  2. Select getBarChartData as the function

  3. Pass your object as the input parameter

  4. Set chart type to Bar

The function builds X and Y into buckets with one bar per array element, X as labels and Y as heights.

Note on array alignment:

This assumes both arrays are the same length and index-aligned (element 0 of X maps to element 0 of Y). If arrays can be mismatched, validate and throw (shown in the code above).

Alternative is to denormalize into separate objects:

If you need this chart in multiple places or want advanced aggregation features (segmenting, sorting, filtering), use a transform to explode your arrays into individual objects — one object per x/y pair. Then use a standard object set-backed chart without a function. This would be more work upfront but cleaner downstream and more flexible depending on the use case.

Docs: Chart XY widget — function-backed layers, aggregation configuration