@arcgis/charts-components 4.34.0-next.1 → 4.34.0-next.100

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-05-23T04:45:22",
+  "timestamp": "2025-08-15T04:46:30",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.1",
+    "version": "4.34.0-next.100",
     "typescriptVersion": "5.8.3"
   },
   "schemaVersion": "1.0.0",
@@ -16,7 +16,7 @@
           "customElement": true,
           "name": "ArcgisChart",
           "tagName": "arcgis-chart",
-          "description": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.",
+          "description": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -27,7 +27,7 @@
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--bar-chart&singleStory=true"
             },
             {
-              "description": "Box Plot\nBox plots visualize and compares the distribution and central tendency of numeric values through their quartiles.",
+              "description": "Box Plot\nBox plots visualize and compare the distribution and central tendency of numeric values through their quartiles.",
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--box-plot&singleStory=true"
             },
             {
@@ -109,6 +109,32 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "allowUsingObjectIdStat",
+              "description": "Whether to allow the object id to be used as a statistic other than COUNT.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "attribute": "allow-using-object-id-stat",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{boolean | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "autoDisposeChart",
@@ -135,6 +161,65 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "autoInverseDataLabelTextColor",
+              "description": "When `true`, the data label text color is automatically inverted based on the data label background color.\nFor example if the data label is dark, and it's on top of a dark color series area, the text color will eventually\nbe set to either the chart's background color or white.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "attribute": "auto-inverse-data-label-text-color",
+              "docsTags": [
+                {
+                  "name": "remarks",
+                  "text": "This feature is currently only available for bar chart."
+                },
+                {
+                  "name": "type",
+                  "text": "{boolean | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "chartIndex",
+              "description": "The index of the chart to be rendered from the layer. Must be used in conjunction with the `layerItemId` or `layer` property.\n\nIf a `layer` or `layerItemId` is set without `chartIndex`, the first chart in the layer will be rendered.\n\nIf the `chartIndex` is out of bounds, the first chart in the layer will be rendered and a warning event will be emitted.",
+              "type": {
+                "text": "number",
+                "values": [
+                  {
+                    "type": "number"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "attribute": "chart-index",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "example",
+                  "text": "<arcgis-chart layer-item-id=\"05e015c5f0314db9a487a9b46cb37eca\" chart-index=\"2\"></arcgis-chart>"
+                },
+                {
+                  "name": "type",
+                  "text": "{number | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "chartLimits",
@@ -247,7 +332,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChart = document.createElement(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\narcgisChart.componentOnReady().then(() => {\n  console.log(\"arcgis-chart is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChart = document.querySelector(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\nawait arcgisChart.componentOnReady();\nconsole.log(\"arcgis-chart is ready to go!\");\n```"
                 }
               ]
             },
@@ -416,6 +501,33 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "displaySettings",
+              "description": "Used to set the options available to handle messages displayed on the chart.",
+              "type": {
+                "text": "DisplaySettings",
+                "references": [
+                  {
+                    "name": "DisplaySettings",
+                    "module": "dist/chart-rendering/common/interfaces.d.ts",
+                    "start": 0,
+                    "end": 15
+                  }
+                ]
+              },
+              "default": "undefined",
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{DisplaySettings | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "enableConfiguration",
@@ -589,7 +701,7 @@
               "docsTags": [
                 {
                   "name": "param",
-                  "text": "options The options to use when exporting the data.\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
+                  "text": "options The options to use when exporting the data.\n\nNOTE: This method won't work for scatterplot series. The support charts for this method are:\n- Bar chart\n- Line chart\n- Combo bar-line chart\n- Box plot\n- Histogram\n- Pie chart\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`.\n- `locale` - The locale to use when formatting the CSV file. Default is `en`.\n* * Locale supported are: \"ar\", \"ar-u-nu-latn\", \"bs\", \"bg\", \"ca\", \"cs\", \"da\", \"de\", \"el\", \"en\", \"en-US\", \"es\", \"et\", \"fi\", \"fr\", \"he\", \"hr\", \"hu\", \"id\", \"it\", \"ja\", \"ko\", \"lt\", \"lv\", \"no\", \"nl\", \"pl\", \"pt-BR\", \"pt-PT\", \"ro\", \"ru\", \"sr\", \"sl\", \"sk\", \"sv\", \"th\", \"tr\", \"uk\", \"vi\", \"zh-CN\", \"zh-HK\", \"zh-TW\""
                 },
                 {
                   "name": "category",
@@ -1042,6 +1154,36 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "layerItemId",
+              "description": "Layer item ID associated with the chart to be rendered. Can be used in conjunction with the `chartIndex` property.\n\nIf `layerItemId` is set without `chartIndex`, the first chart in the layer will be rendered.",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "attribute": "layer-item-id",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "example",
+                  "text": "<arcgis-chart layer-item-id=\"05e015c5f0314db9a487a9b46cb37eca\" chart-index=\"2\"></arcgis-chart>"
+                },
+                {
+                  "name": "type",
+                  "text": "{string | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "layerRendererChangePolicy",
@@ -1200,33 +1342,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "messageOptions",
-              "description": "Used to set the options available to handle specific messages displayed by the chart.",
-              "type": {
-                "text": "MessageOptions",
-                "references": [
-                  {
-                    "name": "MessageOptions",
-                    "module": "dist/chart-rendering/common/interfaces.d.ts",
-                    "start": 0,
-                    "end": 14
-                  }
-                ]
-              },
-              "default": "undefined",
-              "docsTags": [
-                {
-                  "name": "type",
-                  "text": "{MessageOptions | undefined}"
-                },
-                {
-                  "name": "category",
-                  "text": "Public"
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "model",
@@ -1243,7 +1358,7 @@
                   {
                     "name": "WebChart",
                     "package": "@arcgis/charts-spec",
-                    "module": "types/web-chart.d.ts",
+                    "module": "web-chart.d.ts",
                     "start": 13,
                     "end": 21
                   }
@@ -1385,6 +1500,33 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "querySettings",
+              "description": "Used to set the options available to query data for the chart.",
+              "type": {
+                "text": "QuerySettings",
+                "references": [
+                  {
+                    "name": "QuerySettings",
+                    "module": "dist/chart-rendering/common/interfaces.d.ts",
+                    "start": 0,
+                    "end": 13
+                  }
+                ]
+              },
+              "default": "undefined",
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{QuerySettings | undefined}"
+                },
+                {
+                  "name": "category",
+                  "text": "Public"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "queueChartCreation",
@@ -2166,6 +2308,20 @@
               "default": "undefined",
               "fieldName": "actionMode"
             },
+            {
+              "name": "allow-using-object-id-stat",
+              "description": "Whether to allow the object id to be used as a statistic other than COUNT.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "fieldName": "allowUsingObjectIdStat"
+            },
             {
               "name": "auto-dispose-chart",
               "description": "Auto-disposes the chart when a new one is created in the same container.",
@@ -2180,6 +2336,34 @@
               "default": "undefined",
               "fieldName": "autoDisposeChart"
             },
+            {
+              "name": "auto-inverse-data-label-text-color",
+              "description": "When `true`, the data label text color is automatically inverted based on the data label background color.\nFor example if the data label is dark, and it's on top of a dark color series area, the text color will eventually\nbe set to either the chart's background color or white.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "fieldName": "autoInverseDataLabelTextColor"
+            },
+            {
+              "name": "chart-index",
+              "description": "The index of the chart to be rendered from the layer. Must be used in conjunction with the `layerItemId` or `layer` property.\n\nIf a `layer` or `layerItemId` is set without `chartIndex`, the first chart in the layer will be rendered.\n\nIf the `chartIndex` is out of bounds, the first chart in the layer will be rendered and a warning event will be emitted.",
+              "type": {
+                "text": "number",
+                "values": [
+                  {
+                    "type": "number"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "fieldName": "chartIndex"
+            },
             {
               "name": "component-version",
               "description": "Whether to use the stable version of the component or the beta version.",
@@ -2447,6 +2631,20 @@
               "default": "\"refresh\"",
               "fieldName": "layerFilterChangePolicy"
             },
+            {
+              "name": "layer-item-id",
+              "description": "Layer item ID associated with the chart to be rendered. Can be used in conjunction with the `chartIndex` property.\n\nIf `layerItemId` is set without `chartIndex`, the first chart in the layer will be rendered.",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "undefined",
+              "fieldName": "layerItemId"
+            },
             {
               "name": "layer-renderer-change-policy",
               "description": "Allows the chart to update automatically when the layer's renderer changes.\nApplies when the color match feature is enabled.",
@@ -2755,6 +2953,27 @@
                 }
               ]
             },
+            {
+              "name": "arcgisChartNotFoundWarning",
+              "description": "Event triggered when the chart is not found for the given `chartIndex` property.",
+              "type": {
+                "text": "string",
+                "values": [
+                  {
+                    "type": "string"
+                  }
+                ]
+              },
+              "docsTags": [
+                {
+                  "name": "type",
+                  "text": "{EventEmitter<string>}"
+                },
+                {
+                  "name": "event"
+                }
+              ]
+            },
             {
               "name": "arcgisConfigChange",
               "description": "Event triggered when the chart config is changed",
@@ -2776,28 +2995,28 @@
                   {
                     "name": "WebChartBoxPlotDataItem",
                     "package": "@arcgis/charts-spec",
-                    "module": "types/data-source.d.ts",
+                    "module": "data-source.d.ts",
                     "start": 0,
                     "end": 23
                   },
                   {
                     "name": "WebChartGenericDataItem",
                     "package": "@arcgis/charts-spec",
-                    "module": "types/data-source.d.ts",
+                    "module": "data-source.d.ts",
                     "start": 26,
                     "end": 49
                   },
                   {
                     "name": "WebChartHistogramDataItem",
                     "package": "@arcgis/charts-spec",
-                    "module": "types/data-source.d.ts",
+                    "module": "data-source.d.ts",
                     "start": 52,
                     "end": 77
                   },
                   {
                     "name": "WebChartScatterplotDataItem",
                     "package": "@arcgis/charts-spec",
-                    "module": "types/data-source.d.ts",
+                    "module": "data-source.d.ts",
                     "start": 80,
                     "end": 107
                   }
@@ -2875,7 +3094,7 @@
               "name": "arcgisNoRenderPropChange",
               "description": "Event triggered when a no-render prop is changed",
               "type": {
-                "text": "{\n    propName: string;\n    value: boolean | WebChartLegendPositions;\n    model: ChartModel | undefined;\n}"
+                "text": "{\n    propName: string;\n    value: number | boolean | MapView | SceneView | WebChartLegendPositions | undefined;\n    model: ChartModel | undefined;\n}"
               },
               "docsTags": [
                 {
@@ -2984,7 +3203,7 @@
           "slots": [
             {
               "name": "action-bar",
-              "description": "A slot for adding charts-action-bar component or calcite-action-bar."
+              "description": "Slot for adding a `charts-action-bar` component or `calcite-action-bar`."
             }
           ]
         }
@@ -3009,7 +3228,7 @@
           "customElement": true,
           "name": "ArcgisChartsActionBar",
           "tagName": "arcgis-charts-action-bar",
-          "description": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.",
+          "description": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -3095,7 +3314,7 @@
               "name": "chartType",
               "description": "Chart type used to determine which default actions to display.",
               "type": {
-                "text": "\"barSeries\" | \"boxPlotSeries\" | \"comboLineAndBarSeries\" | \"gaugeSeries\" | \"histogramSeries\" | \"lineSeries\" | \"pieSeries\" | \"radarSeries\" | \"scatterSeries\"",
+                "text": "\"barSeries\" | \"boxPlotSeries\" | \"comboLineAndBarSeries\" | \"gaugeSeries\" | \"heatSeries\" | \"histogramSeries\" | \"lineSeries\" | \"pieSeries\" | \"radarSeries\" | \"scatterSeries\"",
                 "values": [
                   {
                     "value": "barSeries",
@@ -3113,6 +3332,10 @@
                     "value": "gaugeSeries",
                     "type": "string"
                   },
+                  {
+                    "value": "heatSeries",
+                    "type": "string"
+                  },
                   {
                     "value": "histogramSeries",
                     "type": "string"
@@ -3264,7 +3487,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChartsActionBar = document.createElement(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\narcgisChartsActionBar.componentOnReady().then(() => {\n  console.log(\"arcgis-charts-action-bar is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChartsActionBar = document.querySelector(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\nawait arcgisChartsActionBar.componentOnReady();\nconsole.log(\"arcgis-charts-action-bar is ready to go!\");\n```"
                 }
               ]
             },
@@ -3273,7 +3496,7 @@
               "name": "disableCSVExportForChartTypes",
               "description": "The CSV export action is disabled for certain chart types.\n\nModify this property to add or remove chart types from the list of disabled types.",
               "type": {
-                "text": "Array<\"number\" | \"cursorCrosshair\" | \"chartText\" | \"category\" | \"date\" | \"chartAxis\" | \"chartLegend\" | \"chartOverlay\" | \"sizeScale\" | \"chartOverlays\" | \"scatterSeries\" | \"chart\" | \"gaugeAxisTick\" | \"gaugeNeedle\" | \"chartGuide\" | \"pieSeries\" | \"pieTick\" | \"gaugeSeries\" | \"lineSeries\" | \"barSeries\" | \"histogramSeries\" | \"boxPlotSeries\" | \"radarSeries\" | \"comboLineAndBarSeries\" | \"buffer\">",
+                "text": "Array<\"number\" | \"cursorCrosshair\" | \"chartText\" | \"category\" | \"date\" | \"chartAxis\" | \"chartLegend\" | \"chartOverlay\" | \"chart\" | \"sizeScale\" | \"chartOverlays\" | \"scatterSeries\" | \"gaugeAxisTick\" | \"gaugeNeedle\" | \"chartGuide\" | \"pieSeries\" | \"pieTick\" | \"gaugeSeries\" | \"lineSeries\" | \"barSeries\" | \"histogramSeries\" | \"boxPlotSeries\" | \"radarSeries\" | \"comboLineAndBarSeries\" | \"heatSeries\" | \"buffer\" | \"calendarDateParts\">",
                 "references": [
                   {
                     "name": "Array",
@@ -3297,32 +3520,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "disabledExportAction",
-              "description": "When `true`, the export action is disabled.",
-              "type": {
-                "text": "boolean",
-                "values": [
-                  {
-                    "type": "boolean"
-                  }
-                ]
-              },
-              "default": "false",
-              "attribute": "disabled-export-action",
-              "reflects": true,
-              "docsTags": [
-                {
-                  "name": "category",
-                  "text": "Public"
-                },
-                {
-                  "name": "type",
-                  "text": "{boolean}"
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "editChartState",
@@ -3437,6 +3634,37 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "exportActionState",
+              "description": "When disabled, interaction with the export action is prevented and the component is displayed with lower opacity.",
+              "type": {
+                "text": "\"disabled\" | \"enabled\"",
+                "values": [
+                  {
+                    "value": "disabled",
+                    "type": "string"
+                  },
+                  {
+                    "value": "enabled",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"enabled\"",
+              "attribute": "export-action-state",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "category",
+                  "text": "Public"
+                },
+                {
+                  "name": "type",
+                  "text": "{ActionState}"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "exportAsCSVState",
@@ -3842,7 +4070,7 @@
               "name": "hiddenActions",
               "description": "Holds a list of actions to hide from the action bar.\n\n**Note:** The edit chart action is hidden by default. To show it, remove its value from this array.",
               "type": {
-                "text": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+                "text": "Array<\"zoom\" | \"editChart\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"exportAsImage\" | \"exportAsCSV\">",
                 "references": [
                   {
                     "name": "Array",
@@ -4342,7 +4570,7 @@
               "name": "chart-type",
               "description": "Chart type used to determine which default actions to display.",
               "type": {
-                "text": "\"barSeries\" | \"boxPlotSeries\" | \"comboLineAndBarSeries\" | \"gaugeSeries\" | \"histogramSeries\" | \"lineSeries\" | \"pieSeries\" | \"radarSeries\" | \"scatterSeries\"",
+                "text": "\"barSeries\" | \"boxPlotSeries\" | \"comboLineAndBarSeries\" | \"gaugeSeries\" | \"heatSeries\" | \"histogramSeries\" | \"lineSeries\" | \"pieSeries\" | \"radarSeries\" | \"scatterSeries\"",
                 "values": [
                   {
                     "value": "barSeries",
@@ -4360,6 +4588,10 @@
                     "value": "gaugeSeries",
                     "type": "string"
                   },
+                  {
+                    "value": "heatSeries",
+                    "type": "string"
+                  },
                   {
                     "value": "histogramSeries",
                     "type": "string"
@@ -4437,20 +4669,6 @@
               "default": "\"inactive\"",
               "fieldName": "clearSelectionToggle"
             },
-            {
-              "name": "disabled-export-action",
-              "description": "When `true`, the export action is disabled.",
-              "type": {
-                "text": "boolean",
-                "values": [
-                  {
-                    "type": "boolean"
-                  }
-                ]
-              },
-              "default": "false",
-              "fieldName": "disabledExportAction"
-            },
             {
               "name": "edit-chart-state",
               "description": "When disabled, interaction with the edit chart action is prevented and the component is displayed with lower opacity.",
@@ -4517,6 +4735,25 @@
               "default": "false",
               "fieldName": "expanded"
             },
+            {
+              "name": "export-action-state",
+              "description": "When disabled, interaction with the export action is prevented and the component is displayed with lower opacity.",
+              "type": {
+                "text": "\"disabled\" | \"enabled\"",
+                "values": [
+                  {
+                    "value": "disabled",
+                    "type": "string"
+                  },
+                  {
+                    "value": "enabled",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"enabled\"",
+              "fieldName": "exportActionState"
+            },
             {
               "name": "export-as-csv-state",
               "description": "When disabled, interaction with the download CSV is prevented and the component is displayed with lower opacity.",