@arcgis/charts-components 5.2.0-next.73 → 5.2.0-next.74

package/dist/chunks/negative-values-stacked-to-baseline.js

@@ -1,19 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { s as c, a as k, g as b, b as n } from "./series.js";
+import { s as c, a as k, g as b, b as v } from "./series.js";
 import { _ as m } from "./index.js";
 import { bt as i, bB as a } from "./index2.js";
-import { C as v, m as y } from "./model-setter.js";
-const _ = (s, e) => {
+import { C as n, m as h } from "./model-setter.js";
+const d = (s, e) => {
   if (i(e.series[s]) || a(e.series[s]))
     return b(e.series[s]);
-}, f = (s, e, r) => {
+}, N = (s, e, r) => {
   (i(r.series[e]) || a(r.series[e])) && c(s, r.series[e]);
-}, O = (s, e) => {
+}, _ = (s, e) => {
   if (i(e.series[s]) || a(e.series[s]))
-    return n(e.series[s]);
-}, j = (s, e, r) => {
+    return v(e.series[s]);
+}, O = (s, e, r) => {
   (i(r.series[e]) || a(r.series[e])) && k(s, r.series[e]);
-}, W = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].markerSymbol?.color : void 0, d = (s, e, r) => {
+}, j = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].markerSymbol?.color : void 0, W = (s, e, r) => {
   if (i(r.series[e]) || a(r.series[e])) {
     const t = r.series[e];
     t.markerSymbol === void 0 && (t.markerSymbol = m()), t.markerSymbol.color = s;
@@ -28,29 +28,33 @@ const _ = (s, e) => {
     const t = r.series[e];
     t.markerSymbol === void 0 && (t.markerSymbol = m()), t.markerSymbol.size = s;
   }
-}, D = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series?.[s]?.lineSmoothed ?? !1 : !1, F = (s) => {
+}, D = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series?.[s]?.lineSmoothed ?? !1 : !1, E = (s) => {
   const { smoothed: e, seriesIndex: r, config: t } = s;
   (i(t.series[r]) || a(t.series[r])) && (t.series[r].lineSmoothed = e);
-}, q = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].showArea ?? !1 : !1, R = (s) => {
+}, F = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].showArea ?? !1 : !1, q = (s) => {
   const { visible: e, seriesIndex: r, config: t } = s;
-  (i(t.series[r]) || a(t.series[r])) && (t.series[r].showArea = e);
-}, E = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].markerVisible ?? !0 : !1, G = (s) => {
+  [r !== void 0 ? t.series?.[r] : t.series].flat().forEach((o) => {
+    o !== void 0 && (i(o) || a(o)) && (o.showArea = e);
+  });
+}, R = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].markerVisible ?? !0 : !1, G = (s) => {
   const { visible: e, seriesIndex: r, config: t } = s;
-  (i(t.series[r]) || a(t.series[r])) && (t.series[r].markerVisible = e);
+  [r !== void 0 ? t.series?.[r] : t.series].flat().forEach((o) => {
+    o !== void 0 && (i(o) || a(o)) && (o.markerVisible = e);
+  });
 }, H = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].areaColor : void 0, J = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series?.[s]?.connectLines : void 0, K = (s) => {
   const { connect: e, seriesIndex: r, config: t } = s;
   (i(t.series[r]) || a(t.series[r])) && (t.series[r].connectLines = e);
 };
