@spectrum-charts/mcp 0.1.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/docs-data.json +4 -4
  2. package/dist/index.js +0 -0
  3. package/package.json +1 -1
package/dist/docs-data.json CHANGED
@@ -250,7 +250,7 @@
250
250
  {
251
251
  "title": "Props",
252
252
  "level": 2,
253
- "content": "## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>position*</td>\n <td>'left' | 'bottom' | 'top' | 'right'</td>\n <td>–</td>\n <td>Sets where the axis will be displayed.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>baseline</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds a baseline rule for this axis.</td>\n </tr>\n <tr>\n <td>baselineOffset</td>\n <td>number</td>\n <td>0</td>\n <td>Adds an offset to the baseline. If baseline is false then this prop is ignored. If baseline is drawn relative to a categorical axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>children</td>\n <td>AxisAnnotation | ReferenceLine</td>\n <td>–</td>\n <td>Child components that add supplemental content to the axis</td>\n </tr>\n <tr>\n <td>granularity</td>\n <td>'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'</td>\n <td>'day'</td>\n <td>Sets the granularity of the primary axis labels for time axis. If this axis is not for a time axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>grid</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays gridlines at each tick location.</td>\n </tr>\n <tr>\n <td>hideDefaultLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>Hides the axis labels. If labels have been explicitly added using the `labels` prop, these will still be visible.</td>\n </tr>\n <tr>\n <td>labelAlign</td>\n <td>'start' | 'center' | 'end'</td>\n <td>'center'</td>\n <td>Sets the alignment of axis labels. `center` will set the align to `center` for horizontal axes and the baseline to `middle` for vertical axes. `start` will set the align to `left` for horizontal axes and the baseline to `top` for vertical axes. `end` will set the align to `right` for horizontal axes and the baseline to `bottom` for vertical axes.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>FontWeight</td>\n <td>'normal'</td>\n <td>Sets the font weight of axis labels.</td>\n </tr>\n <tr>\n <td>labelFormat</td>\n <td>'duration' | 'linear' | 'percentage' | 'time'</td>\n <td>–</td>\n <td>Sets the format of the axis labels. `duration` will display seconds value in a m:ss format if less than 3,600 and in a H:mm:ss format if >= 3,600 (ex: 3 = 0:03, 36 = 0:36, 366 = 6:06, 3661 = 1:01:01).</td>\n </tr>\n <tr>\n <td>labelLimit</td>\n <td>number</td>\n <td>undefined (180 Vega default)</td>\n <td>Sets the maximum allowed length, in pixels, of axis tick labels. Labels that exceed this limit will be truncated. If not specified, Vega uses its default of 180 pixels.</td>\n </tr>\n <tr>\n <td>labelOrientation</td>\n <td>'horizontal' | 'vertical'</td>\n <td>'horizontal'</td>\n <td>Sets the orientation of the label. If using `vertical`, subLabels will not be displayed.</td>\n </tr>\n <tr>\n <td>labels</td>\n <td>(\\{value: string | number, label?: string, align?: LabelAlign, fontWeight?: FontWeight} | number | string)[]</td>\n <td>–</td>\n <td>Explicitly sets the axis labels (controlled). Providing a Label object allows for more control over the label display. Either an object or the domain value (string | number) can be provided as entries to the array. Just providing the domain values makes it possible to simply control the labels that should be added without altering the display value or styling of the label. Providing an object as the label entry opens up control of the alignment, font-weight and display value of the label. `fontWeight` and `align` will default to the axis font weight and label alignment. `label` is equal to `value` by default. The following are semantically equivalent: [\\{value: 2, label: \"2\", align: 'center', fontWeight: \"normal\"}] = [\\{value: 2}] = [2]</td>\n </tr>\n <tr>\n <td>tickCountLimit</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the upper limit on the number of axis ticks. Base tick, typically 0, is not included in the count. e.g. 0, 1, 2, 3 is considered 3 ticks. Note: The final tick count may vary based on Vega's automatic calculations to create visually pleasing values.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>'currency' | 'shortCurrency' | 'shortNumber' | 'standardNumber' | string</td>\n <td>'shortNumber'</td>\n <td>Sets the format for numeric axis labels. This format must be a <a href=\"https://d3js.org/d3-format#locale_format\" target=\"_blank\">d3-format specifier</a> (Example: '$.2f' = $5,432.10). <a href=\"https://github.com/adobe/react-spectrum-charts/wiki/Chart-API#locale\" target=\"_blank\">Number locale</a> will be applied to the number format. The following presets are also provided: currency ($2.50), shortCurrency ($20M), shortNumber (3B), standardNumber (2,500). Only valid if labelFormat is linear or undefined.</td>\n </tr>\n <tr>\n <td>range</td>\n <td>[number, number]</td>\n <td>–</td>\n <td>The minimum and maximum values for the axis, for example: `[-10, 10]`. Note: This prop is only supported for axes with `linear` or `time` scale types.</td>\n </tr>\n <tr>\n <td>subLabels</td>\n <td>\\{value: string | number, subLabel: string, align?: LabelAlign, fontWeight?: FontWeight}[]</td>\n <td>–</td>\n <td>Adds sublabels below the axis labels. If the provided value is not within the axis domain, it won't be added. Note that if `labelOrientation` is set to `vertical`, `subLabels` will not be displayed.</td>\n </tr>\n <tr>\n <td>ticks</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays ticks at each label location.</td>\n </tr>\n <tr>\n <td>tickMinStep</td>\n <td>number</td>\n <td>–</td>\n <td>The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of 1 indicates that ticks should not be less than 1 unit apart. Note: This prop is only supported for linear axes.</td>\n </tr>\n <tr>\n <td>title</td>\n <td>string | string[]</td>\n <td>–</td>\n <td>Sets the axis title. If an array of strings is provided, each string will render on a new line.</td>\n </tr>\n <tr>\n <td>truncateLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>If the text is wider than the bandwidth that is labels, it will be truncated so that it stays within that bandwidth. This is only valid for categorical axes (ex. dimension axis on a bar chart). This setting is also ignored if the `labels` prop is used to control the axis labels.</td>\n </tr>\n <tr>\n <td>currencyLocale</td>\n <td>string</td>\n <td>–</td>\n <td>Set the locale for currency formatting (affects symbol position and spacing). ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency locale formatting from the chart locale. **Important:** This prop requires 'currencyCode' prop to take effect. Example: 'en-US' ($100) vs 'de-DE' (100 $)</td>\n </tr>\n <tr>\n <td>currencyCode</td>\n <td>string</td>\n <td>–</td>\n <td>Override the currency symbol from the chart locale with a specific currency code. ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency symbol from the chart locale. **Important:** This prop requires 'currencyLocale' prop to take effect.</td>\n </tr>\n </tbody>\n</table>"
253
+ "content": "## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>position*</td>\n <td>'left' | 'bottom' | 'top' | 'right'</td>\n <td>–</td>\n <td>Sets where the axis will be displayed.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>baseline</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds a baseline rule for this axis.</td>\n </tr>\n <tr>\n <td>baselineOffset</td>\n <td>number</td>\n <td>0</td>\n <td>Adds an offset to the baseline. If baseline is false then this prop is ignored. If baseline is drawn relative to a categorical axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>children</td>\n <td>AxisAnnotation | ReferenceLine</td>\n <td>–</td>\n <td>Child components that add supplemental content to the axis</td>\n </tr>\n <tr>\n <td>granularity</td>\n <td>'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'</td>\n <td>'day'</td>\n <td>Sets the granularity of the primary axis labels for time axis. If this axis is not for a time axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>grid</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays gridlines at each tick location.</td>\n </tr>\n <tr>\n <td>hideDefaultLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>Hides the axis labels. If labels have been explicitly added using the `labels` prop, these will still be visible.</td>\n </tr>\n <tr>\n <td>labelAlign</td>\n <td>'start' | 'center' | 'end'</td>\n <td>'center'</td>\n <td>Sets the alignment of axis labels. `center` will set the align to `center` for horizontal axes and the baseline to `middle` for vertical axes. `start` will set the align to `left` for horizontal axes and the baseline to `top` for vertical axes. `end` will set the align to `right` for horizontal axes and the baseline to `bottom` for vertical axes.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>FontWeight</td>\n <td>'normal'</td>\n <td>Sets the font weight of axis labels.</td>\n </tr>\n <tr>\n <td>labelFormat</td>\n <td>'duration' | 'linear' | 'percentage' | 'time'</td>\n <td>–</td>\n <td>Sets the format of the axis labels. `duration` will display seconds value in a m:ss format if less than 3,600 and in a H:mm:ss format if >= 3,600 (ex: 3 = 0:03, 36 = 0:36, 366 = 6:06, 3661 = 1:01:01).</td>\n </tr>\n <tr>\n <td>labelLimit</td>\n <td>number</td>\n <td>undefined (180 Vega default)</td>\n <td>Sets the maximum allowed length, in pixels, of axis tick labels. Labels that exceed this limit will be truncated. If not specified, Vega uses its default of 180 pixels.</td>\n </tr>\n <tr>\n <td>labelOrientation</td>\n <td>'horizontal' | 'vertical'</td>\n <td>'horizontal'</td>\n <td>Sets the orientation of the label. If using `vertical`, subLabels will not be displayed.</td>\n </tr>\n <tr>\n <td>labels</td>\n <td>(\\{value: string | number, label?: string, align?: LabelAlign, fontWeight?: FontWeight} | number | string)[]</td>\n <td>–</td>\n <td>Explicitly sets the axis labels (controlled). Providing a Label object allows for more control over the label display. Either an object or the domain value (string | number) can be provided as entries to the array. Just providing the domain values makes it possible to simply control the labels that should be added without altering the display value or styling of the label. Providing an object as the label entry opens up control of the alignment, font-weight and display value of the label. `fontWeight` and `align` will default to the axis font weight and label alignment. `label` is equal to `value` by default. The following are semantically equivalent: [\\{value: 2, label: \"2\", align: 'center', fontWeight: \"normal\"}] = [\\{value: 2}] = [2]</td>\n </tr>\n <tr>\n <td>tickCountLimit</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the upper limit on the number of axis ticks. Base tick, typically 0, is not included in the count. e.g. 0, 1, 2, 3 is considered 3 ticks. Note: The final tick count may vary based on Vega's automatic calculations to create visually pleasing values.</td>\n </tr>\n <tr>\n <td>tickCountMinimum</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the minimum number of axis ticks. The default is 2. Smaller charts may want to use a minimum of 3 instead to show a more accurate representation of the data.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>'currency' | 'shortCurrency' | 'shortNumber' | 'standardNumber' | string</td>\n <td>'shortNumber'</td>\n <td>Sets the format for numeric axis labels. This format must be a <a href=\"https://d3js.org/d3-format#locale_format\" target=\"_blank\">d3-format specifier</a> (Example: '$.2f' = $5,432.10). <a href=\"https://github.com/adobe/react-spectrum-charts/wiki/Chart-API#locale\" target=\"_blank\">Number locale</a> will be applied to the number format. The following presets are also provided: currency ($2.50), shortCurrency ($20M), shortNumber (3B), standardNumber (2,500). Only valid if labelFormat is linear or undefined.</td>\n </tr>\n <tr>\n <td>range</td>\n <td>[number, number]</td>\n <td>–</td>\n <td>The minimum and maximum values for the axis, for example: `[-10, 10]`. Note: This prop is only supported for axes with `linear` or `time` scale types.</td>\n </tr>\n <tr>\n <td>subLabels</td>\n <td>\\{value: string | number, subLabel: string, align?: LabelAlign, fontWeight?: FontWeight}[]</td>\n <td>–</td>\n <td>Adds sublabels below the axis labels. If the provided value is not within the axis domain, it won't be added. Note that if `labelOrientation` is set to `vertical`, `subLabels` will not be displayed.</td>\n </tr>\n <tr>\n <td>ticks</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays ticks at each label location.</td>\n </tr>\n <tr>\n <td>tickMinStep</td>\n <td>number</td>\n <td>–</td>\n <td>The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of 1 indicates that ticks should not be less than 1 unit apart. Note: This prop is only supported for linear axes.</td>\n </tr>\n <tr>\n <td>title</td>\n <td>string | string[]</td>\n <td>–</td>\n <td>Sets the axis title. If an array of strings is provided, each string will render on a new line.</td>\n </tr>\n <tr>\n <td>truncateLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>If the text is wider than the bandwidth that is labels, it will be truncated so that it stays within that bandwidth. This is only valid for categorical axes (ex. dimension axis on a bar chart). This setting is also ignored if the `labels` prop is used to control the axis labels.</td>\n </tr>\n <tr>\n <td>currencyLocale</td>\n <td>string</td>\n <td>–</td>\n <td>Set the locale for currency formatting (affects symbol position and spacing). ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency locale formatting from the chart locale. **Important:** This prop requires 'currencyCode' prop to take effect. Example: 'en-US' ($100) vs 'de-DE' (100 $)</td>\n </tr>\n <tr>\n <td>currencyCode</td>\n <td>string</td>\n <td>–</td>\n <td>Override the currency symbol from the chart locale with a specific currency code. ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency symbol from the chart locale. **Important:** This prop requires 'currencyLocale' prop to take effect.</td>\n </tr>\n </tbody>\n</table>"
254
254
  },
