> For the complete documentation index, see [llms.txt](https://docs.labii.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.labii.com/widgets/section-widgets/report/data-driven-charts/composed-chart-by-category-x.md). # Composed Chart By Category X ## Specs | Label | Value | | ------------------------- | ----------------------------- | | **Version** | 0.1.0 (updated on 2026-05-18) | | **Developer** | Labii Inc. | | **Type** | Section | | **Support Configuration** | Yes | ## Overview The Composed Chart By Category X widget visualizes categorical laboratory data with a mix of chart styles in a single section widget. It lets you configure multiple numeric series, assign each series its own chart type, color, aggregation rule, and left or right Y axis, then plot them against the same categorical X axis. This makes the widget well suited for comparing measurements with different units or display needs, such as counts, yields, percentages, and concentrations, without splitting the analysis into separate charts. ## Use Cases * **Multi-Metric Experiment Review**: Show sample count as bars, average yield as a line, and impurity percentage as an area series across treatment groups * **Manufacturing Batch Monitoring**: Compare batch volume, pass rate, and defect count in one view while keeping incompatible units on separate Y axes * **Quality Control Dashboards**: Overlay maximum, average, and minimum values for grouped categories such as lots, instruments, or operators * **Inventory and Consumption Tracking**: Plot item usage with bars and remaining stock with a line across reagent categories or storage locations * **Project Reporting**: Summarize throughput, turnaround time, and exception rate across teams or workflow stages in one composed visualization * **Grouped Scientific Analysis**: Break each numeric series into separate traces by group so researchers can compare responses by condition, species, or site ## Interface ### Read-only View The read-only view displays a composed chart where all configured series share the same categorical X axis while each series can render as a bar, line, area, or scatter trace. The chart is optimized for comparison across categories and is especially useful when different metrics need distinct visual treatments. * **Data Display**: Categorical values appear on the X axis, with one or more numeric series rendered together in a single chart * **Mixed Visualization**: Each series can use a different chart type, helping users distinguish counts, trends, and distributions at a glance * **Dual Y Axes**: Series can be assigned to the left or right Y axis to compare measurements with different scales or units * **Series Differentiation**: Colors and legends help identify each series and grouped variation * **Interactive Review**: Hovering over the chart reveals exact values for each visible series at a category * **Export Access**: The widget supports downloading the data behind the chart for further analysis
Read-only view of Composed Chart By Category X widget displaying categorized data
#### Edit View The edit view is not applicable for this widget. Composed Chart By Category X is a reporting widget, so users configure it through the widget settings panel rather than editing the chart directly inside the section body. ### Configuration #### Initial Setup {% stepper %} {% step %} Add the **Composed Chart By Category X** widget to a section from the **Data Driven Charts** category {% endstep %} {% step %} Open the widget settings by clicking the **Configure** button in the widget header {% endstep %} {% step %} Select the source table, define the X axis, then add one or more numeric series for the composed chart {% endstep %} {% step %} Adjust sorting, grouping, axis assignments, and auto-update settings, then click **Save** {% endstep %} {% endstepper %} #### Required Settings * **Table**: Select a table to update the filter dropdown and define the dataset used by the widget #### Optional Settings **Data Source and Filtering** * **Query**: Specify a query to limit the results included in the chart. Use this to focus the widget on a subset of records such as a single project, date range, or status **X Axis Settings** * **X axis**: Choose a column for the X axis. If nothing is selected, the record name is used as the category label * **X axis sorting**: Choose how to sort X axis values * **String (A-Z)**: Sort alphabetically in ascending order * **String (Z-A)**: Sort alphabetically in descending order * **Number (Ascending)**: Sort numerically in ascending order * **Number (Descending)**: Sort numerically in descending order * **RID (Ascending)**: Sort by record ID in ascending order * **RID (Descending)**: Sort by record ID in descending order * **X axis format**: Choose how foreign key values appear on the X axis * **Full (UID: Name)**: Display the full foreign key label * **Name only**: Display only the referenced record name **Grouping** * **Group**: Choose a column to group data by. Group values become separate chart series for each configured numeric series, which is useful when you want to compare the same measurement across conditions or cohorts **Series Configuration** * **Series**: Add one or more series. Each series can use its own column, chart type, color, Y axis, and aggregation method * **Series > Column**: Choose a numeric column for the series * **Series > Chart type**: Choose how the series is drawn * **Area**: Emphasize magnitude and fill beneath the trend * **Bar**: Compare discrete category values clearly * **Line**: Highlight trend changes across categories * **Scatter**: Emphasize individual points rather than connected trends * **Series > Color**: Set the display color for the series * **Series > Y axis**: Choose whether the series uses the left or right Y axis * **Left**: Plot the series against the primary Y axis * **Right**: Plot the series against the secondary Y axis * **Series > Data aggregation**: Define how values are summarized when multiple records match the same X axis value **Aggregation Options** The widget supports the following aggregation values for each series: * **None**: Show values without aggregation when the data structure allows it * **Sum**: Add matching values together * **Max**: Return the largest value * **Median**: Return the middle value * **Min**: Return the smallest value * **Average**: Return the mean value **Display Settings** * **Chart title**: Provide the title shown above the chart * **Height**: Set chart height in pixels. The default is 250px **Auto-Update Settings** * **Should auto update**: If enabled, the widget performs a live recalculation when source data changes * **Should auto update when empty**: If enabled, the widget performs a live calculation even when the widget is currently empty {% stepper %} {% step %} Choose the **Table** that contains the records you want to visualize {% endstep %} {% step %} Select an **X axis** column, or leave it empty to use record names {% endstep %} {% step %} Optionally set **Query**, **X axis sorting**, **X axis format**, and **Group** to shape the dataset and category presentation {% endstep %} {% step %} Add one or more **Series**, then configure the numeric **Column**, **Chart type**, **Color**, **Y axis**, and **Data aggregation** for each series {% endstep %} {% step %} Set the **Chart title**, adjust **Height**, and enable either auto-update option if the chart should refresh automatically {% endstep %} {% step %} Click **Save** to render the composed chart {% endstep %} {% endstepper %} {% hint style="info" %} This widget is most effective when each configured series represents a meaningful numeric measure and the chosen X axis has a manageable number of categories. {% endhint %} #### Advanced Configuration For more analytical layouts: {% stepper %} {% step %} Assign low-range metrics such as percentages to the **Right** Y axis and high-range metrics such as counts or totals to the **Left** Y axis {% endstep %} {% step %} Mix **Bar**, **Line**, **Area**, and **Scatter** series to distinguish totals, trends, envelopes, and point-based measurements in one chart {% endstep %} {% step %} Use **Group** together with multiple configured series when you need each measurement split by condition, instrument, or treatment group {% endstep %} {% step %} Apply **Query** filters to narrow the chart to a specific project phase, sample class, time window, or QC status when performance or readability becomes an issue {% endstep %} {% endstepper %} {% hint style="warning" %} Too many categories, groups, or series can make the chart difficult to read. If the visualization becomes crowded, reduce the scope with a query or split the analysis across multiple widgets. {% endhint %} ### Additional Functions #### Mixed Series Visualization The primary strength of this widget is its ability to combine different chart types in one chart. * **Bar series** are useful for totals, counts, or category-level comparisons * **Line series** are useful for trends or continuous movement across ordered categories * **Area series** help emphasize magnitude or coverage * **Scatter series** highlight individual values or sparse distributions This flexibility helps laboratories present several related measures together without forcing them into a single chart style. #### Separate Y Axes Each configured series can be assigned to a different Y axis. * Use the **Left** axis for primary metrics such as totals, counts, or concentration * Use the **Right** axis for secondary metrics such as percentage, rate, or normalized score This is especially useful when the same categorical X axis needs to compare values with very different scales. #### Grouped Output When a **Group** column is configured, the widget creates separate chart traces for each group value within each numeric series. This supports deeper comparisons such as: * treatment versus control within each assay metric * operator comparison across the same production measure * species or site comparison across multiple calculated outputs #### Data Export Users can download the chart data for external reporting or advanced analysis. {% stepper %} {% step %} Open the widget in read-only mode after the chart has rendered {% endstep %} {% step %} Click the **Download** button available with the widget {% endstep %} {% step %} Save the exported data for use in spreadsheet tools, presentations, or statistical software {% endstep %} {% endstepper %} #### Auto-Update Behavior With auto-update enabled, the widget can refresh itself as records change in the source table. This supports live monitoring use cases such as ongoing sample intake, test result accumulation, or production tracking. {% hint style="success" %} Use auto-update for operational dashboards or actively changing sections, and disable it for static review pages where recalculation is not necessary. {% endhint %} ### Best Practices #### Design the Chart Around the Decision * Use bars for straightforward category comparison, lines for trends, areas for emphasis, and scatter points for discrete observations * Reserve the second Y axis for genuinely different units or scales rather than for visual decoration * Keep chart titles specific so readers understand the scientific or operational question being answered #### Keep Series Intentional * Add only the series that support the current analysis question * Choose colors with strong contrast so overlapping series remain distinguishable * Prefer consistent aggregation logic when series are meant to be compared directly #### Control Complexity * Limit the number of visible categories when possible to preserve readability * Use **Query** and **Group** carefully, since combining both with many series can create a crowded legend and dense chart area * Split very complex reporting needs into multiple widgets instead of forcing all measures into one visualization #### Validate the Source Data * Ensure each series uses numeric columns with reliable units and definitions * Confirm foreign key formatting choices on the X axis match how users identify referenced records * Review aggregation choices so the summary reflects the intended laboratory meaning, especially for averages, medians, and maxima --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.labii.com/widgets/section-widgets/report/data-driven-charts/composed-chart-by-category-x.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.