{"componentChunkName":"component---src-pages-data-visualization-legends-index-mdx","path":"/data-visualization/legends/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"relativePagePath":"/data-visualization/legends/index.mdx","titleType":"prepend","MdxNode":{"id":"029fa9fa-ffdf-525d-8f26-07acd7647add","children":[],"parent":"67630fb4-aa65-571c-a9d5-fe2fae51b808","internal":{"content":"---\ntitle: Legends\ndescription: Legends summarize the distinguishing visual properties such as colors or texture used in the visualization\n---\n\n<PageDescription>\n\nLegends summarize the distinguishing visual properties such as colors or texture used in the visualization. A legend or key helps the user build the necessary associations to make sense of the chart.\n\n</PageDescription>\n\n<InlineNotification>\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</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Usage</AnchorLink>\n<AnchorLink>Position</AnchorLink>\n<AnchorLink>Interactions</AnchorLink>\n\n</AnchorLinks>\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.** Legends rely on visual association, which can make a chart more difficult to understand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only use a legend if you can't safely assume there will be enough space to apply labels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to titles and axis labels.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-1.png)\n\n<Caption>\n  Remove legends to simplify the chart when only one data category is needed or\n  only one color is used.\n</Caption>\n\n</Column>\n\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-2.png)\n\n<Caption>\n  In-chart labels are ideal for charts with predictable data and ample empty\n  space.\n</Caption>\n\n</Column>\n</Row>\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and values. Texture can be used instead of, or in addition to, color to make your chart accessible for users with visual impairment.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-3.png)\n\n<Caption>\n  Texture can improve accessibility. See the accessibility page for all approved\n  textures.\n</Caption>\n\n</Column>\n</Row>\n\n## Position\n\nThe legends are positioned at the `top` of a chart by default, under the chart's title. Depending on the page’s layout and context, you may choose to position the legends at the `bottom`, `left` or `right` of a chart with respect to the [graph frame](./chart-anatomy).\n\n#### Top (default) and bottom\n\nPosition the legend at the top or bottom of a chart in situations where space is a scarce, such as a dashboard.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-pos-1.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-pos-2.png)\n\n</Column>\n</Row>\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when you would like to provide the maximum context.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-3sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-3.png)\n![Legends bahvior highlight on hover](images/legends-pos-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Left\n\nPosition the legend on the left of the chart when better type alignment is needed. Be sure the surrounding elements of the chart are not too closely clustered.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-4sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-4.png)\n![Legends bahvior highlight on hover](images/legends-pos-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame.\n\n<Row>\n<Column  colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-5sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-5.png)\n![Legends bahvior highlight on hover](images/legends-pos-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other categories in the chart to 30 percent.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-behavior-1-sm.png)\n![Legends bahvior highlight on hover](images/legends-behavior-1.png)\n![Legends bahvior highlight on hover](images/legends-behavior-1.png)\n\n</ArtDirection>\n\n</Column>\n</Row>\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all other categories. The legend gets a checkmark on click, switching to a selected state.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 2](images/legends-behavior-2-sm.png)\n![legends behavior 2](images/legends-behavior-2.png)\n![legends behavior 2](images/legends-behavior-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 3](images/legends-behavior-3-sm.png)\n![legends behavior 3](images/legends-behavior-3.png)\n![legends behavior 3](images/legends-behavior-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\nWhen all categories are selected, checkmarks in legends disappear and the legend resets to its default state.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 4](images/legends-behavior-4-sm.png)\n![legends behavior 4](images/legends-behavior-4.png)\n![legends behavior 4](images/legends-behavior-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless only one category of data is displayed. This design is for mobile displays where offering legends at a glance is less essential. In general, hiding legends reduces the clarity of the visualization and is inaccessible.\n\n<Row>\n<Column  colLg={4} colMd={4} colSm={4}>\n\n![On mobile, hide legends and reveal on tap](images/legends-hidden-1.png)\n\n<Caption>\n  When legends are hidden, a “View legends” button is added so users can surface\n  the legend on tap.\n</Caption>\n\n</Column>\n<Column  colLg={4} colMd={4} colSm={4}>\n\n![Reveal hidden legends in a modal](images/legends-hidden-2.png)\n\n<Caption>\n  When clicking on “View legends”, a modal with a list of legends appears with\n  options to toggle each data category on and off.\n</Caption>\n\n</Column>\n</Row>\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more** expands the legend area to show all legends. A legend should not be taller than 30 percent of the chart's height.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends default to a maximum of two lines. \"View more\" may expand to 30 percent of the chart.](images/legends-overflow-1a.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends default to a maximum of two lines. \"View more\" may expand to 30 percent of the chart.](images/legends-overflow-1b.png)\n\n</Column>\n</Row>\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll vertically.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Overflowing legends have vertical scrolling applied.](images/legends-overflow-2a.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Overflowing legends have vertical scrolling applied.](images/legends-overflow-2b.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"505044a166474b84ea4c9ec735c9bcd0","counter":1431,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"exports":{},"rawBody":"---\ntitle: Legends\ndescription: Legends summarize the distinguishing visual properties such as colors or texture used in the visualization\n---\n\n<PageDescription>\n\nLegends summarize the distinguishing visual properties such as colors or texture used in the visualization. A legend or key helps the user build the necessary associations to make sense of the chart.\n\n</PageDescription>\n\n<InlineNotification>\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</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Usage</AnchorLink>\n<AnchorLink>Position</AnchorLink>\n<AnchorLink>Interactions</AnchorLink>\n\n</AnchorLinks>\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.** Legends rely on visual association, which can make a chart more difficult to understand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only use a legend if you can't safely assume there will be enough space to apply labels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to titles and axis labels.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-1.png)\n\n<Caption>\n  Remove legends to simplify the chart when only one data category is needed or\n  only one color is used.\n</Caption>\n\n</Column>\n\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-2.png)\n\n<Caption>\n  In-chart labels are ideal for charts with predictable data and ample empty\n  space.\n</Caption>\n\n</Column>\n</Row>\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and values. Texture can be used instead of, or in addition to, color to make your chart accessible for users with visual impairment.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-usage-3.png)\n\n<Caption>\n  Texture can improve accessibility. See the accessibility page for all approved\n  textures.\n</Caption>\n\n</Column>\n</Row>\n\n## Position\n\nThe legends are positioned at the `top` of a chart by default, under the chart's title. Depending on the page’s layout and context, you may choose to position the legends at the `bottom`, `left` or `right` of a chart with respect to the [graph frame](./chart-anatomy).\n\n#### Top (default) and bottom\n\nPosition the legend at the top or bottom of a chart in situations where space is a scarce, such as a dashboard.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-pos-1.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends bahvior highlight on hover](images/legends-pos-2.png)\n\n</Column>\n</Row>\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when you would like to provide the maximum context.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-3sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-3.png)\n![Legends bahvior highlight on hover](images/legends-pos-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Left\n\nPosition the legend on the left of the chart when better type alignment is needed. Be sure the surrounding elements of the chart are not too closely clustered.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-4sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-4.png)\n![Legends bahvior highlight on hover](images/legends-pos-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame.\n\n<Row>\n<Column  colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-pos-5sm.png)\n![Legends bahvior highlight on hover](images/legends-pos-5.png)\n![Legends bahvior highlight on hover](images/legends-pos-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other categories in the chart to 30 percent.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n\n<ArtDirection>\n\n![Legends bahvior highlight on hover](images/legends-behavior-1-sm.png)\n![Legends bahvior highlight on hover](images/legends-behavior-1.png)\n![Legends bahvior highlight on hover](images/legends-behavior-1.png)\n\n</ArtDirection>\n\n</Column>\n</Row>\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all other categories. The legend gets a checkmark on click, switching to a selected state.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 2](images/legends-behavior-2-sm.png)\n![legends behavior 2](images/legends-behavior-2.png)\n![legends behavior 2](images/legends-behavior-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 3](images/legends-behavior-3-sm.png)\n![legends behavior 3](images/legends-behavior-3.png)\n![legends behavior 3](images/legends-behavior-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\nWhen all categories are selected, checkmarks in legends disappear and the legend resets to its default state.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![legends behavior 4](images/legends-behavior-4-sm.png)\n![legends behavior 4](images/legends-behavior-4.png)\n![legends behavior 4](images/legends-behavior-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless only one category of data is displayed. This design is for mobile displays where offering legends at a glance is less essential. In general, hiding legends reduces the clarity of the visualization and is inaccessible.\n\n<Row>\n<Column  colLg={4} colMd={4} colSm={4}>\n\n![On mobile, hide legends and reveal on tap](images/legends-hidden-1.png)\n\n<Caption>\n  When legends are hidden, a “View legends” button is added so users can surface\n  the legend on tap.\n</Caption>\n\n</Column>\n<Column  colLg={4} colMd={4} colSm={4}>\n\n![Reveal hidden legends in a modal](images/legends-hidden-2.png)\n\n<Caption>\n  When clicking on “View legends”, a modal with a list of legends appears with\n  options to toggle each data category on and off.\n</Caption>\n\n</Column>\n</Row>\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more** expands the legend area to show all legends. A legend should not be taller than 30 percent of the chart's height.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends default to a maximum of two lines. \"View more\" may expand to 30 percent of the chart.](images/legends-overflow-1a.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Legends default to a maximum of two lines. \"View more\" may expand to 30 percent of the chart.](images/legends-overflow-1b.png)\n\n</Column>\n</Row>\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll vertically.\n\n<Row>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Overflowing legends have vertical scrolling applied.](images/legends-overflow-2a.png)\n\n</Column>\n<Column  colLg={6} colMd={4} colSm={4}>\n\n![Overflowing legends have vertical scrolling applied.](images/legends-overflow-2b.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/data-visualization/legends/index.mdx"}}}}