Charts

charts in procesio forms overview the charts component in procesio forms allows you to visualize data returned by processes directly inside your forms instead of displaying raw numbers or tables, you can render dynamic, interactive charts that update automatically based on your process output charts are ideal for building internal dashboards, monitoring workflows, tracking trends, and presenting data summaries to end users — all without leaving the form context supported chart types procesio currently supports four chart types, each suited for different data visualization needs chart type best used for bar comparing values across categories line showing trends over time pie displaying proportions or distributions combo combining bar and line data in one view adding a chart to a form to add a chart component to your form open the form designer in procesio in the component panel, locate the chart component drag and drop it onto your form canvas open the component's settings panel to configure chart configuration title & subtitle title — the main heading displayed above the chart subtitle — an optional secondary line of text shown below the title, useful for adding context or units height sets the vertical size of the chart on the form canvas enter a value in pixels (e g , 400) axis names configure the axis labels to make your chart easier to read x axis name — label for the horizontal axis (e g , month , department ) y axis name — label for the primary vertical axis (e g , count , revenue ) secondary y axis name — label for a second vertical axis, used in combo charts when two data series have different scales empty text the message shown inside the chart area when no data is available or the process returns an empty result use this to provide a helpful hint, such as "no data available for the selected period" display controls these toggles control the visual behavior and interaction of your chart control description show legend displays a color coded legend identifying each data series show tooltip enables hover tooltips that reveal exact values when a user mouses over a data point smooth line renders line and combo chart lines as curves instead of straight segments stacked stacks multiple data series on top of each other (bar charts) useful for part to whole comparisons horizontal flips the bar chart to render horizontally instead of vertically donut converts a pie chart into a donut chart (hollow center) zoomable enables zoom and pan interaction on the chart, useful for large datasets loading displays a loading indicator on the chart while data is being fetched from the process data source configuration charts receive their data from a process output you configure the data source using two settings series source type defines how the chart receives its data two options are available json — data is provided as a static json value or bound directly from a process variable url — data is fetched from an external url that returns a json response series source value the actual data binding or url for json mode, this is typically mapped to a process output variable that returns a json array ⚠️ important each chart type expects a different json structure using the wrong format will result in an empty or incorrect chart refer to the formats below when preparing your process output bar chart json each object in the array represents one series (a group of bars) the data array contains the values for each category, and name is the series label shown in the legend json \[ { "data" \[42, 58, 65, 89], "name" "leads" }, { "data" \[30, 44, 51, 72], "name" "qualified" }] the category labels for the x axis (e g , q1, q2, q3, q4 ) are configured separately via the axis mapping settings, not inside the json line chart json same structure as bar each object is a series with a data array of numeric values and a name for the legend json \[ { "data" \[120, 132, 101, 134, 190, 230], "name" "workflows" }, { "data" \[82, 93, 90, 93, 129, 133], "name" "executions" }] pie / donut chart json pie charts use a flat array of named values each object must have a name (the segment label) and a value (the numeric size of the segment) this is different from bar and line — there is no data array json \[ { "name" "website", "value" 48 }, { "name" "marketplace", "value" 26 }, { "name" "partners", "value" 16 }, { "name" "events", "value" 10 }] the value fields do not need to sum to 100 — procesio calculates the percentages automatically combo chart json combo charts mix series types in a single array each object must include a type field set to either "bar" or "line" line series can also include "smooth" true and "yaxisindex" 1 to plot against the secondary y axis when the two series have different scales json \[ { "data" \[320, 332, 301, 334, 390, 330, 320], "name" "visitors", "type" "bar" }, { "data" \[12, 15, 14, 18, 21, 19, 16], "name" "conversion %", "smooth" true, "type" "line", "yaxisindex" 1 }] use "yaxisindex" 1 on a series when it should be plotted against the secondary y axis remember to also set the secondary y axis name in the chart settings so the axis is labeled correctly colors & visual customization colors the colors field is optional if you leave this field empty, the chart will automatically use the default colors you can also customize the colors by adding an array of color values the colors will be applied in order to the chart items the values can be \["red", "blue"]; \["cd5c5c"]; \[{"rgba" \[255, 0, 0, 1]} ] option overrides for advanced users, option overrides allows you to pass a raw configuration object to the underlying chart engine this enables fine grained control over visual properties not exposed in the standard ui, such as custom fonts, grid lines, or animation settings chart types in detail bar chart bar charts compare values across discrete categories use the horizontal toggle to switch between vertical bars (column chart) and horizontal bars common use cases submissions per status requests per department count of records per category enable stacked to layer multiple series, making it easy to see both totals and sub group composition at a glance line chart line charts display continuous data over time, making it easy to spot trends and patterns common use cases submissions over time activity tracking per day/week/month process execution volume trends enable smooth line for a curved, modern look enable zoomable when working with dense time series data pie chart pie charts show the proportional breakdown of a whole into its parts common use cases distribution of request types status breakdown (e g , open / in progress / closed) percentage of records per category enable donut to render the same data as a donut chart — a popular modern alternative that leaves space in the center for a summary label combo chart combo charts combine bar and line series in a single visualization this is useful when you want to show both volume (bars) and a trend or rate (line) together use the secondary y axis name when the two series have different scales — for example, displaying both raw counts (bars) and a percentage rate (line) on the same chart without distortion interactive features when configured, charts support the following interactions for end users hover tooltips — mouse over any data point or bar to see the exact value enable via the show tooltip toggle zoom & pan — available on line and combo charts when zoomable is enabled users can click and drag to zoom into a time range and scroll to pan legend toggle — when show legend is on, users can click legend items to show or hide individual series best practices match chart type to your data story use bar for comparisons, line for trends, pie/donut for proportions, and combo when you need two different metrics on the same canvas keep series count manageable charts with more than 5–6 series can become hard to read consider filtering or aggregating data at the process level before passing it to the chart always set meaningful axis names users shouldn't need to guess what the axes represent use empty text always fill in the empty text field so users understand why no chart is showing, rather than seeing a blank space use subtitle for units or context for example, "values in usd" or "data refreshed daily" enable loading when your process may take a moment to return data, so users know the chart is working limitations (current version) the following features are not available in the current release export to png or pdf external embedding of charts advanced analytics (forecasting, ai driven insights) scatter plot, bubble, radar, heatmap, and funnel chart types