Cloudscape Docs MCP Server

--- title: "Cartesian charts - Cloudscape Design System" source: "https://cloudscape.design/components/cartesian-chart/?tabId=usage" created: 2025-10-01 description: "Cartesian charts display information along horizontal and vertical axes to clearly show patterns, comparisons, and relationships between values. It includes line, bar, area, scatter, and mixed charts." --- ## Cartesian charts Published: September 10, 2025 | Last updated: September 8, 2025 [Get design library](https://cloudscape.design/get-started/for-designers/design-resources) [Browse code](https://github.com/cloudscape-design/chart-components/tree/main/src/cartesian-chart "Browse code (opens new tab)") [View in demo](https://cloudscape.design/examples/react/dashboard.html "View in demo (opens new tab)") These new chart components are built on top of Highcharts, which is a [commercial third-party library](https://www.highcharts.com/). Refer to the [licensing section on Charts](https://cloudscape.design/components/charts/#licensing) for more details. ## General guidelines ### Do #### All cartesian charts - Skip axis labels for time series in regular intervals to avoid an overwhelming number of labels. - Try to limit the number of items in a metric breakdown to seven to help conserve space. Prioritize content that adds value to the user. #### Bar chart - Use for categorical data only. #### Error bars - Show the error type in the footer to reduce visual noise, unless you are combining multiple error bar types, then show these near the series and in the footer. See an example for [mixed line and bar with error bars](https://cloudscape.design/components/cartesian-chart/?tabId=playground&example=bar-and-line-chart-with-error-bars). - If error values are identical for all series, move this information to the tooltip footer to reduce visual noise. - Ensure sufficient color contrast for error bars, especially as they often overlap with series lines, bars, and backgrounds. ### Don't #### All cartesian charts - Don't show time units on the Y axis. - Don’t use a filter when the visualization has only one metric or data series. - Don’t use a legend when there is only one metric on the chart and the data shown is explained in the chart title. - Don't truncate a data series name if the entire string is necessary to identify the data presented. - In details of chart series, don't add links to both metric key and metric value. Instead, pick one or the other. #### Area chart - Don't use area charts to visualize only one data series, use line charts instead. - Don't use area charts when showing negative data. Use line or bar charts instead. - Don't use area charts for non-stacked data. Instead, use line series. #### Mixed line and bar chart - Don't use a mixed line and bar chart when all data series are the same type of metric. For example, average network load for two EC2 instances. #### Error bars - Don't use error bars on scatter, or grouped bar charts. ## Features ### Chart types Cartesian charts display information along horizontal and vertical axes to clearly show patterns, comparisons, and relationships between values. It includes line, bar, area, scatter, and mixed charts. - #### Line chart Visualizes one or many series of data, with an emphasis on how the data changes over time. For example, A line chart showing the monthly trend of website traffic over the past year. - #### Bar chart Visualizes one or many series of data, with an emphasis on the total amount of each data point. For example, A bar chart comparing the revenue generated by different product categories in Q1. - #### Area chart The area chart visualizes two or more series of data. Through stacked data series, it emphasizes the part-to-whole relationship of data over a period of time. For example, An area chart showing the cumulative number of active users over time, segmented by user tier (Free, Pro, Enterprise). - #### Scatter chart Visualizes the relationships between data in two dimensions. For example, A scatter chart illustrating the relationship between height and weight of athletes. - #### Mixed charts Visualizes different, but related, series of data on a single chart. For example, A mixed chart with bars showing monthly sales and a line representing the monthly profit margin. - #### Data area The data area is where data is visualized. - The data area is delineated by the X and Y axes, which provide context to the data series represented. - The data area can contain a single data series, multiple data series, and thresholds. - If there are gaps in the data, then these should show as gaps in the data series. A mixed cartesian chart shows one data series as bars and one or more data series as lines. This provides the ability to visualize related data series that share axis labels and helps users differentiate the data thanks to the distinct visual representation styles. For example: - A mixed bar and line chart that shows total data transferred using bars (to emphasize the measure of volume) and the average amount transferred as a line (to emphasize the measure of change over time). - A mixed scatter and line chart that shows a computed trend line for a dataset. - #### Axis labels Axis labels provide context for the visualized data in the data area. Axis labels are placed in two locations: - **Y axis labels:** Shown to the left of the Y axis and often used for sequential values. - **X axis labels:** Shown below the X axis and often used for time intervals. There are two types of axis labels: - **Numerical:** Values are quantitative and continual. - For example: *0, 10K, 20K, 30K* - **Categorical:** Grouping of data that does not have a typical order. - For example: different types of resource instances. - #### Axis titles Axis titles provide additional explanation for axis labels. For example, for axis labels that contain temperature intervals, an axis title could be the following: *Temperature in Celsius*. If a set of axis labels is self-explanatory, such as a date interval, then the axis title isn’t needed. The axis title placement customisation is supported for the axis which is rendered as vertical. Usually, it is the Y-axis, but in inverted charts it can also be the X-axis. - #### Zero baseline Using a zero baseline adds greater visual emphasis in the data visualization. For example, a visualization showing revenue should have the zero baseline emphasized because it delineates the threshold between positive and negative revenue. In most cases, the zero baseline should be emphasized. However, there are two exceptions: - When zero is not a meaningful threshold. - For example: F° temperature scale - When relative changes are more meaningful to emphasize than absolute. - For example: a stock chart - #### Legend The legend displays more information about the data that appears in the data area. - **Legend title:** The legend title provides additional context to the legend. It’s not required when legend items are self-explanatory or when the chart title provides sufficient context. - **Legend items:** - Each data series in the data area also has a legend item, which shows the style (color, design) of the element and the data series name. - **Show and hide:** Users can show or hide a series by toggling a legend item. The legend is optional if the chart includes only one metric and the chart title or other metadata explains the data shown. - #### Marker A marker is the symbol that shows each data point on the chart. You can customize markers by: - **Shape**: Choose from `'circle'`, `'square'`, `'diamond'`, `'triangle'`, or `'triangle-down'`. - **Color**: Use different colors to show different data series. - #### Details popover Provides additional information on specific data points using a popover. Information about a segment such as the name and value are displayed as key value pairs, use [links](https://cloudscape.aws.dev/components/link/) or text. More key-value pairs can also be displayed to better understand the breakdown of a segment's data. There are two main ways to interact with the details popover: - **On hover:** When a user hovers on the data area, the popover shows the name and value for each data point. - **On select:** If a user selects the data area, the popover fixes in position. This works well for assistive devices and devices without hover states. **Metric breakdown and drill down** When there is additional information that makes up a metric, these can be displayed as key-value pairs that are nested under a metric that is made up of related child metrics. This can be either be listed as key-value pairs or placed in an expandable section to conserve space. For example: - A nested grouping of related child services under a parent key of *other services*. - A list of accounts that contribute to a combined metric value of its parent. With links, you can provide access to a break down of more details on a new page. - **Link in the Key:** Add an external link, which opens details in a new page. - For example, linking to a specific account to view customer details. - **Link in the Value:** Add an external link to a value to provide a drill down into the value. - For example, linking to a full page table to view a filtered list of accounts that are in an error state. **Sizes** The details popover supports all popover sizes. Use the appropriate popover size based on the amount of information you want to display, such as the length of associated labels. **Series details** Below each series is a space to display supporting details for the series. For example, showing the error metrics for standard deviation. See error bars below for more information. **Popover footer** To enable additional actions and drill down on the selected metric you can use the footer area of the popover. Use the footer to add: - **Actions:** Up to two buttons. When you have more than two buttons group these in a button dropdown to conserve space. - **Drill down:** Drill down functionality such as filters and text. See [chart metric drill down](https://cloudscape.design/patterns/general/data-vis/chart-metric-drill-down/) for further information. **Popover position** You can place the popover in middle of the data area or outside of the data area. - #### Thresholds A threshold is a dashed line shown on a chart’s data area that helps define the metrics immediately preceding or following it. A threshold is a fixed number and does not change across the chart. It can be plotted against the X or Y axis as needed. For information about customizing the threshold color, see [threshold color](https://cloudscape.design/foundation/visual-foundation/data-vis-colors/#threshold-colors). - #### Error bars Error bars are visual markers used to represent uncertainty or variability in data. They help users interpret how precise a data point is by showing a range, such as standard deviation, or error range directly on line, bar, and mixed charts. **Error metrics** Display each error metric within the popover: - Metric errors are different for each series: Show the error type and error metric below the series for each error. - For example: [Error range: 100 - 200](https://cloudscape.design/components/cartesian-chart/?tabId=playground&example=bar-chart-with-error-bars). - All error metrics are the same for each series: Show the Error type and error metrics in the footer. - For example: [Error range: ±50](https://cloudscape.design/components/cartesian-chart/?tabId=playground&example=bar-and-line-chart-with-error-bars). Use the [error bar series color palette](https://cloudscape.design/foundation/visual-foundation/data-vis-colors/#error-bar-colors) to ensure error bars are clear and consistent across different chart types. - #### Responsive sizing Charts have a default set height. However, the width is dynamic and resizes to fill its container. - #### Built-in filter The chart component has a built-in filter so users can select what data metrics show on the chart. By default, all data metrics in the source data are selected to show on the chart. Use a filter when the source dataset has three or more data metrics. - #### Additional filters To support users’ data exploration needs, you can add more filters in the chart component. For example, A [date picker](https://cloudscape.design/components/date-picker/) so users can filter data based on different periods of time. ### Bar chart - #### Chart orientation Bar chart data can be orientated in two ways: - **Vertically**: Displays bars vertically. Useful for showing time series data in the X axis. - For example, a chart showing revenue over time. - **Horizontally**: Displays bars horizontally. Useful for grouped bar charts with many categories, since more categories can be added on the Y axis without impacting label legibility. - For example, a chart showing web traffic to several URLs, categorized by traffic source (desktop, mobile, and tablet). - #### Categorized data When showing multiple data series on a bar chart, the data can be shown in two different ways: - **Grouped:** Displays each data point as an individual bar, grouped together by category. Useful for showing categorized data over time. - For example, total bytes transferred from different data centers. - **Stacked:** Displays each data point as part of a single bar representing the total category. Useful for showing categorized data which is cumulative or part of a larger whole. - For example, a chart showing percentage of total of web traffic by source (such as desktop, mobile, and tablet) ### States - #### Loading The state of fetching data prior to the visualization being displayed. Show loading state text when the component is in this state. - #### Error The state of the component when it fails to fetch data. Display error state text and provide a recovery action as a recovery mechanism. - #### No match The state of visualization when there is no data to display after a user applied filters. Display no match state text and provide an action button to revert to the default state of the visualization. - #### Empty The state of the component when there is no data to display. It could occur when the source data set has no metrics*.*Display empty state text when the component is in this state. ## Writing guidelines - Use sentence case, but continue to capitalize proper nouns and brand names correctly in context. - Use end punctuation, except in [headers](https://cloudscape.design/components/header/?tabId=usage) and [buttons](https://cloudscape.design/components/button/?tabId=usage). Don’t use exclamation points. - Use present-tense verbs and active voice. - Don't use *please*, *thank you*, ellipsis (*...*), ampersand (*&*), *e.g.*, *i.e.*, or *etc.* in writing. - Avoid directional language. - For example: use *previous* not *above*, use *following* not *below*. - Use device-independent language. - For example: use *choose* or *select* not *click*. ### Component-specific guidelines #### Chart title - Use nouns to describe what the visualization contains. - For example: *Revenue* or *CPU utilization* #### Axis titles - optional - Axis titles should be concise, typically from 1 to 3 words. - If relevant, include the axis label’s unit in the axis title. - For example: *Billed (USD)* #### Axis labels - When writing date and times, follow the guidelines for [timestamps](https://cloudscape.design/patterns/general/timestamps/). - Use common abbreviations to reduce visual complexity and make the visualization easier to scan. - For example: *Sun* instead of *Sunday*, and *Jan* instead of *January* - Include relevant typographic symbols with label numbers, such as currency denomination or degree symbol for temperature (when appropriate). - For example: *$10* or *F°* #### Legend title - optional - Use nouns to describe what items the legend contains. - For example: *Instance types* or *Browsers* #### Loading state - Use this text: *Loading chart* - Follow the guidelines for [loading states](https://cloudscape.design/patterns/general/loading-and-refreshing/). #### Error state - Error message - Use this text: *The data couldn't be fetched. Try again later.* - Recovery action - Use this text: *Retry* #### Empty state - No data available - Use this text: *There is no data available.* - Zero results state - For the message, use this text: *There is no data available.* - For the button, use this text: *Reset filters* ## Accessibility guidelines - Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component. - Make sure to define ARIA labels aligned with the language context of your application. - Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component. - Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense. ### Component-specific guidelines - For the default filter, follow the guidelines for [multiselect accessibility](https://cloudscape.design/components/multiselect/?example=default&tabId=usage). - Use an accessible color palette for visualizations. Follow the guidelines for [data visualization color](https://cloudscape.design/foundation/visual-foundation/data-vis-colors/#accessibility-guidelines). #### Alternative text - Provide alternative text for the chart. Use `ariaLabel` to give the chart a label that matches its visible title, for example from the container header. - Additionally, provide an alternative chart description through the `ariaDescription` property. Use the format: *\[Chart type\] showing the \[data displayed\].* If applicable, also include the timeframe for the data displayed. - For example: *Line chart showing the number of critical resource errors in the last one month.*