@databricks/appkit 0.2.0 → 0.4.0

package/docs/docs/api/appkit/Variable.sql.md

@@ -0,0 +1,260 @@
+# Variable: sql
+
+```ts
+const sql: {
+  binary: SQLBinaryMarker;
+  boolean: SQLBooleanMarker;
+  date: SQLDateMarker;
+  number: SQLNumberMarker;
+  string: SQLStringMarker;
+  timestamp: SQLTimestampMarker;
+};
+
+```
+
+SQL helper namespace
+
+## Type Declaration[​](#type-declaration "Direct link to Type Declaration")
+
+### binary()[​](#binary "Direct link to binary()")
+
+```ts
+binary(value: string | Uint8Array | ArrayBuffer): SQLBinaryMarker;
+
+```
+
+Creates a BINARY parameter as hex-encoded STRING Accepts Uint8Array, ArrayBuffer, or hex string Note: Databricks SQL Warehouse doesn't support BINARY as parameter type, so this helper returns a STRING with hex encoding. Use UNHEX(<!-- -->:param<!-- -->) in your SQL.
+
+#### Parameters[​](#parameters "Direct link to Parameters")
+
+| Parameter | Type                                      | Description                            |
+| --------- | ----------------------------------------- | -------------------------------------- |
+| `value`   | `string` \| `Uint8Array` \| `ArrayBuffer` | Uint8Array, ArrayBuffer, or hex string |
+
+#### Returns[​](#returns "Direct link to Returns")
+
+`SQLBinaryMarker`
+
+Marker object with STRING type and hex-encoded value
+
+#### Examples[​](#examples "Direct link to Examples")
+
+```typescript
+// From Uint8Array:
+const params = { data: sql.binary(new Uint8Array([0x53, 0x70, 0x61, 0x72, 0x6b])) };
+// Returns: { __sql_type: "STRING", value: "537061726B" }
+// SQL: SELECT UNHEX(:data) as binary_value
+
+```
+
+```typescript
+// From hex string:
+const params = { data: sql.binary("537061726B") };
+// Returns: { __sql_type: "STRING", value: "537061726B" }
+
+```
+
+### boolean()[​](#boolean "Direct link to boolean()")
+
+```ts
+boolean(value: string | number | boolean): SQLBooleanMarker;
+
+```
+
+Create a BOOLEAN type parameter Accepts booleans, strings, or numbers
+
+#### Parameters[​](#parameters-1 "Direct link to Parameters")
+
+| Parameter | Type                              | Description                |
+| --------- | --------------------------------- | -------------------------- |
+| `value`   | `string` \| `number` \| `boolean` | Boolean, string, or number |
+
+#### Returns[​](#returns-1 "Direct link to Returns")
+
+`SQLBooleanMarker`
+
+Marker object for BOOLEAN type parameter
+
+#### Examples[​](#examples-1 "Direct link to Examples")
+
+```typescript
+const params = { isActive: sql.boolean(true) };
+params = { isActive: "true" }
+
+```
+
+```typescript
+const params = { isActive: sql.boolean("true") };
+params = { isActive: "true" }
+
+```
+
+```typescript
+const params = { isActive: sql.boolean(1) };
+params = { isActive: "true" }
+
+```
+
+```typescript
+const params = { isActive: sql.boolean("false") };
+params = { isActive: "false" }
+
+```
+
+```typescript
+const params = { isActive: sql.boolean(0) };
+params = { isActive: "false" }
+
+```
+
+### date()[​](#date "Direct link to date()")
+
+```ts
+date(value: string | Date): SQLDateMarker;
+
+```
+
+Creates a DATE type parameter Accepts Date objects or ISO date strings (YYYY-MM-DD format)
+
+#### Parameters[​](#parameters-2 "Direct link to Parameters")
+
+| Parameter | Type               | Description                    |
+| --------- | ------------------ | ------------------------------ |
+| `value`   | `string` \| `Date` | Date object or ISO date string |
+
+#### Returns[​](#returns-2 "Direct link to Returns")
+
+`SQLDateMarker`
+
+Marker object for DATE type parameter
+
+#### Examples[​](#examples-2 "Direct link to Examples")
+
+```typescript
+const params = { startDate: sql.date(new Date("2024-01-01")) };
+params = { startDate: "2024-01-01" }
+
+```
+
+```typescript
+const params = { startDate: sql.date("2024-01-01") };
+params = { startDate: "2024-01-01" }
+
+```
+
+### number()[​](#number "Direct link to number()")
+
+```ts
+number(value: string | number): SQLNumberMarker;
+
+```
+
+Creates a NUMERIC type parameter Accepts numbers or numeric strings
+
+#### Parameters[​](#parameters-3 "Direct link to Parameters")
+
+| Parameter | Type                 | Description              |
+| --------- | -------------------- | ------------------------ |
+| `value`   | `string` \| `number` | Number or numeric string |
+
+#### Returns[​](#returns-3 "Direct link to Returns")
+
+`SQLNumberMarker`
+
+Marker object for NUMERIC type parameter
+
+#### Examples[​](#examples-3 "Direct link to Examples")
+
+```typescript
+const params = { userId: sql.number(123) };
+params = { userId: "123" }
+
+```
+
+```typescript
+const params = { userId: sql.number("123") };
+params = { userId: "123" }
+
+```
+
+### string()[​](#string "Direct link to string()")
+
+```ts
+string(value: string | number | boolean): SQLStringMarker;
+
+```
+
+Creates a STRING type parameter Accepts strings, numbers, or booleans
+
+#### Parameters[​](#parameters-4 "Direct link to Parameters")
+
+| Parameter | Type                              | Description                |
+| --------- | --------------------------------- | -------------------------- |
+| `value`   | `string` \| `number` \| `boolean` | String, number, or boolean |
+
+#### Returns[​](#returns-4 "Direct link to Returns")
+
+`SQLStringMarker`
+
+Marker object for STRING type parameter
+
+#### Examples[​](#examples-4 "Direct link to Examples")
+
+```typescript
+const params = { name: sql.string("John") };
+params = { name: "John" }
+
+```
+
+```typescript
+const params = { name: sql.string(123) };
+params = { name: "123" }
+
+```
+
+```typescript
+const params = { name: sql.string(true) };
+params = { name: "true" }
+
+```
+
+### timestamp()[​](#timestamp "Direct link to timestamp()")
+
+```ts
+timestamp(value: string | number | Date): SQLTimestampMarker;
+
+```
+
+Creates a TIMESTAMP type parameter Accepts Date objects, ISO timestamp strings, or Unix timestamp numbers
+
+#### Parameters[​](#parameters-5 "Direct link to Parameters")
+
+| Parameter | Type                           | Description                                                 |
+| --------- | ------------------------------ | ----------------------------------------------------------- |
+| `value`   | `string` \| `number` \| `Date` | Date object, ISO timestamp string, or Unix timestamp number |
+
+#### Returns[​](#returns-5 "Direct link to Returns")
+
+`SQLTimestampMarker`
+
+Marker object for TIMESTAMP type parameter
+
+#### Examples[​](#examples-5 "Direct link to Examples")
+
+```typescript
+const params = { createdTime: sql.timestamp(new Date("2024-01-01T12:00:00Z")) };
+params = { createdTime: "2024-01-01T12:00:00Z" }
+
+```
+
+```typescript
+const params = { createdTime: sql.timestamp("2024-01-01T12:00:00Z") };
+params = { createdTime: "2024-01-01T12:00:00Z" }
+
+```
+
+```typescript
+const params = { createdTime: sql.timestamp(1704110400000) };
+params = { createdTime: "2024-01-01T12:00:00Z" }
+
+```

