--- title: Chart Types slug: chart-types docTags: createdAt: 2025-08-11T11:12:45.000Z --- This topic contains chart type examples. ## Bar Charts Use bar charts to show comparisons between different categories of data. The bars can display either vertically or horizontally. Vertical Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/OamEjS9Zrk-Aa6VdQyLbQ_vertical-bar-example.png" size="48" width="1018" height="465" darkWidth="1018" darkHeight="465" position="center" showCaption="false"} Grouped Vertical Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/7mHbDqU36QH7NCebBKonU_grouped-vertical-bar.png" size="62" width="1014" height="462" darkWidth="1014" darkHeight="462" position="center" showCaption="false"} Stacked Vertical Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/jZ8Z7DyObWfwfo2PCQsHZ_stacked-vertical-bar.png" size="50" width="1387" height="453" darkWidth="1387" darkHeight="453" position="center" showCaption="false"} 100% Vertical Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/IAJMwniBuuHpyNoh2D8wh_100-percent-vertical-bar.png" size="56" width="1387" height="459" darkWidth="1387" darkHeight="459" position="center" showCaption="false"} Horizontal Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/pQO4NTNCkeaNFdYwQzZkD_horizontal-bar.png" size="64" width="1022" height="460" darkWidth="1022" darkHeight="460" position="center" showCaption="false"} Grouped Horizontal Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/QTTEG_c0zOzA9PUwfcC7S_grouped-horizontal-bar.png" size="64" width="1374" height="447" darkWidth="1374" darkHeight="447" position="center" showCaption="false"} Stacked Horizontal Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/1JQVxHtZZBcXu9i9gPYm4_stacked-horizontal-bar.png" size="58" width="1385" height="452" darkWidth="1385" darkHeight="452" position="center" showCaption="false"} 100% Horizontal Bar ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/D1Rt-8mFHoJkDIT64IkbJ_100-percent-horizontal-bar.png" size="56" width="1378" height="458" darkWidth="1378" darkHeight="458" position="center" showCaption="false"} ## Line Charts Use line charts when you want to represent continuous data in a chart. Line charts work well with time data, but can also be used for other types of continuous data such as levels or distances. Line ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/0_ZBUr9rZ_eR5xLcqkULn_line-chart.png" size="58" width="1390" height="464" darkWidth="1390" darkHeight="464" position="center" showCaption="false"} Multi-Series Line ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/i01CL5b4eTjSKmb-bBaV0_multi-series-line.png" size="62" width="1380" height="461" darkWidth="1380" darkHeight="461" position="center" showCaption="false"} Radar Charts Use radar charts to display multivariate data in a two-dimensional format. The variables (3 or more) are typically represented on axes starting from the same point. ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/xlpzJ5PQvR1GXQUg_MYtL_radar-chart.png" size="58" width="1383" height="393" darkWidth="1383" darkHeight="393" position="center" showCaption="false"} ## Sankey Diagram Use Sankey diagrams to visualize flow and relationships between different stages or categories. The width of the flow paths represents the quantity or value being measured, making it ideal for showing data flow, process flows, or hierarchical relationships. ## Area Charts Area charts are similar to line charts. Use area charts to demonstrate trends over time. Area ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/fWNI0rFbWQlmMNZZY2BVV_area-chart.png" size="52" width="1374" height="459" darkWidth="1374" darkHeight="459" position="center" showCaption="false"} Stacked Area ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/q7Ygw3OhkGEguZDtVgTMz_stacked-area.png" size="44" width="1398" height="458" darkWidth="1398" darkHeight="458" position="center" showCaption="false"} 100% Area ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/eoK4bddQymy86TX1_H6LE_100-percent-area.png" size="60" width="1378" height="450" darkWidth="1378" darkHeight="450" position="center" showCaption="false"} ## Pie Charts Use a pie chart when you want to display the composition of something. ### Pie ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/Af2bkqyifzoyEMhwDJp_H_pie-chart.png" size="42" width="1064" height="440" darkWidth="1064" darkHeight="440" position="center" showCaption="false"} ### Donut ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/YqSBCOmUujUqImvzrs1ge_donut-chart.png" size="40" width="1047" height="437" darkWidth="1047" darkHeight="437" position="center" showCaption="false"} ### Pie Grid ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/Th4_gWJbIvJrmEd8-hkkl_pie-grid.png" size="48" width="1378" height="444" darkWidth="1378" darkHeight="444" position="center" showCaption="false"} :::hint{type="info"} **Pie grid — preview and download: **The on-screen chart may **round **percentages for display. **Downloaded **or \*\*exported **output may show**more decimal precision \*\*or unrounded values. You can see small differences in percentages between preview and file even when both use the same underlying query. ::: ### Advanced Pie ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/HK33nGJfVpCoOvMgBNN2y_advanced-pie.png" size="38" width="1092" height="440" darkWidth="1092" darkHeight="440" position="center" showCaption="false"} ## Pie and Advanced Pie Tile Size Pie and Advanced Pie charts scale and show labels at supported dashboard tile sizes. The same sizes apply in the report editor and in scheduled report output. | Tile Size | What to Expect | | ------------- | -------------------------------------------------------------------------------- | | 1x1 | Not supported. | | 2x2 | Pie charts can display. An Advanced Pie chart can still cut off the Total label. | | 3x3 or larger | Use this size for Advanced Pie so the Total value and label remain visible. | :::hint{type="info"} Resize the dashboard card after you add the chart. For resize steps, see [Dashboard Card Operations](docId\:jQj34bu45BXQE6iRDlysR). ::: ## Number Card ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/xfLCpu8uBHjEw0LFueBUu_number-card.png" size="56" width="1374" height="440" darkWidth="1374" darkHeight="440" position="center" showCaption="false"} ## Heat Map Use heat maps to visualize data density and patterns across two dimensions. Color intensity represents the magnitude of values, making it easy to identify trends and outliers. ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/xtOkqGm9egTgfUFHSsGGy_heat-map.png" size="56" width="728" height="415" darkWidth="728" darkHeight="415" position="center" showCaption="false"} ## Gauge Charts Linear Gauge ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/Chdqt4NlwLpyPMugFUUqB_linear-gauge.png" size="34" width="982" height="392" darkWidth="982" darkHeight="392" position="center" showCaption="false"} Gauge ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/SG4VBrTBy7tTqYl8tyk06_gauge.png" size="50" width="977" height="389" darkWidth="977" darkHeight="389" position="center" showCaption="false"} Percentage Gauge Chart - In a case management application, cases are categorized as either open or closed. Gauge charts serve as an effective tool for visualizing the percentage of closed cases in a clear and concise manner. ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/qt3qPB_1xPM_076CFcNG0_percentage-gauge-case.png" size="40" width="882" height="600" darkWidth="882" darkHeight="600" position="center" showCaption="false"} To configure the chart, follow these steps: 1. Navigate to Case Management: 1. Click **Add Chart** to begin the configuration process. 2. Click Percentage Gauge Chart in **CHART TYPES**. ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/jAWNdDZESJkDAU04b0wCH_chart-types.png" size="62" width="1760" height="920" darkWidth="1760" darkHeight="920" position="center" showCaption="false"} 2. **QUERY** section: 1. Select a measure and a dimension by clicking the **plus icon**. 2. Add the selected measure and dimension to the **EDIT QUERY** section. 3. **COLORS** section: You can select a color scheme for the chart. 4. **OPTIONS** section: - **Item Name**: Enter the name of the chart. - **Target Threshold**: Specify the desired target threshold. - **Target Label:** The default label is "Goal," but you can customize it as needed. - **Show Label**: Enable this option to add a label to the chart. - **Header Options**: - Toggle On the **Show header** option. Based on the configured values, the chart will display the status as Low, Medium, or High. - To add a custom header label, click **Add Header Label**. - **Card Options**: - Toggle On the **Card Option** to include a card display. - Optionally, add a custom card label. ## Bubble Chart Use bubble charts to display three dimensions of data: x-axis, y-axis, and bubble size. This chart type is useful for comparing relationships between multiple variables, where the bubble size represents an additional quantitative dimension. ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/V9IqDbAGZTja_Lu281xp3_bubble-chart.png" size="100" position="center" showCaption="false"} ## Report Widgets ::Image[]{src="https://app.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/SQwq7QrQLSTbhpSwq_NTB_chart-widget.png" size="100" position="center" showCaption="false"}