255
255
  {
256
256
  "title": "Content",
@@ -328,7 +328,7 @@
328
328
  "content": "#### Notes\n\n- Thumbnails are automatically hidden when there isn't enough space to display them properly\n- The component automatically handles label positioning to prevent overlap with thumbnails\n- Thumbnails are rendered as Vega image marks and support all standard image formats"
329
329
  }
330
330
  ],
331
- "content": "The `Axis` component is used to display the axis, axis labels and grid marks. An axis is not required if you would like something like a [sparkline](https://spectrum.adobe.com/page/line-chart/#Sparkline) visualization.\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\" />\n</Chart>\n```\n\n## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>position*</td>\n <td>'left' | 'bottom' | 'top' | 'right'</td>\n <td>–</td>\n <td>Sets where the axis will be displayed.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>baseline</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds a baseline rule for this axis.</td>\n </tr>\n <tr>\n <td>baselineOffset</td>\n <td>number</td>\n <td>0</td>\n <td>Adds an offset to the baseline. If baseline is false then this prop is ignored. If baseline is drawn relative to a categorical axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>children</td>\n <td>AxisAnnotation | ReferenceLine</td>\n <td>–</td>\n <td>Child components that add supplemental content to the axis</td>\n </tr>\n <tr>\n <td>granularity</td>\n <td>'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'</td>\n <td>'day'</td>\n <td>Sets the granularity of the primary axis labels for time axis. If this axis is not for a time axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>grid</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays gridlines at each tick location.</td>\n </tr>\n <tr>\n <td>hideDefaultLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>Hides the axis labels. If labels have been explicitly added using the `labels` prop, these will still be visible.</td>\n </tr>\n <tr>\n <td>labelAlign</td>\n <td>'start' | 'center' | 'end'</td>\n <td>'center'</td>\n <td>Sets the alignment of axis labels. `center` will set the align to `center` for horizontal axes and the baseline to `middle` for vertical axes. `start` will set the align to `left` for horizontal axes and the baseline to `top` for vertical axes. `end` will set the align to `right` for horizontal axes and the baseline to `bottom` for vertical axes.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>FontWeight</td>\n <td>'normal'</td>\n <td>Sets the font weight of axis labels.</td>\n </tr>\n <tr>\n <td>labelFormat</td>\n <td>'duration' | 'linear' | 'percentage' | 'time'</td>\n <td>–</td>\n <td>Sets the format of the axis labels. `duration` will display seconds value in a m:ss format if less than 3,600 and in a H:mm:ss format if >= 3,600 (ex: 3 = 0:03, 36 = 0:36, 366 = 6:06, 3661 = 1:01:01).</td>\n </tr>\n <tr>\n <td>labelLimit</td>\n <td>number</td>\n <td>undefined (180 Vega default)</td>\n <td>Sets the maximum allowed length, in pixels, of axis tick labels. Labels that exceed this limit will be truncated. If not specified, Vega uses its default of 180 pixels.</td>\n </tr>\n <tr>\n <td>labelOrientation</td>\n <td>'horizontal' | 'vertical'</td>\n <td>'horizontal'</td>\n <td>Sets the orientation of the label. If using `vertical`, subLabels will not be displayed.</td>\n </tr>\n <tr>\n <td>labels</td>\n <td>(\\{value: string | number, label?: string, align?: LabelAlign, fontWeight?: FontWeight} | number | string)[]</td>\n <td>–</td>\n <td>Explicitly sets the axis labels (controlled). Providing a Label object allows for more control over the label display. Either an object or the domain value (string | number) can be provided as entries to the array. Just providing the domain values makes it possible to simply control the labels that should be added without altering the display value or styling of the label. Providing an object as the label entry opens up control of the alignment, font-weight and display value of the label. `fontWeight` and `align` will default to the axis font weight and label alignment. `label` is equal to `value` by default. The following are semantically equivalent: [\\{value: 2, label: \"2\", align: 'center', fontWeight: \"normal\"}] = [\\{value: 2}] = [2]</td>\n </tr>\n <tr>\n <td>tickCountLimit</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the upper limit on the number of axis ticks. Base tick, typically 0, is not included in the count. e.g. 0, 1, 2, 3 is considered 3 ticks. Note: The final tick count may vary based on Vega's automatic calculations to create visually pleasing values.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>'currency' | 'shortCurrency' | 'shortNumber' | 'standardNumber' | string</td>\n <td>'shortNumber'</td>\n <td>Sets the format for numeric axis labels. This format must be a <a href=\"https://d3js.org/d3-format#locale_format\" target=\"_blank\">d3-format specifier</a> (Example: '$.2f' = $5,432.10). <a href=\"https://github.com/adobe/react-spectrum-charts/wiki/Chart-API#locale\" target=\"_blank\">Number locale</a> will be applied to the number format. The following presets are also provided: currency ($2.50), shortCurrency ($20M), shortNumber (3B), standardNumber (2,500). Only valid if labelFormat is linear or undefined.</td>\n </tr>\n <tr>\n <td>range</td>\n <td>[number, number]</td>\n <td>–</td>\n <td>The minimum and maximum values for the axis, for example: `[-10, 10]`. Note: This prop is only supported for axes with `linear` or `time` scale types.</td>\n </tr>\n <tr>\n <td>subLabels</td>\n <td>\\{value: string | number, subLabel: string, align?: LabelAlign, fontWeight?: FontWeight}[]</td>\n <td>–</td>\n <td>Adds sublabels below the axis labels. If the provided value is not within the axis domain, it won't be added. Note that if `labelOrientation` is set to `vertical`, `subLabels` will not be displayed.</td>\n </tr>\n <tr>\n <td>ticks</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays ticks at each label location.</td>\n </tr>\n <tr>\n <td>tickMinStep</td>\n <td>number</td>\n <td>–</td>\n <td>The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of 1 indicates that ticks should not be less than 1 unit apart. Note: This prop is only supported for linear axes.</td>\n </tr>\n <tr>\n <td>title</td>\n <td>string | string[]</td>\n <td>–</td>\n <td>Sets the axis title. If an array of strings is provided, each string will render on a new line.</td>\n </tr>\n <tr>\n <td>truncateLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>If the text is wider than the bandwidth that is labels, it will be truncated so that it stays within that bandwidth. This is only valid for categorical axes (ex. dimension axis on a bar chart). This setting is also ignored if the `labels` prop is used to control the axis labels.</td>\n </tr>\n <tr>\n <td>currencyLocale</td>\n <td>string</td>\n <td>–</td>\n <td>Set the locale for currency formatting (affects symbol position and spacing). ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency locale formatting from the chart locale. **Important:** This prop requires 'currencyCode' prop to take effect. Example: 'en-US' ($100) vs 'de-DE' (100 $)</td>\n </tr>\n <tr>\n <td>currencyCode</td>\n <td>string</td>\n <td>–</td>\n <td>Override the currency symbol from the chart locale with a specific currency code. ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency symbol from the chart locale. **Important:** This prop requires 'currencyLocale' prop to take effect.</td>\n </tr>\n </tbody>\n</table>\n\n## Content\n\nThe `Axis` component supports additional content as children.\n\n### AxisAnnotation\n\nAn `AxisAnnotation` can be used to add icons to an axis. These are typically used to provide information in a tooltip or popover for a specific data point or range.\n\n#### Example\n\n```jsx\nconst axisAnnotationProps = {\n\tdataKey: 'annotations',\n\tcolor: 'gray-600',\n}\n\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <AxisAnnotation {...axisAnnotationProps} />\n </Axis>\n</Chart>\n```\n\n// Todo axisannotation image\n\n#### AxisAnnotation Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children*</td>\n <td>ChartPopover | ChartTooltip</td>\n <td>-</td>\n <td>Optional content of the AxisAnnotation</td>\n </tr>\n <tr>\n <td>color</td>\n <td>Color | string</td>\n <td>'gray-600'</td>\n <td>The color to use for the annotation icons and range lines if a color isn't specified in options, or multiple annotations fall in the same icon. CSS color names and spectrum color names are supported.</td>\n </tr>\n <tr>\n <td>dataKey</td>\n <td>string</td>\n <td>'annotations'</td>\n <td>The data field where the annotation ids are listed for each data point.</td>\n </tr>\n <tr>\n <td>format</td>\n <td>'span' | 'summary'</td>\n <td>'span' if using a time based scale, otherwise 'summary'</td>\n <td>Show annotations as a horizontal span of icons or a single summary icon.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>A generated string that includes the axis name and the index of the annotation.</td>\n <td>Unique name for the annotation to be used as an identifier.</td>\n </tr>\n <tr>\n <td>offset</td>\n <td>number</td>\n <td>80</td>\n <td>Adds pixels to offset the annotation from the bottom of the bottom of the chart.</td>\n </tr>\n <tr>\n <td>options</td>\n <td>\\{ id: string, color: Color | string }[]</td>\n <td>[]</td>\n <td>Options specific to each annotation in the data.</td>\n </tr>\n </tbody>\n</table>\n\n#### AxisAnnotation Options\n\nAn array of `option` objects can be passed to the prop `options` to control individual annotations using an id.\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>id</td>\n <td>string</td>\n <td>-</td>\n <td>The id of the annotation to apply the options to.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>Color | string</td>\n <td>-</td>\n <td>The color of the annotation icon and range lines. CSS color names and spectrum color names are supported.</td>\n </tr>\n </tbody>\n</table>\n\n```jsx\nconst axisAnnotationProps = {\n\tdataKey: 'annotations',\n\toptions: [\n\t\t{ id: '1', color: 'magenta-600' },\n\t\t{ id: '2', color: 'fuchsia-600' },\n\t\t{ id: '3', color: 'yellow-600' },\n\t\t{ id: '4', color: 'celery-600' },\n\t],\n}\n\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <AxisAnnotation {...axisAnnotationProps} />\n </Axis>\n</Chart>\n```\n\n### ReferenceLine\n\nA `ReferenceLine` can be used to add a vertical or horizontal line to a chart as a reference.\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <ReferenceLine value={0.5} icon=\"date\" />\n </Axis>\n</Chart>\n```\n\n//todo add reference line image\n\n#### ReferenceLine Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>value*</td>\n <td>number | string</td>\n <td>–</td>\n <td>Sets the value on the axis that the reference line will be drawn at.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the reference line.</td>\n </tr>\n <tr>\n <td>icon</td>\n <td>SupportedIcon | string (svg path)</td>\n <td>–</td>\n <td>Adds an icon on the axis for the reference line. Either the name of a supported svg icon can be provided or an svg path string can be provided. For correct sizing, custom svg paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.</td>\n </tr>\n <tr>\n <td>iconColor</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the icon.</td>\n </tr>\n <tr>\n <td>label</td>\n <td>string</td>\n <td>–</td>\n <td>Adds a text label on the axis for the reference line. This will be positioned outside of the icon if both an icon and a label are provided (e.g., beneath the icon if the axis `position` is `bottom`, left of the icon if the axis `position` is `left`).</td>\n </tr>\n <tr>\n <td>labelColor</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the label.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>string</td>\n <td>'normal'</td>\n <td>Sets the font weight of the label.</td>\n </tr>\n <tr>\n <td>layer</td>\n <td>'back' | 'front'</td>\n <td>'front'</td>\n <td>Sets the layer that the reference line gets drawn on. If set to `back`, the reference line will be drawn behind all data marks (bars, lines, etc.). If `front`, the reference line will be drawn in front of all data marks.</td>\n </tr>\n <tr>\n <td>position</td>\n <td>'before' | 'after' | 'center'</td>\n <td>'center'</td>\n <td>Set the reference line position to either center on the `value`, or to be between the `value` and the value before or after. Typically used in Bar visualizations where spacing is more likely to exist between values.</td>\n </tr>\n </tbody>\n</table>\n\n#### Icons\n\nAn icon can be used as a label for the reference line. Either the name of a supported svg icon can be provided or an svg path string can be provided. For correct sizing, custom svg paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.\n\nSupported Icons:\n\n- date\n\nIf there is a [Spectrum Icon](https://spectrum.adobe.com/page/icons/) that is not supported, submit an issue to this repo to get it added.\n\n### AxisThumbnail\n\nAn `AxisThumbnail` can be used to display thumbnail images on axis labels. This component enhances axis labels with visual thumbnails from your data, providing additional context and visual appeal to categorical axes.\n\n```jsx\nconst data = [\n {\"browser\": \"Chrome\", \"downloads\": 27000, \"thumbnail\": \"/chrome.png\"},\n {\"browser\": \"Firefox\", \"downloads\": 8000, \"thumbnail\": \"/firefox.png\"},\n {\"browser\": \"Safari\", \"downloads\": 7750, \"thumbnail\": \"/safari.png\"},\n {\"browser\": \"Edge\", \"downloads\": 7600, \"thumbnail\": \"/edge.png\"},\n {\"browser\": \"Explorer\", \"downloads\": 500, \"thumbnail\": \"/explorer.png\"}\n]\n\n<Chart data={data}>\n <Bar dimension=\"browser\" metric=\"downloads\" />\n <Axis position=\"bottom\" baseline>\n <AxisThumbnail urlKey=\"thumbnail\" />\n </Axis>\n</Chart>\n```\n\n![Bar chart with axis thumbnail](/img/thumbnail_light.png#gh-light-mode-only)\n![Bar chart with axis thumbnail](/img/thumbnail_dark.png#gh-dark-mode-only)\n\n#### AxisThumbnail Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>urlKey</td>\n <td>string</td>\n <td>'thumbnail'</td>\n <td>The data field key that contains the URL of the thumbnail image.</td>\n </tr>\n </tbody>\n</table>\n\n#### Supported Scale Types\n\nAxis thumbnails are currently supported only on **band scales**, which are typically used for categorical dimensions in bar charts and similar visualizations. Linear and time scales do not support thumbnails.\n\n#### Thumbnail Behavior\n\n- **Dynamic Sizing**: Thumbnails automatically resize based on the available bandwidth of the scale, with a maximum size of 42px and minimum size of 16px\n- **Visibility**: Thumbnails become invisible when the available space is less than 16px to prevent overcrowding\n- **Positioning**: Thumbnails are positioned relative to the axis\n\n#### Data Requirements\n\n- Each data point must include a field containing the URL of the thumbnail image\n- The URL should point to a valid image file (PNG, JPG, SVG, etc.)\n- Images should be square and appropriately sized for display (recommended: 32x32px or larger)\n- Ensure the image URLs are accessible and load properly\n- For best results, use consistent image dimensions across all thumbnails\n\n#### Example Use Cases\n\n- **Browser logos** in web analytics charts\n- **Product images** in e-commerce dashboards\n- **Country flags** in geographic data visualizations\n- **Brand logos** in marketing performance charts\n- **Category icons** in organizational charts\n\n#### Notes\n\n- Thumbnails are automatically hidden when there isn't enough space to display them properly\n- The component automatically handles label positioning to prevent overlap with thumbnails\n- Thumbnails are rendered as Vega image marks and support all standard image formats\n"
331
+ "content": "The `Axis` component is used to display the axis, axis labels and grid marks. An axis is not required if you would like something like a [sparkline](https://spectrum.adobe.com/page/line-chart/#Sparkline) visualization.\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\" />\n</Chart>\n```\n\n## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>position*</td>\n <td>'left' | 'bottom' | 'top' | 'right'</td>\n <td>–</td>\n <td>Sets where the axis will be displayed.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Sets the name of the component.</td>\n </tr>\n <tr>\n <td>baseline</td>\n <td>boolean</td>\n <td>false</td>\n <td>Adds a baseline rule for this axis.</td>\n </tr>\n <tr>\n <td>baselineOffset</td>\n <td>number</td>\n <td>0</td>\n <td>Adds an offset to the baseline. If baseline is false then this prop is ignored. If baseline is drawn relative to a categorical axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>children</td>\n <td>AxisAnnotation | ReferenceLine</td>\n <td>–</td>\n <td>Child components that add supplemental content to the axis</td>\n </tr>\n <tr>\n <td>granularity</td>\n <td>'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'</td>\n <td>'day'</td>\n <td>Sets the granularity of the primary axis labels for time axis. If this axis is not for a time axis, this prop is ignored.</td>\n </tr>\n <tr>\n <td>grid</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays gridlines at each tick location.</td>\n </tr>\n <tr>\n <td>hideDefaultLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>Hides the axis labels. If labels have been explicitly added using the `labels` prop, these will still be visible.</td>\n </tr>\n <tr>\n <td>labelAlign</td>\n <td>'start' | 'center' | 'end'</td>\n <td>'center'</td>\n <td>Sets the alignment of axis labels. `center` will set the align to `center` for horizontal axes and the baseline to `middle` for vertical axes. `start` will set the align to `left` for horizontal axes and the baseline to `top` for vertical axes. `end` will set the align to `right` for horizontal axes and the baseline to `bottom` for vertical axes.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>FontWeight</td>\n <td>'normal'</td>\n <td>Sets the font weight of axis labels.</td>\n </tr>\n <tr>\n <td>labelFormat</td>\n <td>'duration' | 'linear' | 'percentage' | 'time'</td>\n <td>–</td>\n <td>Sets the format of the axis labels. `duration` will display seconds value in a m:ss format if less than 3,600 and in a H:mm:ss format if >= 3,600 (ex: 3 = 0:03, 36 = 0:36, 366 = 6:06, 3661 = 1:01:01).</td>\n </tr>\n <tr>\n <td>labelLimit</td>\n <td>number</td>\n <td>undefined (180 Vega default)</td>\n <td>Sets the maximum allowed length, in pixels, of axis tick labels. Labels that exceed this limit will be truncated. If not specified, Vega uses its default of 180 pixels.</td>\n </tr>\n <tr>\n <td>labelOrientation</td>\n <td>'horizontal' | 'vertical'</td>\n <td>'horizontal'</td>\n <td>Sets the orientation of the label. If using `vertical`, subLabels will not be displayed.</td>\n </tr>\n <tr>\n <td>labels</td>\n <td>(\\{value: string | number, label?: string, align?: LabelAlign, fontWeight?: FontWeight} | number | string)[]</td>\n <td>–</td>\n <td>Explicitly sets the axis labels (controlled). Providing a Label object allows for more control over the label display. Either an object or the domain value (string | number) can be provided as entries to the array. Just providing the domain values makes it possible to simply control the labels that should be added without altering the display value or styling of the label. Providing an object as the label entry opens up control of the alignment, font-weight and display value of the label. `fontWeight` and `align` will default to the axis font weight and label alignment. `label` is equal to `value` by default. The following are semantically equivalent: [\\{value: 2, label: \"2\", align: 'center', fontWeight: \"normal\"}] = [\\{value: 2}] = [2]</td>\n </tr>\n <tr>\n <td>tickCountLimit</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the upper limit on the number of axis ticks. Base tick, typically 0, is not included in the count. e.g. 0, 1, 2, 3 is considered 3 ticks. Note: The final tick count may vary based on Vega's automatic calculations to create visually pleasing values.</td>\n </tr>\n <tr>\n <td>tickCountMinimum</td>\n <td>number</td>\n <td>–</td>\n <td>Sets the minimum number of axis ticks. The default is 2. Smaller charts may want to use a minimum of 3 instead to show a more accurate representation of the data.</td>\n </tr>\n <tr>\n <td>numberFormat</td>\n <td>'currency' | 'shortCurrency' | 'shortNumber' | 'standardNumber' | string</td>\n <td>'shortNumber'</td>\n <td>Sets the format for numeric axis labels. This format must be a <a href=\"https://d3js.org/d3-format#locale_format\" target=\"_blank\">d3-format specifier</a> (Example: '$.2f' = $5,432.10). <a href=\"https://github.com/adobe/react-spectrum-charts/wiki/Chart-API#locale\" target=\"_blank\">Number locale</a> will be applied to the number format. The following presets are also provided: currency ($2.50), shortCurrency ($20M), shortNumber (3B), standardNumber (2,500). Only valid if labelFormat is linear or undefined.</td>\n </tr>\n <tr>\n <td>range</td>\n <td>[number, number]</td>\n <td>–</td>\n <td>The minimum and maximum values for the axis, for example: `[-10, 10]`. Note: This prop is only supported for axes with `linear` or `time` scale types.</td>\n </tr>\n <tr>\n <td>subLabels</td>\n <td>\\{value: string | number, subLabel: string, align?: LabelAlign, fontWeight?: FontWeight}[]</td>\n <td>–</td>\n <td>Adds sublabels below the axis labels. If the provided value is not within the axis domain, it won't be added. Note that if `labelOrientation` is set to `vertical`, `subLabels` will not be displayed.</td>\n </tr>\n <tr>\n <td>ticks</td>\n <td>boolean</td>\n <td>false</td>\n <td>Displays ticks at each label location.</td>\n </tr>\n <tr>\n <td>tickMinStep</td>\n <td>number</td>\n <td>–</td>\n <td>The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of 1 indicates that ticks should not be less than 1 unit apart. Note: This prop is only supported for linear axes.</td>\n </tr>\n <tr>\n <td>title</td>\n <td>string | string[]</td>\n <td>–</td>\n <td>Sets the axis title. If an array of strings is provided, each string will render on a new line.</td>\n </tr>\n <tr>\n <td>truncateLabels</td>\n <td>boolean</td>\n <td>false</td>\n <td>If the text is wider than the bandwidth that is labels, it will be truncated so that it stays within that bandwidth. This is only valid for categorical axes (ex. dimension axis on a bar chart). This setting is also ignored if the `labels` prop is used to control the axis labels.</td>\n </tr>\n <tr>\n <td>currencyLocale</td>\n <td>string</td>\n <td>–</td>\n <td>Set the locale for currency formatting (affects symbol position and spacing). ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency locale formatting from the chart locale. **Important:** This prop requires 'currencyCode' prop to take effect. Example: 'en-US' ($100) vs 'de-DE' (100 $)</td>\n </tr>\n <tr>\n <td>currencyCode</td>\n <td>string</td>\n <td>–</td>\n <td>Override the currency symbol from the chart locale with a specific currency code. ⚠️ Limited Support: Support for and changes to this prop will be limited. Only use this if you need to override the currency symbol from the chart locale. **Important:** This prop requires 'currencyLocale' prop to take effect.</td>\n </tr>\n </tbody>\n</table>\n\n## Content\n\nThe `Axis` component supports additional content as children.\n\n### AxisAnnotation\n\nAn `AxisAnnotation` can be used to add icons to an axis. These are typically used to provide information in a tooltip or popover for a specific data point or range.\n\n#### Example\n\n```jsx\nconst axisAnnotationProps = {\n\tdataKey: 'annotations',\n\tcolor: 'gray-600',\n}\n\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <AxisAnnotation {...axisAnnotationProps} />\n </Axis>\n</Chart>\n```\n\n// Todo axisannotation image\n\n#### AxisAnnotation Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children*</td>\n <td>ChartPopover | ChartTooltip</td>\n <td>-</td>\n <td>Optional content of the AxisAnnotation</td>\n </tr>\n <tr>\n <td>color</td>\n <td>Color | string</td>\n <td>'gray-600'</td>\n <td>The color to use for the annotation icons and range lines if a color isn't specified in options, or multiple annotations fall in the same icon. CSS color names and spectrum color names are supported.</td>\n </tr>\n <tr>\n <td>dataKey</td>\n <td>string</td>\n <td>'annotations'</td>\n <td>The data field where the annotation ids are listed for each data point.</td>\n </tr>\n <tr>\n <td>format</td>\n <td>'span' | 'summary'</td>\n <td>'span' if using a time based scale, otherwise 'summary'</td>\n <td>Show annotations as a horizontal span of icons or a single summary icon.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>A generated string that includes the axis name and the index of the annotation.</td>\n <td>Unique name for the annotation to be used as an identifier.</td>\n </tr>\n <tr>\n <td>offset</td>\n <td>number</td>\n <td>80</td>\n <td>Adds pixels to offset the annotation from the bottom of the bottom of the chart.</td>\n </tr>\n <tr>\n <td>options</td>\n <td>\\{ id: string, color: Color | string }[]</td>\n <td>[]</td>\n <td>Options specific to each annotation in the data.</td>\n </tr>\n </tbody>\n</table>\n\n#### AxisAnnotation Options\n\nAn array of `option` objects can be passed to the prop `options` to control individual annotations using an id.\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>id</td>\n <td>string</td>\n <td>-</td>\n <td>The id of the annotation to apply the options to.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>Color | string</td>\n <td>-</td>\n <td>The color of the annotation icon and range lines. CSS color names and spectrum color names are supported.</td>\n </tr>\n </tbody>\n</table>\n\n```jsx\nconst axisAnnotationProps = {\n\tdataKey: 'annotations',\n\toptions: [\n\t\t{ id: '1', color: 'magenta-600' },\n\t\t{ id: '2', color: 'fuchsia-600' },\n\t\t{ id: '3', color: 'yellow-600' },\n\t\t{ id: '4', color: 'celery-600' },\n\t],\n}\n\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <AxisAnnotation {...axisAnnotationProps} />\n </Axis>\n</Chart>\n```\n\n### ReferenceLine\n\nA `ReferenceLine` can be used to add a vertical or horizontal line to a chart as a reference.\n\n```jsx\n<Chart data={data}>\n <Axis position=\"bottom\" granularity=\"hour\" grid={false} title=\"My Axis Title\">\n <ReferenceLine value={0.5} icon=\"date\" />\n </Axis>\n</Chart>\n```\n\n//todo add reference line image\n\n#### ReferenceLine Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>value*</td>\n <td>number | string</td>\n <td>–</td>\n <td>Sets the value on the axis that the reference line will be drawn at.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the reference line.</td>\n </tr>\n <tr>\n <td>icon</td>\n <td>SupportedIcon | string (svg path)</td>\n <td>–</td>\n <td>Adds an icon on the axis for the reference line. Either the name of a supported svg icon can be provided or an svg path string can be provided. For correct sizing, custom svg paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.</td>\n </tr>\n <tr>\n <td>iconColor</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the icon.</td>\n </tr>\n <tr>\n <td>label</td>\n <td>string</td>\n <td>–</td>\n <td>Adds a text label on the axis for the reference line. This will be positioned outside of the icon if both an icon and a label are provided (e.g., beneath the icon if the axis `position` is `bottom`, left of the icon if the axis `position` is `left`).</td>\n </tr>\n <tr>\n <td>labelColor</td>\n <td>SpectrumColor | string</td>\n <td>'gray-800'</td>\n <td>Sets the color of the label.</td>\n </tr>\n <tr>\n <td>labelFontWeight</td>\n <td>string</td>\n <td>'normal'</td>\n <td>Sets the font weight of the label.</td>\n </tr>\n <tr>\n <td>layer</td>\n <td>'back' | 'front'</td>\n <td>'front'</td>\n <td>Sets the layer that the reference line gets drawn on. If set to `back`, the reference line will be drawn behind all data marks (bars, lines, etc.). If `front`, the reference line will be drawn in front of all data marks.</td>\n </tr>\n <tr>\n <td>position</td>\n <td>'before' | 'after' | 'center'</td>\n <td>'center'</td>\n <td>Set the reference line position to either center on the `value`, or to be between the `value` and the value before or after. Typically used in Bar visualizations where spacing is more likely to exist between values.</td>\n </tr>\n </tbody>\n</table>\n\n#### Icons\n\nAn icon can be used as a label for the reference line. Either the name of a supported svg icon can be provided or an svg path string can be provided. For correct sizing, custom svg paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.\n\nSupported Icons:\n\n- date\n\nIf there is a [Spectrum Icon](https://spectrum.adobe.com/page/icons/) that is not supported, submit an issue to this repo to get it added.\n\n### AxisThumbnail\n\nAn `AxisThumbnail` can be used to display thumbnail images on axis labels. This component enhances axis labels with visual thumbnails from your data, providing additional context and visual appeal to categorical axes.\n\n```jsx\nconst data = [\n {\"browser\": \"Chrome\", \"downloads\": 27000, \"thumbnail\": \"/chrome.png\"},\n {\"browser\": \"Firefox\", \"downloads\": 8000, \"thumbnail\": \"/firefox.png\"},\n {\"browser\": \"Safari\", \"downloads\": 7750, \"thumbnail\": \"/safari.png\"},\n {\"browser\": \"Edge\", \"downloads\": 7600, \"thumbnail\": \"/edge.png\"},\n {\"browser\": \"Explorer\", \"downloads\": 500, \"thumbnail\": \"/explorer.png\"}\n]\n\n<Chart data={data}>\n <Bar dimension=\"browser\" metric=\"downloads\" />\n <Axis position=\"bottom\" baseline>\n <AxisThumbnail urlKey=\"thumbnail\" />\n </Axis>\n</Chart>\n```\n\n![Bar chart with axis thumbnail](/img/thumbnail_light.png#gh-light-mode-only)\n![Bar chart with axis thumbnail](/img/thumbnail_dark.png#gh-dark-mode-only)\n\n#### AxisThumbnail Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>urlKey</td>\n <td>string</td>\n <td>'thumbnail'</td>\n <td>The data field key that contains the URL of the thumbnail image.</td>\n </tr>\n </tbody>\n</table>\n\n#### Supported Scale Types\n\nAxis thumbnails are currently supported only on **band scales**, which are typically used for categorical dimensions in bar charts and similar visualizations. Linear and time scales do not support thumbnails.\n\n#### Thumbnail Behavior\n\n- **Dynamic Sizing**: Thumbnails automatically resize based on the available bandwidth of the scale, with a maximum size of 42px and minimum size of 16px\n- **Visibility**: Thumbnails become invisible when the available space is less than 16px to prevent overcrowding\n- **Positioning**: Thumbnails are positioned relative to the axis\n\n#### Data Requirements\n\n- Each data point must include a field containing the URL of the thumbnail image\n- The URL should point to a valid image file (PNG, JPG, SVG, etc.)\n- Images should be square and appropriately sized for display (recommended: 32x32px or larger)\n- Ensure the image URLs are accessible and load properly\n- For best results, use consistent image dimensions across all thumbnails\n\n#### Example Use Cases\n\n- **Browser logos** in web analytics charts\n- **Product images** in e-commerce dashboards\n- **Country flags** in geographic data visualizations\n- **Brand logos** in marketing performance charts\n- **Category icons** in organizational charts\n\n#### Notes\n\n- Thumbnails are automatically hidden when there isn't enough space to display them properly\n- The component automatically handles label positioning to prevent overlap with thumbnails\n- Thumbnails are rendered as Vega image marks and support all standard image formats\n"
332
332
  },