-var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, L = (s, e, r, t) => {
+var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, L = (s, e, r, t) => {
   for (var o = u(e, r), l = s.length - 1, S; l >= 0; l--)
     (S = s[l]) && (o = S(e, r, o) || o);
-  return o && h(e, r, o), o;
+  return o && y(e, r, o), o;
 };
 const V = (s, e) => i(e.series[s]) || a(e.series[s]) ? e.series[s].stackNegativeValuesToBaseline ?? !0 : !1, p = (s) => {
   const { stackNegativeValuesToBaseline: e, seriesIndex: r, config: t } = s;
   (i(t.series[r]) || a(t.series[r])) && (t.series[r].stackNegativeValuesToBaseline = e);
 };
-class C extends v {
+class f extends n {
   /**
    * Specify how negative values are treated in stacked series.
    *
@@ -70,27 +74,27 @@ class C extends v {
   }
 }
 L([
-  y
-], C.prototype, "setNegativeValuesStackedToBaseline");
+  h
+], f.prototype, "setNegativeValuesStackedToBaseline");
 export {
-  C as W,
-  f as a,
-  j as b,
+  f as W,
+  N as a,
+  O as b,
   w as c,
   P as d,
-  O as e,
-  W as f,
-  _ as g,
+  _ as e,
+  j as f,
+  d as g,
   A as h,
   z as i,
   D as j,
-  F as k,
+  E as k,
   J as l,
   K as m,
-  q as n,
-  R as o,
-  E as p,
+  F as n,
+  q as o,
+  R as p,
   G as q,
   H as r,
-  d as s
+  W as s
 };

package/dist/chunks/x-bounds.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { C as _ } from "./chart-model.js";
 import { cloneDeep as h } from "lodash-es";
-import { G as g } from "./common.js";
-import { i as c } from "./rest-js-object-literals.js";
+import { G as c } from "./common.js";
+import { i as g } from "./rest-js-object-literals.js";
 import { u as x } from "./chart-object-literals.js";
 import { ai as S, M as L, T as b, a0 as T } from "./index.js";
-import { M as C, bG as M, bF as X } from "./index2.js";
-import { m as a, C as f } from "./model-setter.js";
+import { M as X, bG as C, bF as M } from "./index2.js";
+import { m as r, C as f } from "./model-setter.js";
 import { e as B, f as A } from "./utils2.js";
-import { l as p, s as y, f as O } from "./utils.js";
+import { l as y, s as v, f as O } from "./utils.js";
 const P = (t) => {
   for (const e of t.axes ?? [])
     for (const i of e?.guides ?? [])
@@ -24,32 +24,34 @@ const P = (t) => {
 function d(t) {
   return {
     ...t,
-    axis: t.orientation === g.X ? t.config.axes?.[0] : t.config.axes?.[1],
+    axis: t.orientation === c.X ? t.config.axes?.[0] : t.config.axes?.[1],
     index: t.index ?? 0,
-    orientation: t.orientation ?? g.Y
+    orientation: t.orientation ?? c.Y
   };
 }
 const V = (t) => {
   const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.visible ?? !0;
-}, R = (t) => {
-  const { visible: e, axis: i, index: s } = d(t);
-  i?.guides?.[s] !== void 0 && (i.guides[s].visible = e);
-}, m = (t) => {
-  const e = C(t.start, t.end);
-  M(t.style) && e === c.SFS ? t.style = { type: c.SFS, color: t.style.color } : X(t.style) && e === c.SLS && (t.style = { type: c.SLS, color: t.style.color });
 }, E = (t) => {
+  const i = (t.orientation ?? c.Y) === c.X ? t.config.axes?.[0] : t.config.axes?.[1];
+  t.index !== void 0 ? i?.guides?.[t.index] !== void 0 && (i.guides[t.index].visible = t.visible) : i?.guides?.forEach((s) => {
+    s.visible = t.visible;
+  });
+}, p = (t) => {
+  const e = X(t.start, t.end);
+  C(t.style) && e === g.SFS ? t.style = { type: g.SFS, color: t.style.color } : M(t.style) && e === g.SLS && (t.style = { type: g.SLS, color: t.style.color });
+}, R = (t) => {
   const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.start ?? null;
 }, F = (t) => {
   const { start: e, axis: i, index: s } = d(t);
-  i?.guides?.[s] !== void 0 && (i.guides[s].start = e, m(i.guides[s]));
+  i?.guides?.[s] !== void 0 && (i.guides[s].start = e, p(i.guides[s]));
 }, w = (t) => {
   const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.end;
 }, W = (t) => {
   const { end: e, axis: i, index: s } = d(t);
-  i?.guides?.[s] !== void 0 && (i.guides[s].end = e, m(i.guides[s]));
+  i?.guides?.[s] !== void 0 && (i.guides[s].end = e, p(i.guides[s]));
 }, j = (t) => {
   const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.name;
@@ -62,10 +64,10 @@ const V = (t) => {
 }, I = (t) => {
   const { labelText: e, axis: i, index: s } = d(t), o = i?.guides?.[s]?.label ?? S(e, L(b.GuideLabel), b.GuideLabel);
   i?.guides?.[s] !== void 0 && (i.guides[s].label = { ...o, text: e });
-}, U = (t) => {
+}, Y = (t) => {
   const { axis: e, index: i } = d(t);
   return e?.guides?.[i]?.above ?? !1;
-}, Y = (t) => {
+}, U = (t) => {
   const { above: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].above = e);
 }, q = (t) => {
@@ -74,20 +76,20 @@ const V = (t) => {
 }, z = (t) => {
   const { style: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].style = e);
-}, ve = (t) => {
-  const { config: e, name: i, index: s, orientation: o } = t, n = o === g.X ? e.axes?.[0] : e.axes?.[1];
+}, me = (t) => {
+  const { config: e, name: i, index: s, orientation: o } = t, n = o === c.X ? e.axes?.[0] : e.axes?.[1];
   if (n !== void 0) {
     n.guides = n.guides ?? [];
-    const r = {
+    const a = {
       type: x.Guide,
       name: i,
       start: n.valueFormat.type === x.DateAxisFormat ? "" : 0,
       style: T()
     };
-    s !== void 0 && s < n.guides.length ? n.guides.splice(s, 0, r) : n.guides.push(r);
+    s !== void 0 && s < n.guides.length ? n.guides.splice(s, 0, a) : n.guides.push(a);
   }
 }, Ge = (t) => {
-  const { config: e, index: i, orientation: s } = t, o = s === g.X ? e.axes?.[0] : e.axes?.[1];
+  const { config: e, index: i, orientation: s } = t, o = s === c.X ? e.axes?.[0] : e.axes?.[1];
   o?.guides !== void 0 && (i !== void 0 && i < o.guides.length ? o.guides.splice(i, 1) : o.guides.pop());
 }, H = (t) => {
   const { axis: e, index: i } = d(t);
@@ -96,12 +98,12 @@ const V = (t) => {
   const { reverseColor: e, axis: i, index: s } = d(t);
   i?.guides?.[s] !== void 0 && (i.guides[s].tooltipReverseColor = e);
 };
-var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
-  for (var o = Q(e, i), n = t.length - 1, r; n >= 0; n--)
-    (r = t[n]) && (o = r(e, i, o) || o);
+var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, l = (t, e, i, s) => {
+  for (var o = Q(e, i), n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (o = a(e, i, o) || o);
   return o && K(e, i, o), o;
 };
-class l extends _ {
+class u extends _ {
   /**
    * The guide labels text symbol (font, color, style).
    */
@@ -121,7 +123,7 @@ class l extends _ {
     return V({ config: this._config, index: e, orientation: i });
   }
   setGuideVisibility(e, i, s) {
-    R({ visible: e, config: this._config, index: i, orientation: s });
+    E({ visible: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets the start value of a guide.
@@ -130,7 +132,7 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideStart(e, i) {
-    return E({ config: this._config, index: e, orientation: i });
+    return R({ config: this._config, index: e, orientation: i });
   }
   setGuideStart(e, i, s) {
     F({ start: e, config: this._config, index: i, orientation: s });
@@ -178,10 +180,10 @@ class l extends _ {
    * @param orientation - Default `y`. The axis orientation of the guide.
    */
   getGuideAbove(e, i) {
-    return U({ config: this._config, index: e, orientation: i });
+    return Y({ config: this._config, index: e, orientation: i });
   }
   setGuideAbove(e, i, s) {
-    Y({ above: e, config: this._config, index: i, orientation: s });
+    U({ above: e, config: this._config, index: i, orientation: s });
   }
   /**
    * Gets the guide style.
@@ -208,33 +210,33 @@ class l extends _ {
     J({ reverseColor: e, config: this._config, index: i, orientation: s });
   }
 }
-u([
-  a
-], l.prototype, "guideLabelsSymbol");
-u([
-  a
-], l.prototype, "setGuideVisibility");
-u([
-  a
-], l.prototype, "setGuideStart");
-u([
-  a
-], l.prototype, "setGuideEnd");
-u([
-  a
-], l.prototype, "setGuideName");
-u([
-  a
-], l.prototype, "setGuideLabelText");
-u([
-  a
-], l.prototype, "setGuideAbove");
-u([
-  a
-], l.prototype, "setGuideStyle");
-u([
-  a
-], l.prototype, "setTooltipReverseColor");
+l([
+  r
+], u.prototype, "guideLabelsSymbol");
+l([
+  r
+], u.prototype, "setGuideVisibility");
+l([
+  r
+], u.prototype, "setGuideStart");
+l([
+  r
+], u.prototype, "setGuideEnd");
+l([
+  r
+], u.prototype, "setGuideName");
+l([
+  r
+], u.prototype, "setGuideLabelText");
+l([
+  r
+], u.prototype, "setGuideAbove");
+l([
+  r
+], u.prototype, "setGuideStyle");
+l([
+  r
+], u.prototype, "setTooltipReverseColor");
 class _e extends f {
   /**
    * Whether the x-axis labels are visible.
@@ -249,14 +251,14 @@ class _e extends f {
   }
 }
 var Z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, ee = (t, e, i, s) => {
-  for (var o = k(e, i), n = t.length - 1, r; n >= 0; n--)
-    (r = t[n]) && (o = r(e, i, o) || o);
+  for (var o = k(e, i), n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (o = a(e, i, o) || o);
   return o && Z(e, i, o), o;
 };
-const ie = (t) => p({ config: t, axisIndex: 0, isMax: !0 }), te = (t, e) => {
-  y({ config: t, value: e, axisIndex: 0, isMax: !0 });
+const ie = (t) => y({ config: t, axisIndex: 0, isMax: !0 }), te = (t, e) => {
+  v({ config: t, value: e, axisIndex: 0, isMax: !0 });
 };
-class v extends f {
+class m extends f {
   /**
    * Maximum bound set for the x-axis.
    *
@@ -270,15 +272,15 @@ class v extends f {
   }
 }
 ee([
-  a
-], v.prototype, "maxXBound");
+  r
+], m.prototype, "maxXBound");
 var se = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, ne = (t, e, i, s) => {
-  for (var o = oe(e, i), n = t.length - 1, r; n >= 0; n--)
-    (r = t[n]) && (o = r(e, i, o) || o);
+  for (var o = oe(e, i), n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (o = a(e, i, o) || o);
   return o && se(e, i, o), o;
 };
-const de = (t) => p({ config: t, axisIndex: 0, isMax: !1 }), re = (t, e) => {
-  y({ config: t, value: e, axisIndex: 0, isMax: !1 });
+const de = (t) => y({ config: t, axisIndex: 0, isMax: !1 }), ae = (t, e) => {
+  v({ config: t, value: e, axisIndex: 0, isMax: !1 });
 };
 class G extends f {
   /**
@@ -290,19 +292,19 @@ class G extends f {
     return de(this._config);
   }
   set minXBound(e) {
-    re(this._config, e);
+    ae(this._config, e);
   }
 }
 ne([
-  a
+  r
 ], G.prototype, "minXBound");
-class ae extends f {
+class re extends f {
 }
-O(ae, [v, G]);
+O(re, [m, G]);
 export {
-  l as M,
+  u as M,
   _e as W,
-  ae as a,
-  ve as b,
+  re as a,
+  me as b,
   Ge as d
 };

package/dist/components/arcgis-chart/customElement.d.ts

@@ -188,6 +188,10 @@ export abstract class ArcgisChart extends LitElement {
               twoTemporalSeriesLineCountCannotExceedLimit: string;
               threePlusTemporalSeriesLineCountCannotExceedLimit: string;
               lineSeriesCountCannotExceedLimit: string;
+              uniqueSeriesRadarCountCannotExceedLimit: string;
+              twoSeriesRadarCountCannotExceedLimit: string;
+              threePlusSeriesRadarCountCannotExceedLimit: string;
+              radarSeriesCountCannotExceedLimit: string;
               uniqueSeriesBoxCountCannotExceedLimit: string;
               twoSeriesBoxCountCannotExceedLimit: string;
               threePlusBoxLineCountCannotExceedLimit: string;
@@ -455,6 +459,10 @@ export abstract class ArcgisChart extends LitElement {
               twoTemporalSeriesLineCountCannotExceedLimit: string;
               threePlusTemporalSeriesLineCountCannotExceedLimit: string;
               lineSeriesCountCannotExceedLimit: string;
+              uniqueSeriesRadarCountCannotExceedLimit: string;
+              twoSeriesRadarCountCannotExceedLimit: string;
+              threePlusSeriesRadarCountCannotExceedLimit: string;
+              radarSeriesCountCannotExceedLimit: string;
               uniqueSeriesBoxCountCannotExceedLimit: string;
               twoSeriesBoxCountCannotExceedLimit: string;
               threePlusBoxLineCountCannotExceedLimit: string;
@@ -1219,6 +1227,10 @@ export abstract class ArcgisChart extends LitElement {
               twoTemporalSeriesLineCountCannotExceedLimit?: string | undefined;
               threePlusTemporalSeriesLineCountCannotExceedLimit?: string | undefined;
               lineSeriesCountCannotExceedLimit?: string | undefined;
+              uniqueSeriesRadarCountCannotExceedLimit?: string | undefined;
+              twoSeriesRadarCountCannotExceedLimit?: string | undefined;
+              threePlusSeriesRadarCountCannotExceedLimit?: string | undefined;
+              radarSeriesCountCannotExceedLimit?: string | undefined;
               uniqueSeriesBoxCountCannotExceedLimit?: string | undefined;
               twoSeriesBoxCountCannotExceedLimit?: string | undefined;
               threePlusBoxLineCountCannotExceedLimit?: string | undefined;
@@ -1761,7 +1773,7 @@ export abstract class ArcgisChart extends LitElement {
    * Whether to automatically add the missing series to cover the split-by values not referenced in the configuration.
    * - This property only applies to plain chart configuration object that's constructed following the [WebChart](https://developers.arcgis.com/javascript/latest/references/charts-components/spec/web-chart/#WebChart) specification.
    *   - When [`addMissingSeries`](/references/charts-components/utils/components/interfaces/#MissingSplitBySeriesProps-addMissingSeries) is set to `true`, the missing series will be added.
-   *   - When [`seriesTemplate`](/references/charts-components/utils/components/interfaces/#MissingSplitBySeriesProps-seriesTemplate) is not provided, the first existing series from the configuration will be copied to be used as a model for the missing ones. The chart won't render if the series template is not set and there's no series in the configuration.
+   *   - When [`seriesTemplate`](/references/charts-components/utils/components/interfaces/#MissingSplitBySeriesProps-seriesTemplate) is omitted, the first existing series from the configuration will be copied to be used as a model for the missing ones. The chart won't render if the series template is not set and there's no series in the configuration.
    * - If a chart is configured using a chart model, this property is not necessary as the split-by series will be updated automatically when the model's properties are changed.
    *
    * **Note**: Applicable only to bar chart, box plot, line chart and radar chart when a split-by field is used.
@@ -1838,7 +1850,7 @@ export abstract class ArcgisChart extends LitElement {
    */
   clearSelection(): Promise<void>;
   /**
-   * Destroys the chart instance and removes it from the DOM.
+   * Destroys the chart instance.
    *
    * @since 5.1
    */
@@ -1853,64 +1865,110 @@ export abstract class ArcgisChart extends LitElement {
   /**
    * Export the current chart's data as a CSV file.
    *
-   * The `Options` object can contain the following properties:
-   * - `columns`: An array of column to include in the CSV file.
-   * - `delimiter`: The delimiter to use in the CSV file. Default is `,`.
-   * - `includeHeader`: Whether to include the header row in the CSV file. Default is `true`.
-   * - `quoteAll`: Whether to quote all values in the CSV file. Default is `false`.
-   * - `locale`: The locale to use when formatting the CSV file. Default is `en`.
-   *    - 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"
-   *
-   * **Note**: The chart types supported by this method are:
-   * - Bar chart
-   * - Box plot
-   * - Combo bar line chart
-   * - Heat chart
-   * - Histogram
-   * - Line chart
-   * - Pie chart
-   *
-   * @param options
+   * @param options - The options to customize the exported CSV file.
+   * @example
+   * ```ts
+   * // Export the chart's data as a CSV file with custom options.
+   * await chartElement.exportAsCSV({
+   *   columns: ["neighbourhood_group", "room_type", "Count"],
+   *   delimiter: "|",
+   *   includeHeader: false,
+   *   quoteAll: true,
+   *   locale: "fr"
+   * });
+   * ```
+   *
+   * ```csv
+   * // The exported CSV file will contain the following data:
+   * sep=|
+   * "Bronx"|"Entire home/apt"|"379"
+   * "Bronx"|"Private room"|"652"
+   * "Bronx"|"Shared room"|"60"
+   * "Brooklyn"|"Entire home/apt"|"9 559"
+   * ...
+   * ```
+   *
+   * **Note**: Not supported for gauges, scatterplots and radar charts.
    */
   exportAsCSV(options?: CSVOptions): Promise<void>;
   /**
-   * Exports the current chart as an image. Default format is `png`.
-   * - Alternative formats supported are: `jpeg`, `jpg`, `webp`, and `svg`.
-   * - When WebP format is used on Safari, it will fallback to PNG rendering.
+   * Exports and downloads the current chart as an image.
+   * - Supported formats: `png` (default), `jpeg`, `jpg`, `webp`, and `svg`.
+   *   - When `webp` format is used on Safari, it will fallback to `png`.
    *
-   * @param format
+   * @param format - The image format to export the chart as. Default: `png`.
    */
   exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>;
-  /** Returns a promise that resolves when the chart model is fully loaded. */
+  /**
+   * Returns a promise that resolves when the chart model is fully loaded.
+   *
+   * This method should be used when loading a chart with [layerItemId](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#layerItemId) and [chartIndex](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#chartIndex), and further customization of the chart model is needed.
+   *
+   * @example
+   * ```html
+   * // Load a chart from a layer item
+   * <arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="2" />
+   * ```
+   * ```ts
+   * // Get a reference to the chart element in the DOM
+   * const chartElement = document.querySelector("arcgis-chart");
+   *
+   * // Call the method to ensure the model is fully loaded before making changes
+   * await chartElement.loadModel();
+   *
+   * // Once the model is loaded, use the model's properties/methods to customize
+   * chartElement.model.titleText = "New Title";
+   * ```
+   * @see [Load from layer item and customize with charts model](https://developers.arcgis.com/javascript/latest/charts/#load-from-layer-item-and-customize-with-charts-model)
+   */
   loadModel(): Promise<void>;
   /**
-   * Notify method allows passing external messages to the chart component.
-   * It can be used to pass validation or information messages.
-   * In a situation where a model update is overriding the notification modal, consider waiting for the [@arcgisUpdateComplete](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#event-arcgisUpdateComplete) event.
+   * Passes external messages to the chart component and displays them in the chart's container.
+   * When a model update is overriding the notification modal, consider waiting for the [@arcgisUpdateComplete](https://developers.arcgis.com/javascript/latest/references/charts-components/components/arcgis-chart/#event-arcgisUpdateComplete) event.
+   *
+   * @param message - The message to display in the chart's container.
+   * @param heading - The heading to display in the chart's container.
+   * @example
+   * ```html
+   * <button id="show-notification" type="button">Show notification</button>
+   * <button id="clear-notification" type="button">Clear notification</button>
+   * ```
    *
-   * @param message - The message to display in the chart's info modal.
-   * @param heading - The heading to display in the chart's info modal.
+   * ```ts
+   * // When the "Show notification" button is clicked, the chart's container will display a custom message and heading.
+   * document.querySelector("#show-notification").addEventListener("click", () => {
+   *   chartElement.notify(
+   *     "This is a notification message.",
+   *     "Notification heading",
+   *   );
+   * });
+   *
+   * // When the "Clear notification" button is clicked, the chart's container will be cleared and hidden.
+   * document.querySelector("#clear-notification").addEventListener("click", () => {
+   *   chartElement.notify();
+   * });
+   * ```
    */
   notify(message?: string, heading?: string): Promise<void>;
   /**
    * Re-render the chart.
    *
-   * @param props - Indicates whether to fetch new data. Default: `true`.
+   * @param props - Properties to control the refresh behavior: `updateData` indicates whether to fetch new data (default: `true`), and `resetAxesBounds` indicates whether to reset the axes bounds along with the refresh (default: `false`).
    */
   refresh(props?: {
       updateData?: boolean;
       resetAxesBounds?: boolean;
   }): Promise<void>;
   /**
-   * Resets the chart zoom to bring it back to full extent.
+   * Resets the chart's zoom and brings it back to full zoom extent.
    *
-   * **Note**: Applicable to XY charts only.
+   * **Note**: Not applicable to gauges, heat charts, pie charts and radar charts.
    */
   resetZoom(): Promise<void>;
   /**
    * Switches the selection on the chart.
    *
-   * **Note**: Not applicable to gauge.
+   * **Note**: Not applicable to gauges.
    */
   switchSelection(): Promise<void>;
   /** Event triggered once the chart axes min/max values are computed. */