{"componentChunkName":"component---src-pages-data-visualization-axes-and-labels-index-mdx","path":"/data-visualization/axes-and-labels/","result":{"pageContext":{"frontmatter":{"title":"Axes and labels","description":"Axes and labels provide critical context for the information within a chart."},"relativePagePath":"/data-visualization/axes-and-labels/index.mdx","titleType":"prepend","MdxNode":{"id":"d64f804c-1cbc-5641-83eb-91fec6e42643","children":[],"parent":"65f7aedd-dc42-5b9f-a246-cf97567da941","internal":{"content":"---\ntitle: Axes and labels\ndescription: Axes and labels provide critical context for the information within a chart.\n---\n\n\n\nAxes and labels provide critical context for the information within a chart. Use simple, easy-to-understand descriptors and metrics to label your chart and axes.\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 the carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nStarting at zero\nGap in data\nBreaks in axes\nTime series\n\n\n\n## Starting at zero\n\n**Always start numerical axes at zero for part-to-whole and comparisons charts.** For bar and area charts, a truncated Y-axis can distort the perceived scale of a chart, making a small difference appear more significant than it is.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n**It's acceptable to start line charts and scatter plots at a value higher than zero.** These types of visualizations are less sensitive to distortion because they communicate trends rather than difference in size or quantity. In these cases, cropping the Y-axis helps users better identify the direction of change.\n\n\n\n\n\n\n\n For line charts showing stock market activities, the existence of peaks and\n valleys in trends is more important than the true size of the change.\n\n\n\n
\n\n## Gaps in data\n\nUse the designated texture to denote the range or period when data is not available. Always label both start and end points where data is not available.\n\n\n\n\n\n\n\n
\n\n## Breaks in axes\n\nSometimes it's useful to skip part of the axis to bring data on the extreme ends into view without distortion. When axes contain a break, use a sinusoidal line to replace the straight axis line.\n\nOn the X-axis, the break may be fluid with graph area size, with a minimum width of 16px. On the Y-axis, we recommend fixing the distance break at 16px.\n\n\n\n\n\n\n\n
\n\nIf data is available during an axis break, restyle line segments to use 0.5px stroke and hide circles representing data points.\n\n\n\n\n\n\n\n
\n\nIf data isn't available between break points, denote the data gap with a texture.\n\n\n\n\n\n\n\n
\n\n## Time series\n\n#### Consistent increments\n\nIf any form of axis compression is required, use the provided [axis break](#breaks-in-axes) styling to visually denote the compression.\n\n#### Localization\n\nIn time series, X-axis labels reflect the time increment in the data. When possible, use localized date and time format, or user preference. Otherwise, the chart defaults to the format presented below.\n\n#### Landmark labels\n\nWhenever data cross into a new time cycle, such as a new day, month, or year, semibold the label to emphasize the transition.\n\n\n\n\n\n\nExample of a time series plotted at 15 seconds intervals\n\n\n
\n","type":"Mdx","contentDigest":"42b1d4370dd95fffc78ffb96d7660abe","counter":1608,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Axes and labels","description":"Axes and labels provide critical context for the information within a chart."},"exports":{},"rawBody":"---\ntitle: Axes and labels\ndescription: Axes and labels provide critical context for the information within a chart.\n---\n\n\n\nAxes and labels provide critical context for the information within a chart. Use simple, easy-to-understand descriptors and metrics to label your chart and axes.\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 the carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nStarting at zero\nGap in data\nBreaks in axes\nTime series\n\n\n\n## Starting at zero\n\n**Always start numerical axes at zero for part-to-whole and comparisons charts.** For bar and area charts, a truncated Y-axis can distort the perceived scale of a chart, making a small difference appear more significant than it is.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n**It's acceptable to start line charts and scatter plots at a value higher than zero.** These types of visualizations are less sensitive to distortion because they communicate trends rather than difference in size or quantity. In these cases, cropping the Y-axis helps users better identify the direction of change.\n\n\n\n\n\n\n\n For line charts showing stock market activities, the existence of peaks and\n valleys in trends is more important than the true size of the change.\n\n\n\n
\n\n## Gaps in data\n\nUse the designated texture to denote the range or period when data is not available. Always label both start and end points where data is not available.\n\n\n\n\n\n\n\n
\n\n## Breaks in axes\n\nSometimes it's useful to skip part of the axis to bring data on the extreme ends into view without distortion. When axes contain a break, use a sinusoidal line to replace the straight axis line.\n\nOn the X-axis, the break may be fluid with graph area size, with a minimum width of 16px. On the Y-axis, we recommend fixing the distance break at 16px.\n\n\n\n\n\n\n\n
\n\nIf data is available during an axis break, restyle line segments to use 0.5px stroke and hide circles representing data points.\n\n\n\n\n\n\n\n
\n\nIf data isn't available between break points, denote the data gap with a texture.\n\n\n\n\n\n\n\n
\n\n## Time series\n\n#### Consistent increments\n\nIf any form of axis compression is required, use the provided [axis break](#breaks-in-axes) styling to visually denote the compression.\n\n#### Localization\n\nIn time series, X-axis labels reflect the time increment in the data. When possible, use localized date and time format, or user preference. Otherwise, the chart defaults to the format presented below.\n\n#### Landmark labels\n\nWhenever data cross into a new time cycle, such as a new day, month, or year, semibold the label to emphasize the transition.\n\n\n\n\n\n\nExample of a time series plotted at 15 seconds intervals\n\n\n
\n","fileAbsolutePath":"/zeit/3f757860/src/pages/data-visualization/axes-and-labels/index.mdx"}}}}