333
333
  {
334
334
  "id": "api/components/Legend",
@@ -760,7 +760,7 @@
760
760
  {
761
761
  "title": "Props",
762
762
  "level": 2,
763
- "content": "## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children</td>\n <td>ChartTooltip | ChartPopover | Trendline | ScatterAnnotation</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string | \\{value: ColorValue}</td>\n <td>'series'</td>\n <td>Symbol color.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a color from the color scale.<br/>If an object with a value is provided, this will set the color for all symbols.</td>\n </tr>\n <tr>\n <td>colorScaleType</td>\n <td>'linear' | 'ordinal'</td>\n <td>'linear'</td>\n <td>The scale type for the color scale. If the backing data for `color` is continuous (non-binned numerical data) then this should be `linear` which will calculate the color of the point based on the number in the data, using the linear color scale (color gradient).<br/>If the backing data is ordinal (ex. string data), then this should be 'ordinal' which will assign colors based on the order of the data passed in. There is no interpolation of color values in ordinal scales.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>Scatter point line type (dasharray).<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale.<br/>\n If an object with a value is provided, this will set the line type for all symbols.</td>\n </tr>\n <tr>\n <td>lineWidth</td>\n <td>string | \\{value: LineWidth | number}</td>\n <td>–</td>\n <td>Scatter point border line width in pixels.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line width from the line widths scale.<br/>If an object with a value is provided, this will set the line width for all symbols.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is no longer hovered.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point. this is the y-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Scatter name. Useful for if you need to traverse the chart object to find the scatter plot marks.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>string | \\{value: number}</td>\n <td>\\{value: 1}</td>\n <td>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacity scale.<br/>If an object with a value is provided, this will set the opacity for all symbols.</td>\n </tr>\n <tr>\n <td>size</td>\n <td>string | \\{value: SymbolSize | number}</td>\n <td>\\{value: 'M'}</td>\n <td>Scatter point symbol size.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an size from the symbol size scale. <br/>If an object with a value is provided, this will set the size for all symbols.</td>\n </tr>\n </tbody>\n</table>"
763
+ "content": "## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children</td>\n <td>ChartTooltip | ChartPopover | Trendline | ScatterAnnotation</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string | \\{value: ColorValue}</td>\n <td>'series'</td>\n <td>Symbol color.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a color from the color scale.<br/>If an object with a value is provided, this will set the color for all symbols.</td>\n </tr>\n <tr>\n <td>clip</td>\n <td>boolean</td>\n <td>false</td>\n <td>If set to true, inner plot content will be clipped at the plot borders rather than extending into the surrounding space.</td>\n </tr>\n <tr>\n <td>colorScaleType</td>\n <td>'linear' | 'ordinal'</td>\n <td>'linear'</td>\n <td>The scale type for the color scale. If the backing data for `color` is continuous (non-binned numerical data) then this should be `linear` which will calculate the color of the point based on the number in the data, using the linear color scale (color gradient).<br/>If the backing data is ordinal (ex. string data), then this should be 'ordinal' which will assign colors based on the order of the data passed in. There is no interpolation of color values in ordinal scales.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>Scatter point line type (dasharray).<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale.<br/>\n If an object with a value is provided, this will set the line type for all symbols.</td>\n </tr>\n <tr>\n <td>lineWidth</td>\n <td>string | \\{value: LineWidth | number}</td>\n <td>–</td>\n <td>Scatter point border line width in pixels.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line width from the line widths scale.<br/>If an object with a value is provided, this will set the line width for all symbols.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is no longer hovered.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point. this is the y-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Scatter name. Useful for if you need to traverse the chart object to find the scatter plot marks.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>string | \\{value: number}</td>\n <td>\\{value: 1}</td>\n <td>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacity scale.<br/>If an object with a value is provided, this will set the opacity for all symbols.</td>\n </tr>\n <tr>\n <td>size</td>\n <td>string | \\{value: SymbolSize | number}</td>\n <td>\\{value: 'M'}</td>\n <td>Scatter point symbol size.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an size from the symbol size scale. <br/>If an object with a value is provided, this will set the size for all symbols.</td>\n </tr>\n </tbody>\n</table>"
764
764
  },
765
765
  {
766
766
  "title": "ScatterAnnotation",
@@ -798,7 +798,7 @@
798
798
  "content": "#### Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>color</td>\n <td>ColorValue</td>\n <td>'gray-500'</td>\n <td>The color of the path. Can be a css color value or a spectrum color name.</td>\n </tr>\n <tr>\n <td>groupBy</td>\n <td>string[]</td>\n <td>–</td>\n <td>List of keys that defines what data must be in common to draw a connecting path.<br/>For example, if groupBy=\\{['weightClass', 'type']} then each point with the same weight class and type will have a path drawn connecting them.</td>\n </tr>\n <tr>\n <td>pathWidth</td>\n <td>string | \\{value: PathWidth | number}</td>\n <td>\\{value: 'M'}</td>\n <td>The width of the path.<br/>If a string is provided, this string is the key in the data. Each value for this key in the provided data will map to a width from the path width scale.<br/>If an object with a value is provided, this will set the width for all paths.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>number</td>\n <td>0.5</td>\n <td>The fill opacity of the path.</td>\n </tr>\n </tbody>\n</table>"
799
799
  }
800
800
  ],