package/docs/docs/api/appkit/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/appkit/index" data-has-hydrated="false">
+<head>
+<meta charset="UTF-8">
+<meta name="generator" content="Docusaurus v3.9.2">
+<title data-rh="true">@databricks/appkit | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/api/appkit/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="@databricks/appkit | AppKit"><meta data-rh="true" name="description" content="Core library for building Databricks applications with type-safe SQL queries,"><meta data-rh="true" property="og:description" content="Core library for building Databricks applications with type-safe SQL queries,"><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/api/appkit/"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit/" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit/" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API reference","item":"https://databricks.github.io/appkit/docs/api/"},{"@type":"ListItem","position":2,"name":"@databricks/appkit","item":"https://databricks.github.io/appkit/docs/api/appkit/"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
+<script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
+<script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
+</head>
+<body class="navigation-with-keyboard">
+<svg style="display: none;"><defs>
+<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
+</defs></svg>
+<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Collapse sidebar category &#x27;API reference&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/api/appkit/"><span title="@databricks/appkit" class="categoryLinkLabel_ShmP">@databricks/appkit</span></a><button aria-label="Collapse sidebar category &#x27;@databricks/appkit&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.AppKitError"><span title="AppKitError" class="linkLabel_hZzm">AppKitError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.AuthenticationError"><span title="AuthenticationError" class="linkLabel_hZzm">AuthenticationError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.ConfigurationError"><span title="ConfigurationError" class="linkLabel_hZzm">ConfigurationError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.ConnectionError"><span title="ConnectionError" class="linkLabel_hZzm">ConnectionError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.ExecutionError"><span title="ExecutionError" class="linkLabel_hZzm">ExecutionError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.InitializationError"><span title="InitializationError" class="linkLabel_hZzm">InitializationError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.Plugin"><span title="Plugin" class="linkLabel_hZzm">Plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.ServerError"><span title="ServerError" class="linkLabel_hZzm">ServerError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.TunnelError"><span title="TunnelError" class="linkLabel_hZzm">TunnelError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-class"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Class.ValidationError"><span title="ValidationError" class="linkLabel_hZzm">ValidationError</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-interface"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Interface.BasePluginConfig"><span title="BasePluginConfig" class="linkLabel_hZzm">BasePluginConfig</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-interface"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Interface.CacheConfig"><span title="CacheConfig" class="linkLabel_hZzm">CacheConfig</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-interface"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Interface.ITelemetry"><span title="ITelemetry" class="linkLabel_hZzm">ITelemetry</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-interface"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Interface.StreamExecutionSettings"><span title="StreamExecutionSettings" class="linkLabel_hZzm">StreamExecutionSettings</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-interface"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Interface.TelemetryConfig"><span title="TelemetryConfig" class="linkLabel_hZzm">TelemetryConfig</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-typealias"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/TypeAlias.IAppRouter"><span title="IAppRouter" class="linkLabel_hZzm">IAppRouter</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-variable"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Variable.sql"><span title="sql" class="linkLabel_hZzm">sql</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-function"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Function.appKitTypesPlugin"><span title="appKitTypesPlugin" class="linkLabel_hZzm">appKitTypesPlugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-function"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Function.createApp"><span title="createApp" class="linkLabel_hZzm">createApp</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item api-kind-function"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit/Function.isSQLTypeMarker"><span title="isSQLTypeMarker" class="linkLabel_hZzm">isSQLTypeMarker</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" tabindex="0" href="/appkit/docs/api/appkit-ui/"><span title="@databricks/appkit-ui" class="categoryLinkLabel_ShmP">@databricks/appkit-ui</span></a><button aria-label="Expand sidebar category &#x27;@databricks/appkit-ui&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/"><span>API reference</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">@databricks/appkit</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>@databricks/appkit</h1></header>
+<p>Core library for building Databricks applications with type-safe SQL queries,
+plugin architecture, and React integration.</p>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="classes">Classes<a href="#classes" class="hash-link" aria-label="Direct link to Classes" title="Direct link to Classes" translate="no">​</a></h2>
+<table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><a class="" href="/appkit/docs/api/appkit/Class.AppKitError">AppKitError</a></td><td>Base error class for all AppKit errors. Provides a consistent structure for error handling across the framework.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.AuthenticationError">AuthenticationError</a></td><td>Error thrown when authentication fails. Use for missing tokens, invalid credentials, or authorization failures.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.ConfigurationError">ConfigurationError</a></td><td>Error thrown when configuration is missing or invalid. Use for missing environment variables, invalid settings, or setup issues.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.ConnectionError">ConnectionError</a></td><td>Error thrown when a connection or network operation fails. Use for database pool errors, API failures, timeouts, etc.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.ExecutionError">ExecutionError</a></td><td>Error thrown when an operation execution fails. Use for statement failures, canceled operations, or unexpected states.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.InitializationError">InitializationError</a></td><td>Error thrown when a service or component is not properly initialized. Use when accessing services before they are ready.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.Plugin">Plugin</a></td><td>Base abstract class for creating AppKit plugins</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.ServerError">ServerError</a></td><td>Error thrown when server lifecycle operations fail. Use for server start/stop issues, configuration conflicts, etc.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.TunnelError">TunnelError</a></td><td>Error thrown when remote tunnel operations fail. Use for tunnel connection issues, message parsing failures, etc.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Class.ValidationError">ValidationError</a></td><td>Error thrown when input validation fails. Use for invalid parameters, missing required fields, or type mismatches.</td></tr></tbody></table>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="interfaces">Interfaces<a href="#interfaces" class="hash-link" aria-label="Direct link to Interfaces" title="Direct link to Interfaces" translate="no">​</a></h2>
+<table><thead><tr><th>Interface</th><th>Description</th></tr></thead><tbody><tr><td><a class="" href="/appkit/docs/api/appkit/Interface.BasePluginConfig">BasePluginConfig</a></td><td>Base configuration interface for AppKit plugins</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Interface.CacheConfig">CacheConfig</a></td><td>Configuration for caching</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Interface.ITelemetry">ITelemetry</a></td><td>Plugin-facing interface for OpenTelemetry instrumentation. Provides a thin abstraction over OpenTelemetry APIs for plugins.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Interface.StreamExecutionSettings">StreamExecutionSettings</a></td><td>Configuration for streaming execution with default and user-scoped settings</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Interface.TelemetryConfig">TelemetryConfig</a></td><td>OpenTelemetry configuration for AppKit applications</td></tr></tbody></table>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="type-aliases">Type Aliases<a href="#type-aliases" class="hash-link" aria-label="Direct link to Type Aliases" title="Direct link to Type Aliases" translate="no">​</a></h2>
+<table><thead><tr><th>Type Alias</th><th>Description</th></tr></thead><tbody><tr><td><a class="" href="/appkit/docs/api/appkit/TypeAlias.IAppRouter">IAppRouter</a></td><td>Express router type for plugin route registration</td></tr></tbody></table>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="variables">Variables<a href="#variables" class="hash-link" aria-label="Direct link to Variables" title="Direct link to Variables" translate="no">​</a></h2>
+<table><thead><tr><th>Variable</th><th>Description</th></tr></thead><tbody><tr><td><a class="" href="/appkit/docs/api/appkit/Variable.sql">sql</a></td><td>SQL helper namespace</td></tr></tbody></table>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="functions">Functions<a href="#functions" class="hash-link" aria-label="Direct link to Functions" title="Direct link to Functions" translate="no">​</a></h2>
+<table><thead><tr><th>Function</th><th>Description</th></tr></thead><tbody><tr><td><a class="" href="/appkit/docs/api/appkit/Function.appKitTypesPlugin">appKitTypesPlugin</a></td><td>Vite plugin to generate types for AppKit queries. Calls generateFromEntryPoint under the hood.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Function.createApp">createApp</a></td><td>Bootstraps AppKit with the provided configuration.</td></tr><tr><td><a class="" href="/appkit/docs/api/appkit/Function.isSQLTypeMarker">isSQLTypeMarker</a></td><td>Type guard to check if a value is a SQL type marker</td></tr></tbody></table></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/api/appkit/index.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/api/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">API reference</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/api/appkit/Class.AppKitError"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">AppKitError</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#classes" class="table-of-contents__link toc-highlight">Classes</a></li><li><a href="#interfaces" class="table-of-contents__link toc-highlight">Interfaces</a></li><li><a href="#type-aliases" class="table-of-contents__link toc-highlight">Type Aliases</a></li><li><a href="#variables" class="table-of-contents__link toc-highlight">Variables</a></li><li><a href="#functions" class="table-of-contents__link toc-highlight">Functions</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
+</body>
+</html>

package/docs/docs/api/appkit-ui/data/AreaChart/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/appkit-ui/data/AreaChart" data-has-hydrated="false">
+<head>
+<meta charset="UTF-8">
+<meta name="generator" content="Docusaurus v3.9.2">
+<title data-rh="true">AreaChart | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="AreaChart | AppKit"><meta data-rh="true" name="description" content="Area Chart component for trend visualization with filled areas."><meta data-rh="true" property="og:description" content="Area Chart component for trend visualization with filled areas."><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API reference","item":"https://databricks.github.io/appkit/docs/api/"},{"@type":"ListItem","position":2,"name":"@databricks/appkit-ui","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/"},{"@type":"ListItem","position":3,"name":"AreaChart","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
+<script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
+<script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
+</head>
+<body class="navigation-with-keyboard">
+<svg style="display: none;"><defs>
+<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
+</defs></svg>
+<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Collapse sidebar category &#x27;API reference&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" tabindex="0" href="/appkit/docs/api/appkit/"><span title="@databricks/appkit" class="categoryLinkLabel_ShmP">@databricks/appkit</span></a><button aria-label="Expand sidebar category &#x27;@databricks/appkit&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" tabindex="0" href="/appkit/docs/api/appkit-ui/"><span title="@databricks/appkit-ui" class="categoryLinkLabel_ShmP">@databricks/appkit-ui</span></a><button aria-label="Collapse sidebar category &#x27;@databricks/appkit-ui&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Accordion"><span title="UI components" class="categoryLinkLabel_ShmP">UI components</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/appkit/docs/api/appkit-ui/data/AreaChart"><span title="Data components" class="categoryLinkLabel_ShmP">Data components</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/api/appkit-ui/data/AreaChart"><span title="AreaChart" class="linkLabel_hZzm">AreaChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/BarChart"><span title="BarChart" class="linkLabel_hZzm">BarChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/DataTable"><span title="DataTable" class="linkLabel_hZzm">DataTable</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/DonutChart"><span title="DonutChart" class="linkLabel_hZzm">DonutChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/HeatmapChart"><span title="HeatmapChart" class="linkLabel_hZzm">HeatmapChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/LineChart"><span title="LineChart" class="linkLabel_hZzm">LineChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/PieChart"><span title="PieChart" class="linkLabel_hZzm">PieChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/RadarChart"><span title="RadarChart" class="linkLabel_hZzm">RadarChart</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/data/ScatterChart"><span title="ScatterChart" class="linkLabel_hZzm">ScatterChart</span></a></li></ul></li></ul></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/"><span>API reference</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/appkit-ui/"><span>@databricks/appkit-ui</span></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Data components</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">AreaChart</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>AreaChart</h1></header>
+<p>Area Chart component for trend visualization with filled areas.</p>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h2>
+<div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token string" style="color:rgb(163, 21, 21)">&quot;use client&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">AreaChart</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit-ui/react&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">AreaChartExample</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain">  </span><span class="token keyword" style="color:rgb(0, 0, 255)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">AreaChart</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">data</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;Jan&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">5000</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;Feb&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">1500</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">7000</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;Mar&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">2000</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">9000</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;Apr&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">1800</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">8500</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;May&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">2200</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">10000</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">        </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> month</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;Jun&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> visitors</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">2500</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> revenue</span><span class="token tag script language-javascript operator" style="color:rgb(0, 0, 0)">:</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">11000</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">      </span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">xKey</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">month</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">yKey</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;visitors&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)"> </span><span class="token tag script language-javascript string" style="color:rgb(163, 21, 21)">&quot;revenue&quot;</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">stacked</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">showLegend</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">      </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript number" style="color:rgb(9, 134, 88)">300</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)">    </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
+<h2 class="anchor anchorTargetStickyNavbar_scV4" id="areachart-1">AreaChart<a href="#areachart-1" class="hash-link" aria-label="Direct link to AreaChart" title="Direct link to AreaChart" translate="no">​</a></h2>
+<p>Area Chart component for trend visualization with filled areas.</p>
+<p><strong>Important:</strong> This component uses Apache ECharts architecture. Configure it via props, not by passing child components.</p>
+<p><strong>Best Practice:</strong> Use the built-in data fetching by passing <code>queryKey</code> and <code>parameters</code> props instead of pre-fetching data with <code>useAnalyticsQuery</code>.</p>
+<p>Supports both query mode (queryKey + parameters) and data mode (static data).</p>
+<p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/area/index.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/charts/area/index.tsx</code></a></p>
+<h3 class="anchor anchorTargetStickyNavbar_scV4" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
+<table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>queryKey</code></td><td><code>string</code></td><td></td><td>-</td><td>Analytics query key registered with analytics plugin</td></tr><tr><td><code>parameters</code></td><td><code>Record&lt;string, unknown&gt;</code></td><td></td><td>-</td><td>Query parameters passed to the analytics endpoint</td></tr><tr><td><code>format</code></td><td><code>enum</code></td><td></td><td><code>&quot;auto&quot;</code></td><td>Data format to use - &quot;json&quot;: Use JSON format (smaller payloads, simpler) - &quot;arrow&quot;: Use Arrow format (faster for large datasets) - &quot;auto&quot;: Automatically select based on expected data size</td></tr><tr><td><code>transformer</code></td><td><code>(&lt;T&gt;(data: T) =&gt; T)</code></td><td></td><td>-</td><td>Transform raw data before rendering</td></tr><tr><td><code>data</code></td><td><code>ChartData</code></td><td></td><td>-</td><td>Arrow Table or JSON array</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td></td><td>-</td><td>Chart title</td></tr><tr><td><code>showLegend</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Show legend</td></tr><tr><td><code>colorPalette</code></td><td><code>enum</code></td><td></td><td>-</td><td>Color palette to use. Auto-selected based on chart type if not specified. - &quot;categorical&quot;: Distinct colors for different categories (bar, pie, line) - &quot;sequential&quot;: Gradient for magnitude/intensity (heatmap) - &quot;diverging&quot;: Two-tone for positive/negative values</td></tr><tr><td><code>colors</code></td><td><code>string[]</code></td><td></td><td>-</td><td>Custom colors for series (overrides colorPalette)</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td></td><td><code>300</code></td><td>Chart height in pixels</td></tr><tr><td><code>className</code></td><td><code>string</code></td><td></td><td>-</td><td>Additional CSS classes</td></tr><tr><td><code>xKey</code></td><td><code>string</code></td><td></td><td>-</td><td>X-axis field key. Auto-detected from schema if not provided.</td></tr><tr><td><code>yKey</code></td><td><code>string | string[]</code></td><td></td><td>-</td><td>Y-axis field key(s). Auto-detected from schema if not provided.</td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td></td><td>-</td><td>Accessibility label for screen readers</td></tr><tr><td><code>testId</code></td><td><code>string</code></td><td></td><td>-</td><td>Test ID for automated testing</td></tr><tr><td><code>options</code></td><td><code>Record&lt;string, unknown&gt;</code></td><td></td><td>-</td><td>Additional ECharts options to merge</td></tr><tr><td><code>orientation</code></td><td><code>enum</code></td><td></td><td><code>&quot;vertical&quot;</code></td><td>Chart orientation</td></tr><tr><td><code>showSymbol</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>Show data point symbols</td></tr><tr><td><code>smooth</code></td><td><code>boolean</code></td><td></td><td><code>true</code></td><td>Smooth line curves</td></tr><tr><td><code>stacked</code></td><td><code>boolean</code></td><td></td><td><code>false</code></td><td>Stack areas</td></tr></tbody></table>
+<h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
+<div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">AreaChart</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">AreaChart</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/api/appkit-ui/data/AreaChart.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/api/appkit-ui/ui/Tooltip"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Tooltip</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/api/appkit-ui/data/BarChart"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">BarChart</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a></li><li><a href="#areachart-1" class="table-of-contents__link toc-highlight">AreaChart</a><ul><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
+</body>
+</html>