{"componentChunkName":"component---src-pages-data-visualization-chart-anatomy-index-mdx","path":"/data-visualization/chart-anatomy/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Chart anatomy","description":"The elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication."},"relativePagePath":"/data-visualization/chart-anatomy/index.mdx","titleType":"prepend","MdxNode":{"id":"cc12bddd-878e-557a-bee7-58c88140686d","children":[],"parent":"afb3413a-80dd-56a8-8ede-94a5bb77abe0","internal":{"content":"---\ntitle: Chart anatomy\ndescription: The elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication.\n---\n\n\n\nThe elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nRectangular charts\nCircular charts\n\n\n\n## Rectangular charts\n\nMost data visualizations are rectangular charts, with two dimensions represented on a vertical and a horizontal axis. Rectangular charts are typically constructed with a set of common elements including a legend, axis titles, and navigation tools like a zoom bar and tooltip.\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n#### Chart title\n\nThe title of a visualization should be concise and descriptive and should reflect the insight the data reveals.\n\n#### Legend\n\nMany charts will use different visual properties such as colors, textures, and shapes to represent different categories or dimensions of data. A legend tells you what these associations mean and helps you to determine the chart's meaning. [Read more on legend usage.](../data-visualization/legends)\n\n#### Axes\n\nThe X-axis is horizontal and the Y-axis is vertical. Axes should be accessible against their background with a 3:1 contrast ratio. [Read more on axes usage.](../data-visualization/axis-and-labels)\n\n#### Tooltip\n\nA tooltip is a message that appears when a cursor is positioned over an element, such as a data point, icon button, or truncated text. By default, tooltips show on hover to reveal more detailed information or context for specific chart elements. A tooltip should repeat the corresponding values of the data point on both axes and any other relevant details.\n\n#### Graph frame\n\nThe graph frame is the area where data will be visualized with graphics or numbers. Gridlines help a viewer estimate the values of a data point but are not required. Use gridlines sparingly, as too much visual noise makes the graph frame busy and negatively impacts the user's ability to interpret the data.\n\n## Circular charts\n\nCircular charts are primarily pie and donut charts. Other circular layout charts include radar and solar charts.\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n#### Label\n\nA label offers the percentage value of the whole for an individual category.\n\n#### Big number or KPI\n\nA key performance indicator (KPI) consists of a number with a single word description. Examples include “15,250 browsers”, “\\$1.3M revenue”, or “Total 450”. A big number inside the donut chart may be used to display a total sum or the individual count of a slice upon interaction. This element can also be used independently on a dashboard (though please note this component is still a WIP and not available outside the donut chart).\n","type":"Mdx","contentDigest":"0449ac91927df1b1fd3b8231b6b3b823","counter":1421,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Chart anatomy","description":"The elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication."},"exports":{},"rawBody":"---\ntitle: Chart anatomy\ndescription: The elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication.\n---\n\n\n\nThe elements constructing each chart are designed to work in harmony. Each piece plays an important role in data communication.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nRectangular charts\nCircular charts\n\n\n\n## Rectangular charts\n\nMost data visualizations are rectangular charts, with two dimensions represented on a vertical and a horizontal axis. Rectangular charts are typically constructed with a set of common elements including a legend, axis titles, and navigation tools like a zoom bar and tooltip.\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n#### Chart title\n\nThe title of a visualization should be concise and descriptive and should reflect the insight the data reveals.\n\n#### Legend\n\nMany charts will use different visual properties such as colors, textures, and shapes to represent different categories or dimensions of data. A legend tells you what these associations mean and helps you to determine the chart's meaning. [Read more on legend usage.](../data-visualization/legends)\n\n#### Axes\n\nThe X-axis is horizontal and the Y-axis is vertical. Axes should be accessible against their background with a 3:1 contrast ratio. [Read more on axes usage.](../data-visualization/axis-and-labels)\n\n#### Tooltip\n\nA tooltip is a message that appears when a cursor is positioned over an element, such as a data point, icon button, or truncated text. By default, tooltips show on hover to reveal more detailed information or context for specific chart elements. A tooltip should repeat the corresponding values of the data point on both axes and any other relevant details.\n\n#### Graph frame\n\nThe graph frame is the area where data will be visualized with graphics or numbers. Gridlines help a viewer estimate the values of a data point but are not required. Use gridlines sparingly, as too much visual noise makes the graph frame busy and negatively impacts the user's ability to interpret the data.\n\n## Circular charts\n\nCircular charts are primarily pie and donut charts. Other circular layout charts include radar and solar charts.\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n#### Label\n\nA label offers the percentage value of the whole for an individual category.\n\n#### Big number or KPI\n\nA key performance indicator (KPI) consists of a number with a single word description. Examples include “15,250 browsers”, “\\$1.3M revenue”, or “Total 450”. A big number inside the donut chart may be used to display a total sum or the individual count of a slice upon interaction. This element can also be used independently on a dashboard (though please note this component is still a WIP and not available outside the donut chart).\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/data-visualization/chart-anatomy/index.mdx"}}}}