801
- "content": "The `Scatter` component is used to display scatter plots. Scatter plots use continuous data for both the x and y axes. They are most useful for comparing two continuous values across many different points.\n\n## Encoding\n\nThe `Scatter` component supports many different attributes for mapping data properties to visual representations.\n\n- `color`\n - Can be a categorical color scale for categorical mappings or a continuous color scale (sequential or divergent) for numerical mappings\n- `lineType`\n- `lineWidth`\n- `opacity`\n- `size`\n\n### Examples\n\nAll the following examples will use the same base chart code:\n\n```jsx\n<Chart data={data}>\n <Axis baseline grid position=\"bottom\" ticks title=\"Speed (normal)\" />\n <Axis baseline grid position=\"left\" ticks title=\"Handling (normal)\" />\n <Scatter dimension=\"speedNormal\" metric=\"handlingNormal\" />\n <Legend highlight position=\"right\" title=\"Weight class\" />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n#### Color\n\n```jsx\n...\n <Scatter {...scatterProps} color=\"weightClass\" />\n...\n```\n\n![Scatter plot with different colors based on weight class](/img/scatter_color_light.png#gh-light-mode-only)\n![Scatter plot with different colors based on weight class](/img/scatter_color_dark.png#gh-dark-mode-only)\n\n#### Continuous color scale\n\n```jsx\n...\n <Scatter {...scatterProps} color=\"weight\" colorScaleType=\"linear\" />\n...\n```\n\n![Scatter plot with different colors based on weight](/img/scatter_sequentialColor_light.png#gh-light-mode-only)\n![Scatter plot with different colors based on weight](/img/scatter_sequentialColor_dark.png#gh-dark-mode-only)\n\n#### Size\n\n```jsx\n...\n <Scatter {...scatterProps} size=\"weight\" />\n...\n```\n\n![Scatter plot with different symbol sizes based on weight](/img/scatter_size_light.png#gh-light-mode-only)\n![Scatter plot with different symbol sizes based on weight](/img/scatter_size_dark.png#gh-dark-mode-only)\n\n## Tooltips and Popovers\n\n`Scatter` supports `ChartTooltip` and `ChartPopover` like all other chart mark components.\n\n### Tooltip\n\n```jsx\n<Chart data={data}>\n <Axis\n baseline\n grid\n position=\"bottom\"\n ticks\n title=\"Speed (normal)\"\n />\n <Axis\n baseline\n grid\n position=\"left\"\n ticks\n title=\"Handling (normal)\"\n />\n <Scatter\n dimension=\"speedNormal\"\n metric=\"handlingNormal\"\n color=\"weightClass\"\n >\n <ChartTooltip>\n {\n (item) => (\n <Content>\n <Flex direction=\"column\">\n <div style={{ fontWeight: 'bold' }}>{(item.character as string[]).join(', ')}</div>\n <div>\n Speed (normal): {item.speedNormal}\n </div>\n <div>\n Handling (normal): {item.handlingNormal}\n </div>\n </Flex>\n </Content>\n )\n }\n </ChartTooltip>\n </Scatter>\n <Legend\n highlight\n position=\"right\"\n title=\"Weight class\"\n />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n![Scatter plot with a tooltip displayed on one of the points](/img/scatter_tooltip_light.png#gh-light-mode-only)\n![Scatter plot with a tooltip displayed on one of the points](/img/scatter_tooltip_dark.png#gh-dark-mode-only)\n\n## Trendlines\n\nThe `Trendline` component is fully supported by `Scatter`. To plot a trendline, simply pass the `Trendline` component into `Scatter` as a child.\n\n![Scatter plot with vertical and horizontal median lines](/img/featureMatrix_light.png#gh-light-mode-only)\n![Scatter plot with vertical and horizontal median lines](/img/featureMatrix_dark.png#gh-dark-mode-only)\n\n## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children</td>\n <td>ChartTooltip | ChartPopover | Trendline | ScatterAnnotation</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string | \\{value: ColorValue}</td>\n <td>'series'</td>\n <td>Symbol color.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a color from the color scale.<br/>If an object with a value is provided, this will set the color for all symbols.</td>\n </tr>\n <tr>\n <td>colorScaleType</td>\n <td>'linear' | 'ordinal'</td>\n <td>'linear'</td>\n <td>The scale type for the color scale. If the backing data for `color` is continuous (non-binned numerical data) then this should be `linear` which will calculate the color of the point based on the number in the data, using the linear color scale (color gradient).<br/>If the backing data is ordinal (ex. string data), then this should be 'ordinal' which will assign colors based on the order of the data passed in. There is no interpolation of color values in ordinal scales.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>Scatter point line type (dasharray).<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale.<br/>\n If an object with a value is provided, this will set the line type for all symbols.</td>\n </tr>\n <tr>\n <td>lineWidth</td>\n <td>string | \\{value: LineWidth | number}</td>\n <td>–</td>\n <td>Scatter point border line width in pixels.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line width from the line widths scale.<br/>If an object with a value is provided, this will set the line width for all symbols.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is no longer hovered.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point. this is the y-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Scatter name. Useful for if you need to traverse the chart object to find the scatter plot marks.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>string | \\{value: number}</td>\n <td>\\{value: 1}</td>\n <td>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacity scale.<br/>If an object with a value is provided, this will set the opacity for all symbols.</td>\n </tr>\n <tr>\n <td>size</td>\n <td>string | \\{value: SymbolSize | number}</td>\n <td>\\{value: 'M'}</td>\n <td>Scatter point symbol size.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an size from the symbol size scale. <br/>If an object with a value is provided, this will set the size for all symbols.</td>\n </tr>\n </tbody>\n</table>\n\n### ScatterAnnotation\n\nThe `ScatterAnnotation` component can be passed into `Scatter` as a child. This allows you to add text labels directly on scatter plot points, making it easier to identify specific data points or highlight important information.\n\nThe component supports an `anchor` prop to define where annotations should be placed relative to their corresponding points. You can pass a single position or an array of positions. When an array is provided, each position is tried in order until one fits within the chart bounds without overlapping other annotations or points. **If a label cannot be placed without overlapping, it will not be displayed. This means scatter annotations should be considered \"nice to have\" supplemental information.**\n\n#### Example\n\n```jsx\n<Chart data={data}>\n <Axis baseline grid position=\"bottom\" ticks title=\"Speed (normal)\" />\n <Axis baseline grid position=\"left\" ticks title=\"Handling (normal)\" />\n <Scatter dimension=\"speedNormal\" metric=\"handlingNormal\" color=\"weightClass\">\n <ScatterAnnotation textKey=\"character\" anchor={['right', 'top', 'bottom', 'left']} />\n </Scatter>\n <Legend highlight position=\"right\" title=\"Weight class\" />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n![Scatter plot with text annotations for each point](/img/scatterAnnotation_light.png#gh-light-mode-only)\n![Scatter plot with text annotations for each point](/img/scatterAnnotation_dark.png#gh-dark-mode-only)\n\n#### Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>anchor</td>\n <td>LabelAnchor | LabelAnchor[]</td>\n <td>['right', 'top', 'bottom', 'left']</td>\n <td>Specifies where to position the annotation relative to the data point. Possible values include 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', and 'bottom-right'.<br/>When an array is provided, each position is tried in order until one fits within the chart bounds and doesn't overlap with other annotations or points. If no position fits, the annotation is not displayed. This is true even if only one position is supplied.</td>\n </tr>\n <tr>\n <td>textKey</td>\n <td>string</td>\n <td>'annotation'</td>\n <td>The key in the data that contains the text to display for each annotation.</td>\n </tr>\n </tbody>\n</table>\n\n## Advanced\n\n### ScatterPath\n\nThe `ScatterPath` component can be passed into `Scatter` as a child. This allows you to draw a continuous path connecting points on the scatter plot. The width of the path can vary from point to point.\n\n#### Example\n\nThis plot is using the `ScatterPath` component to draw \"comets\" that help visually connect the \"before\" and \"after\" state of components.\n\n![Scatter plot with paths connecting past points to their present counterparts](/img/featureMatrixTimeCompare_light.png#gh-light-mode-only)\n![Scatter plot with paths connecting past points to their present counterparts](/img/featureMatrixTimeCompare_dark.png#gh-dark-mode-only)\n\n```jsx\n<Chart {...chartProps}>\n {...chartComponents}\n <Scatter\n color=\"segment\"\n dimension=\"dauPercent\"\n lineType=\"period\"\n lineWidth={{\n value: 1,\n }}\n metric=\"countAvg\"\n opacity=\"period\"\n >\n {...scatterChildren}\n <ScatterPath groupBy={['event', 'segment']} opacity={0.2} pathWidth=\"trailSize\" />\n </Scatter>\n</Chart>\n```\n\n#### Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>color</td>\n <td>ColorValue</td>\n <td>'gray-500'</td>\n <td>The color of the path. Can be a css color value or a spectrum color name.</td>\n </tr>\n <tr>\n <td>groupBy</td>\n <td>string[]</td>\n <td>–</td>\n <td>List of keys that defines what data must be in common to draw a connecting path.<br/>For example, if groupBy=\\{['weightClass', 'type']} then each point with the same weight class and type will have a path drawn connecting them.</td>\n </tr>\n <tr>\n <td>pathWidth</td>\n <td>string | \\{value: PathWidth | number}</td>\n <td>\\{value: 'M'}</td>\n <td>The width of the path.<br/>If a string is provided, this string is the key in the data. Each value for this key in the provided data will map to a width from the path width scale.<br/>If an object with a value is provided, this will set the width for all paths.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>number</td>\n <td>0.5</td>\n <td>The fill opacity of the path.</td>\n </tr>\n </tbody>\n</table>\n"
801
+ "content": "The `Scatter` component is used to display scatter plots. Scatter plots use continuous data for both the x and y axes. They are most useful for comparing two continuous values across many different points.\n\n## Encoding\n\nThe `Scatter` component supports many different attributes for mapping data properties to visual representations.\n\n- `color`\n - Can be a categorical color scale for categorical mappings or a continuous color scale (sequential or divergent) for numerical mappings\n- `lineType`\n- `lineWidth`\n- `opacity`\n- `size`\n\n### Examples\n\nAll the following examples will use the same base chart code:\n\n```jsx\n<Chart data={data}>\n <Axis baseline grid position=\"bottom\" ticks title=\"Speed (normal)\" />\n <Axis baseline grid position=\"left\" ticks title=\"Handling (normal)\" />\n <Scatter dimension=\"speedNormal\" metric=\"handlingNormal\" />\n <Legend highlight position=\"right\" title=\"Weight class\" />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n#### Color\n\n```jsx\n...\n <Scatter {...scatterProps} color=\"weightClass\" />\n...\n```\n\n![Scatter plot with different colors based on weight class](/img/scatter_color_light.png#gh-light-mode-only)\n![Scatter plot with different colors based on weight class](/img/scatter_color_dark.png#gh-dark-mode-only)\n\n#### Continuous color scale\n\n```jsx\n...\n <Scatter {...scatterProps} color=\"weight\" colorScaleType=\"linear\" />\n...\n```\n\n![Scatter plot with different colors based on weight](/img/scatter_sequentialColor_light.png#gh-light-mode-only)\n![Scatter plot with different colors based on weight](/img/scatter_sequentialColor_dark.png#gh-dark-mode-only)\n\n#### Size\n\n```jsx\n...\n <Scatter {...scatterProps} size=\"weight\" />\n...\n```\n\n![Scatter plot with different symbol sizes based on weight](/img/scatter_size_light.png#gh-light-mode-only)\n![Scatter plot with different symbol sizes based on weight](/img/scatter_size_dark.png#gh-dark-mode-only)\n\n## Tooltips and Popovers\n\n`Scatter` supports `ChartTooltip` and `ChartPopover` like all other chart mark components.\n\n### Tooltip\n\n```jsx\n<Chart data={data}>\n <Axis\n baseline\n grid\n position=\"bottom\"\n ticks\n title=\"Speed (normal)\"\n />\n <Axis\n baseline\n grid\n position=\"left\"\n ticks\n title=\"Handling (normal)\"\n />\n <Scatter\n dimension=\"speedNormal\"\n metric=\"handlingNormal\"\n color=\"weightClass\"\n >\n <ChartTooltip>\n {\n (item) => (\n <Content>\n <Flex direction=\"column\">\n <div style={{ fontWeight: 'bold' }}>{(item.character as string[]).join(', ')}</div>\n <div>\n Speed (normal): {item.speedNormal}\n </div>\n <div>\n Handling (normal): {item.handlingNormal}\n </div>\n </Flex>\n </Content>\n )\n }\n </ChartTooltip>\n </Scatter>\n <Legend\n highlight\n position=\"right\"\n title=\"Weight class\"\n />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n![Scatter plot with a tooltip displayed on one of the points](/img/scatter_tooltip_light.png#gh-light-mode-only)\n![Scatter plot with a tooltip displayed on one of the points](/img/scatter_tooltip_dark.png#gh-dark-mode-only)\n\n## Trendlines\n\nThe `Trendline` component is fully supported by `Scatter`. To plot a trendline, simply pass the `Trendline` component into `Scatter` as a child.\n\n![Scatter plot with vertical and horizontal median lines](/img/featureMatrix_light.png#gh-light-mode-only)\n![Scatter plot with vertical and horizontal median lines](/img/featureMatrix_dark.png#gh-dark-mode-only)\n\n## Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>children</td>\n <td>ChartTooltip | ChartPopover | Trendline | ScatterAnnotation</td>\n <td>–</td>\n <td>Optional elements that can be rendered within the chart.</td>\n </tr>\n <tr>\n <td>color</td>\n <td>string | \\{value: ColorValue}</td>\n <td>'series'</td>\n <td>Symbol color.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a color from the color scale.<br/>If an object with a value is provided, this will set the color for all symbols.</td>\n </tr>\n <tr>\n <td>clip</td>\n <td>boolean</td>\n <td>false</td>\n <td>If set to true, inner plot content will be clipped at the plot borders rather than extending into the surrounding space.</td>\n </tr>\n <tr>\n <td>colorScaleType</td>\n <td>'linear' | 'ordinal'</td>\n <td>'linear'</td>\n <td>The scale type for the color scale. If the backing data for `color` is continuous (non-binned numerical data) then this should be `linear` which will calculate the color of the point based on the number in the data, using the linear color scale (color gradient).<br/>If the backing data is ordinal (ex. string data), then this should be 'ordinal' which will assign colors based on the order of the data passed in. There is no interpolation of color values in ordinal scales.</td>\n </tr>\n <tr>\n <td>dimension</td>\n <td>string</td>\n <td>'datetime'</td>\n <td>The key in the data that the metric is trended against. This is the x-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>lineType</td>\n <td>string | \\{value: LineType | number[]}</td>\n <td>–</td>\n <td>Scatter point line type (dasharray).<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale.<br/>\n If an object with a value is provided, this will set the line type for all symbols.</td>\n </tr>\n <tr>\n <td>lineWidth</td>\n <td>string | \\{value: LineWidth | number}</td>\n <td>–</td>\n <td>Scatter point border line width in pixels.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line width from the line widths scale.<br/>If an object with a value is provided, this will set the line width for all symbols.</td>\n </tr>\n <tr>\n <td>onMouseOver</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is hovered.</td>\n </tr>\n <tr>\n <td>onMouseOut</td>\n <td>function</td>\n <td>–</td>\n <td>Callback that will be run when a point is no longer hovered.</td>\n </tr>\n <tr>\n <td>metric</td>\n <td>string</td>\n <td>'value'</td>\n <td>The key in the data that is used for the value of the data point. this is the y-axis for a scatter plot.</td>\n </tr>\n <tr>\n <td>name</td>\n <td>string</td>\n <td>–</td>\n <td>Scatter name. Useful for if you need to traverse the chart object to find the scatter plot marks.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>string | \\{value: number}</td>\n <td>\\{value: 1}</td>\n <td>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacity scale.<br/>If an object with a value is provided, this will set the opacity for all symbols.</td>\n </tr>\n <tr>\n <td>size</td>\n <td>string | \\{value: SymbolSize | number}</td>\n <td>\\{value: 'M'}</td>\n <td>Scatter point symbol size.<br/>If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an size from the symbol size scale. <br/>If an object with a value is provided, this will set the size for all symbols.</td>\n </tr>\n </tbody>\n</table>\n\n### ScatterAnnotation\n\nThe `ScatterAnnotation` component can be passed into `Scatter` as a child. This allows you to add text labels directly on scatter plot points, making it easier to identify specific data points or highlight important information.\n\nThe component supports an `anchor` prop to define where annotations should be placed relative to their corresponding points. You can pass a single position or an array of positions. When an array is provided, each position is tried in order until one fits within the chart bounds without overlapping other annotations or points. **If a label cannot be placed without overlapping, it will not be displayed. This means scatter annotations should be considered \"nice to have\" supplemental information.**\n\n#### Example\n\n```jsx\n<Chart data={data}>\n <Axis baseline grid position=\"bottom\" ticks title=\"Speed (normal)\" />\n <Axis baseline grid position=\"left\" ticks title=\"Handling (normal)\" />\n <Scatter dimension=\"speedNormal\" metric=\"handlingNormal\" color=\"weightClass\">\n <ScatterAnnotation textKey=\"character\" anchor={['right', 'top', 'bottom', 'left']} />\n </Scatter>\n <Legend highlight position=\"right\" title=\"Weight class\" />\n <Title text=\"Mario Kart 8 Character Data\" />\n</Chart>\n```\n\n![Scatter plot with text annotations for each point](/img/scatterAnnotation_light.png#gh-light-mode-only)\n![Scatter plot with text annotations for each point](/img/scatterAnnotation_dark.png#gh-dark-mode-only)\n\n#### Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>anchor</td>\n <td>LabelAnchor | LabelAnchor[]</td>\n <td>['right', 'top', 'bottom', 'left']</td>\n <td>Specifies where to position the annotation relative to the data point. Possible values include 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', and 'bottom-right'.<br/>When an array is provided, each position is tried in order until one fits within the chart bounds and doesn't overlap with other annotations or points. If no position fits, the annotation is not displayed. This is true even if only one position is supplied.</td>\n </tr>\n <tr>\n <td>textKey</td>\n <td>string</td>\n <td>'annotation'</td>\n <td>The key in the data that contains the text to display for each annotation.</td>\n </tr>\n </tbody>\n</table>\n\n## Advanced\n\n### ScatterPath\n\nThe `ScatterPath` component can be passed into `Scatter` as a child. This allows you to draw a continuous path connecting points on the scatter plot. The width of the path can vary from point to point.\n\n#### Example\n\nThis plot is using the `ScatterPath` component to draw \"comets\" that help visually connect the \"before\" and \"after\" state of components.\n\n![Scatter plot with paths connecting past points to their present counterparts](/img/featureMatrixTimeCompare_light.png#gh-light-mode-only)\n![Scatter plot with paths connecting past points to their present counterparts](/img/featureMatrixTimeCompare_dark.png#gh-dark-mode-only)\n\n```jsx\n<Chart {...chartProps}>\n {...chartComponents}\n <Scatter\n color=\"segment\"\n dimension=\"dauPercent\"\n lineType=\"period\"\n lineWidth={{\n value: 1,\n }}\n metric=\"countAvg\"\n opacity=\"period\"\n >\n {...scatterChildren}\n <ScatterPath groupBy={['event', 'segment']} opacity={0.2} pathWidth=\"trailSize\" />\n </Scatter>\n</Chart>\n```\n\n#### Props\n\n<table>\n <thead>\n <tr>\n <th>name</th>\n <th>type</th>\n <th>default</th>\n <th>description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>color</td>\n <td>ColorValue</td>\n <td>'gray-500'</td>\n <td>The color of the path. Can be a css color value or a spectrum color name.</td>\n </tr>\n <tr>\n <td>groupBy</td>\n <td>string[]</td>\n <td>–</td>\n <td>List of keys that defines what data must be in common to draw a connecting path.<br/>For example, if groupBy=\\{['weightClass', 'type']} then each point with the same weight class and type will have a path drawn connecting them.</td>\n </tr>\n <tr>\n <td>pathWidth</td>\n <td>string | \\{value: PathWidth | number}</td>\n <td>\\{value: 'M'}</td>\n <td>The width of the path.<br/>If a string is provided, this string is the key in the data. Each value for this key in the provided data will map to a width from the path width scale.<br/>If an object with a value is provided, this will set the width for all paths.</td>\n </tr>\n <tr>\n <td>opacity</td>\n <td>number</td>\n <td>0.5</td>\n <td>The fill opacity of the path.</td>\n </tr>\n </tbody>\n</table>\n"
802
802
  },
803
803
  {
804
804
  "id": "developers/DeveloperDocs",
package/dist/index.js CHANGED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-charts/mcp",
3
- "version": "0.1.0",
3
+ "version": "1.26.0",
4
4
  "description": "MCP Server for React Spectrum Charts documentation",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",