WITH parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time, parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time, dateDiff('day', start_time, end_time) AS days_diff, dateDiff('year', start_time, end_time) AS years_diff, multiIf( years_diff >= 1, 'month', days_diff <= 1, 'hour', 'day' ) AS date_granularity SELECT CAST(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.input_tokens'])) AS INTEGER) AS prompt_tokens, CAST(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.output_tokens'])) AS INTEGER) AS completion_tokens, formatDateTime(DATE_TRUNC(date_granularity, Timestamp), '%Y/%m/%d %R') AS request_time FROM otel_traces WHERE SpanAttributes['gen_ai.operation.name'] != 'vectordb' AND StatusCode IN ('STATUS_CODE_OK', 'STATUS_CODE_UNSET', 'Ok', 'Unset') AND Timestamp >= start_time AND Timestamp <= end_time GROUP BY request_time ORDER BY request_time;
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"OpenLIT","description":"OpenLIT is the open-source agent harness engineering platform: OpenTelemetry-native agent observability, evals, guardrails, prompt management, and cost and GPU monitoring for AI agents and coding agents. Free to self-host under Apache 2.0.","colors":{"primary":"#F36C06","light":"#FF8A3D","dark":"#D45A05"},"logo":{"light":"https://mintcdn.com/openlit/oP6rqLGiwYvXWG_M/images/rectangular-light-bg-logo.jpg?fit=max\u0026auto=format\u0026n=oP6rqLGiwYvXWG_M\u0026q=85\u0026s=b02d92ad5e052bac2f904af1c0645dec","dark":"https://mintcdn.com/openlit/oP6rqLGiwYvXWG_M/images/rectangular-dark-bg-logo.jpg?fit=max\u0026auto=format\u0026n=oP6rqLGiwYvXWG_M\u0026q=85\u0026s=baa41ab0c043c1758735b1c85419edea","href":"https://openlit.io"},"favicon":"https://mintcdn.com/openlit/o7M0DoQ9lLUZaVc9/favicon.png?fit=max\u0026auto=format\u0026n=o7M0DoQ9lLUZaVc9\u0026q=85\u0026s=17d47e2e3db89e20a9610569ea6ad7e0","appearance":{"default":"dark"},"background":{"color":{"light":"#FAFAF9","dark":"#0C0A09"}},"navbar":{"primary":{"type":"github","href":"https://github.com/openlit/openlit"}},"footer":{"socials":{"github":"https://github.com/openlit","slack":"https://join.slack.com/t/openlit/shared_invite/zt-2etnfttwg-TjP_7BZXfYg84oAukY8QRQ","discord":"https://discord.gg/CQnXwNT3","twitter":"https://twitter.com/openlit_io","linkedin":"https://www.linkedin.com/company/openlit"}},"fonts":{"family":"Inter"},"styling":{"eyebrows":"breadcrumbs","codeblocks":{"theme":{"light":"github-light","dark":"github-dark"}},"latex":true},"integrations":{"ga4":{"measurementId":"G-2BMXWY88E6"},"telemetry":{"enabled":true}},"contextual":{"options":["copy","chatgpt","claude"],"display":"header"},"navigation":{"global":{"anchors":[{"anchor":"GitHub","icon":"github","href":"https://github.com/openlit/openlit"},{"anchor":"Community","icon":"slack","href":"https://join.slack.com/t/openlit/shared_invite/zt-2etnfttwg-TjP_7BZXfYg84oAukY8QRQ"},{"anchor":"Blog","icon":"newspaper","href":"https://openlit.io/blogs"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"openlit","hasAudioNarration":false,"actualSubdomain":"openlit","customDomains":["docs.openlit.io"],"gitSource":{"type":"github","owner":"openlit","repo":"openlit","deployBranch":"main","contentDirectory":"docs","isPrivate":false,"mountPath":"","label":""},"feedback":{"thumbs":true,"edits":true,"issues":true,"agentFeedback":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6af1c9ee0da5396f96333880","clientVersion":"0.0.4094","searchFilterCounts":[{"language":"default","tag":"OpenLIT","count":127},{"language":"default","tag":"SDK","count":106},{"language":"default","tag":"Integrations","count":66},{"language":"default","tag":"Getting Started","count":41},{"language":"default","tag":"LLMs","count":33},{"language":"default","tag":"Frameworks","count":26},{"language":"default","tag":"Developer Resources","count":23},{"language":"default","tag":"Destinations","count":23},{"language":"default","tag":"Supported Destinations","count":22},{"language":"default","tag":"Observability","count":20}]},"assistantConfig":{},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":":root{--openlit-primary: #f36c06;--openlit-primary-hover: #d45a05;--openlit-stone-50: #fafaf9;--openlit-stone-100: #f5f5f4;--openlit-stone-200: #e7e5e4;--openlit-stone-700: #44403c;--openlit-stone-800: #292524;--openlit-stone-900: #1c1917;--openlit-stone-950: #0c0a09}html.dark body,html[data-theme=\"dark\"] body{background-color:var(--openlit-stone-950)}#navbar{border-bottom-color:color-mix(in srgb, var(--openlit-stone-200) 70%, transparent)}html.dark #navbar,html[data-theme=\"dark\"] #navbar{border-bottom-color:color-mix(in srgb, var(--openlit-stone-800) 80%, transparent)}[data-component-name=\"card\"],.card{border-radius:0.5rem}.tip,.note,.info{border-radius:0.5rem}"}],"page":{"pagePath":"latest/openlit/dashboards/widgets/area-chart-widget","slug":"/latest/openlit/dashboards/widgets/area-chart-widget","pageMetadata":{"title":"Area Chart Widget","slug":"/widgets/area-chart","description":"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.","href":"/latest/openlit/dashboards/widgets/area-chart-widget"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,li:`li`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading,OptimizedFrame,Tip}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedFrame)_missingMdxReference(`OptimizedFrame`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`when-to-use`,children:`When to use`}),`\n`,_jsx(_components.p,{children:`Use the Area Chart when you want to:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Show trends over time`}),`\n`,_jsx(_components.li,{children:`Emphasize volume or scale changes`}),`\n`,_jsx(_components.li,{children:`Display multiple series stacked`}),`\n`]}),`\n`,_jsx(_components.p,{children:`Area charts are particularly effective for metrics that accumulate or change gradually over time.`}),`\n`,_jsx(Heading,{level:`2`,id:`how-to-add-an-area-chart`,children:`How to add an area chart`}),`\n`,_jsx(OptimizedFrame,{className:`mint-w-full mint-aspect-video`,src:`https://www.youtube.com/embed/4ciEi2LcVNk?list=PLgErWFh-dyiGp9yUDnnx67wHEeNqzzMXZ`,title:`How to Use the Area Chart Widget in OpenLIT – Visualize Trends Over Time`,frameborder:`0`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,referrerpolicy:`strict-origin-when-cross-origin`,allowfullscreen:true}),`\n`,_jsx(Heading,{level:`2`,id:`example`,children:`Example:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`24`,language:`sql`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`#fff`,\"--shiki-dark-bg\":`#24292e`,color:`#24292e`,\"--shiki-dark\":`#e1e4e8`},language:`sql`,children:_jsxs(_components.code,{language:`sql`,numberOfLines:`24`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`WITH`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\tparseDateTimeBestEffort(`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'{{filter.timeLimit.start}}'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` start_time,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\tparseDateTimeBestEffort(`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'{{filter.timeLimit.end}}'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` end_time,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`\tdateDiff`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'day'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, start_time, end_time) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` days_diff,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`\tdateDiff`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'year'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, start_time, end_time) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` years_diff,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\tmultiIf(`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t years_diff `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`>=`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:` 1`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'month'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t days_diff `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\u003c=`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:` 1`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'hour'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`\t 'day'`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` date_granularity `})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\tSELECT`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`\t\tCAST`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`SUM`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(toInt64OrZero(SpanAttributes['gen_ai.usage.input_tokens'])) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` INTEGER`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` prompt_tokens, `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`\t\tCAST`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#79B8FF`},children:`SUM`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`(toInt64OrZero(SpanAttributes['gen_ai.usage.output_tokens'])) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` INTEGER`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` completion_tokens, `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t\tformatDateTime(DATE_TRUNC(date_granularity, `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`Timestamp`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`), `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'%Y/%m/%d %R'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`AS`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` request_time `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\tFROM`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` otel_traces `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\tWHERE`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`\t\tSpanAttributes['gen_ai.operation.name'] `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`!=`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:` 'vectordb'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\t\tAND`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` StatusCode `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`IN`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` (`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'STATUS_CODE_OK'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'STATUS_CODE_UNSET'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'Ok'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`, `}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#9ECBFF`},children:`'Unset'`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:`) `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\t\tAND`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` Timestamp`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` >=`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` start_time `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\t\tAND`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` Timestamp`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:` \u003c=`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` end_time `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\tGROUP BY`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` request_time `})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#F97583`},children:`\tORDER BY`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#E1E4E8`},children:` request_time;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`configuration-options`,children:`Configuration options`}),`\n`,_jsx(_components.p,{children:`Customize your Area Chart with the following options:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`X-Axis`}),`: A path to label or the group by param`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Y-Axes`}),`: An array of value path and color combination`]}),`\n`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Use dynamic bindings like `,_jsx(_components.code,{children:`{{filter.timeLimit.start}}`}),`, `,_jsx(_components.code,{children:`{{filter.timeLimit.end}}`}),` to make your chart respond to dashboard time filters.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`best-practices`,children:`Best practices`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Limit the number of series to keep the chart readable.`}),`\n`,_jsx(_components.li,{children:`Apply consistent color palettes for related metrics.`}),`\n`,_jsxs(_components.li,{children:[`Use filters (`,_jsx(_components.code,{children:`{{filter.timeLimit.start}}`}),`, `,_jsx(_components.code,{children:`{{filter.timeLimit.end}}`}),`) to enable dynamic dashboards`]}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":{"theme":{"light":"github-light","dark":"github-dark"}},"config":{},"pageMetadata":{"title":"Area Chart Widget","slug":"/widgets/area-chart","description":"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.","href":"/latest/openlit/dashboards/widgets/area-chart-widget"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"When to use","slug":"when-to-use","depth":2,"children":[]},{"title":"How to add an area chart","slug":"how-to-add-an-area-chart","depth":2,"children":[]},{"title":"Example:","slug":"example","depth":2,"children":[]},{"title":"Configuration options","slug":"configuration-options","depth":2,"children":[]},{"title":"Best practices","slug":"best-practices","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-aspect-video {\n aspect-ratio: 16 / 9\n}\n.mint-w-full {\n width: 100%\n}","subdomain":"openlit","siteName":"OpenLIT","title":"Area Chart Widget - OpenLIT","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-08-24T20:21:26.376Z","originalFileLocation":"latest/openlit/dashboards/widgets/area-chart-widget.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\">\u003cmeta data-mint-head name=\"application-name\" content=\"OpenLIT\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Area Chart Widget - OpenLIT\">\u003cmeta data-mint-head property=\"og:description\" content=\"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"OpenLIT\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://openlit.mintlify.site/_mintlify/api/og/v2?division=Widgets\u0026amp;title=Area+Chart+Widget\u0026amp;description=Learn+how+to+use+the+Area+Chart+Widget+in+OpenLIT+to+visualize+time-based+trends+using+ClickHouse+queries+and+dynamic+parameters.\u0026amp;theme=54f8b49bab7b8c84f0d57cd9\u0026amp;signature=7d66003b0d2db98d73cf9548c034f68d9827a74dd0dc249b5e556e7baa74f445\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Area Chart Widget - OpenLIT\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://openlit.mintlify.site/_mintlify/api/og/v2?division=Widgets\u0026amp;title=Area+Chart+Widget\u0026amp;description=Learn+how+to+use+the+Area+Chart+Widget+in+OpenLIT+to+visualize+time-based+trends+using+ClickHouse+queries+and+dynamic+parameters.\u0026amp;theme=54f8b49bab7b8c84f0d57cd9\u0026amp;signature=7d66003b0d2db98d73cf9548c034f68d9827a74dd0dc249b5e556e7baa74f445\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/openlit/LbZ0IIfFz4vwwQq0/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"OpenLIT\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#F36C06\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/latest/openlit/dashboards/widgets/area-chart-widget.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.openlit.io/#organization\",\"name\":\"OpenLIT\",\"url\":\"https://docs.openlit.io\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/openlit/oP6rqLGiwYvXWG_M/images/rectangular-light-bg-logo.jpg?fit=max\u0026auto=format\u0026n=oP6rqLGiwYvXWG_M\u0026q=85\u0026s=b02d92ad5e052bac2f904af1c0645dec\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.openlit.io#website\",\"name\":\"OpenLIT\",\"url\":\"https://docs.openlit.io\",\"publisher\":{\"@id\":\"https://docs.openlit.io/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget#webpage\",\"url\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget\",\"name\":\"Area Chart Widget\",\"description\":\"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\",\"dateModified\":\"2026-08-24T20:21:26.376Z\",\"isPartOf\":{\"@id\":\"https://docs.openlit.io#website\"},\"breadcrumb\":{\"@id\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Dashboards\",\"item\":\"https://docs.openlit.io/latest/openlit/dashboards/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Widgets\",\"item\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/overview\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Area Chart Widget\",\"item\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget#article\",\"headline\":\"Area Chart Widget\",\"name\":\"Area Chart Widget\",\"description\":\"Learn how to use the Area Chart Widget in OpenLIT to visualize time-based trends using ClickHouse queries and dynamic parameters.\",\"url\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget\",\"mainEntityOfPage\":{\"@id\":\"https://docs.openlit.io/latest/openlit/dashboards/widgets/area-chart-widget#webpage\"},\"dateModified\":\"2026-08-24T20:21:26.376Z\",\"publisher\":{\"@id\":\"https://docs.openlit.io/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.openlit.io#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"OpenLIT\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"OpenLIT","nav":{"global":{"anchors":[{"anchor":"GitHub","icon":"github","href":"https://github.com/openlit/openlit"},{"anchor":"Community","icon":"slack","href":"https://join.slack.com/t/openlit/shared_invite/zt-2etnfttwg-TjP_7BZXfYg84oAukY8QRQ"},{"anchor":"Blog","icon":"newspaper","href":"https://openlit.io/blogs"}]},"tabs":[{"tab":"OpenLIT","groups":[{"group":"Getting Started","pages":[{"title":"What is OpenLIT? Open-Source Agent Harness Engineering Platform","sidebarTitle":"Overview","href":"/latest/overview"},{"title":"Self-Host OpenLIT","sidebarTitle":"Self Host","icon":"circle-down","href":"/latest/openlit/installation"},{"title":"OTLP receiver","sidebarTitle":"OTLP receiver","href":"/latest/openlit/otlp-receiver"},{"group":"Quickstarts","icon":"bolt","pages":[{"title":"Get started with AI Observability","sidebarTitle":"Monitor AI Agents","href":"/latest/openlit/quickstart-ai-observability"},{"title":"Evaluations","sidebarTitle":"Set Up Evals","href":"/latest/openlit/quickstart-evals"},{"title":"Secure your AI app against risks","sidebarTitle":"Guardrails","href":"/latest/openlit/quickstart-guard"},{"title":"GPU Performance Monitoring","sidebarTitle":"GPU Monitoring","href":"/latest/openlit/quickstart-gpu"},{"title":"Get started with VectorDB Observability","sidebarTitle":"VectorDB Observability","href":"/latest/openlit/quickstart-vectordb-observability"},{"title":"Get started with MCP Monitoring","sidebarTitle":"MCP Monitoring","href":"/latest/openlit/quickstart-mcp-observability"}]},{"title":"Configuration","icon":"sliders","href":"/latest/openlit/configuration"},{"title":"OAuth","icon":"shield-check","href":"/latest/openlit/oauth"},{"group":"Organisation","icon":"building","pages":[{"title":"Organisation Overview","icon":"building","href":"/latest/openlit/organisation/overview"},{"title":"Projects","sidebarTitle":"Projects","icon":"folder","href":"/latest/openlit/organisation/projects"},{"title":"Environments","sidebarTitle":"Environments","icon":"layer-group","href":"/latest/openlit/organisation/environments"},{"title":"Signal routing","sidebarTitle":"Signal routing","icon":"route","href":"/latest/openlit/organisation/signal-routing"},{"title":"Telemetry Sources","sidebarTitle":"Telemetry Sources","icon":"plug","href":"/latest/openlit/organisation/telemetry-sources"},{"title":"Database Config","sidebarTitle":"Database Config","icon":"database","href":"/latest/openlit/organisation/database-config"}]},{"group":"Connectors","icon":"plug","pages":[{"title":"Connectors","sidebarTitle":"Overview","icon":"plug","href":"/latest/openlit/connectors/overview"},{"title":"Data-source connectors","sidebarTitle":"Data sources","icon":"database","href":"/latest/openlit/connectors/datasource"},{"title":"Memory connectors","sidebarTitle":"Memory","icon":"brain","href":"/latest/openlit/connectors/memory"},{"title":"Scanner connectors","sidebarTitle":"Scanners","icon":"magnifying-glass","href":"/latest/openlit/connectors/scanner"},{"title":"Notification connectors","sidebarTitle":"Notification","icon":"paper-plane","tag":"Enterprise","href":"/latest/openlit/connectors/notification"}]},{"group":"Enterprise","icon":"crown","pages":[{"title":"OpenLIT Enterprise","sidebarTitle":"Overview","icon":"crown","tag":"Enterprise","href":"/latest/openlit/enterprise"},{"title":"Role-Based Access Control","icon":"shield-check","tag":"Enterprise","href":"/latest/openlit/rbac"},{"title":"Audit Logs","icon":"clock-rotate-left","tag":"Enterprise","href":"/latest/openlit/audit-logs"},{"title":"Instance admin","icon":"user-shield","tag":"Enterprise","href":"/latest/openlit/instance-admin"},{"title":"Alerts","icon":"bell","href":"/latest/openlit/alerts"},{"title":"GPUs","icon":"microchip","tag":"Enterprise","href":"/latest/openlit/gpus"}]}]},{"group":"Concepts","pages":[{"title":"Agent Harness Engineering Glossary","sidebarTitle":"Glossary","href":"/latest/concepts/glossary"},{"title":"What is AI Observability?","sidebarTitle":"AI Observability","href":"/latest/glossary/what-is-ai-observability"},{"title":"What is AI Evaluation?","sidebarTitle":"AI Evaluation","href":"/latest/glossary/what-is-ai-evaluation"},{"title":"What is Prompt Engineering?","sidebarTitle":"Prompt Engineering","href":"/latest/glossary/what-is-prompt-engineering"}]},{"group":"Observability","pages":[{"group":"Telemetry","icon":"wave-pulse","pages":[{"title":"LLM Observability: Traces, Metrics \u0026 Logs","sidebarTitle":"Overview","href":"/latest/openlit/observability/telemetry/overview"},{"title":"Traces \u0026 Exceptions","href":"/latest/openlit/observability/telemetry/traces"},{"title":"AI Analysis","href":"/latest/openlit/observability/telemetry/ai-analysis"},{"title":"Trace Governance","sidebarTitle":"Trace Governance","href":"/latest/openlit/observability/telemetry/trace-governance"},{"title":"Metrics","href":"/latest/openlit/observability/telemetry/metrics"},{"title":"Logs","href":"/latest/openlit/observability/telemetry/logs"}]},{"group":"Agents","icon":"radar","pages":[{"title":"AI Agent Observability","sidebarTitle":"Overview","href":"/latest/openlit/observability/agents/overview"},{"title":"Setup","href":"/latest/openlit/observability/agents/setup"},{"title":"Analytics","href":"/latest/openlit/observability/agents/analytics"},{"title":"Monitoring","href":"/latest/openlit/observability/agents/monitoring"},{"title":"Definition","href":"/latest/openlit/observability/agents/definition"},{"title":"Configuration","href":"/latest/openlit/observability/agents/configuration"},{"title":"Versioning","href":"/latest/openlit/observability/agents/versioning"}]},{"group":"Coding Agents","icon":"code","pages":[{"title":"Coding Agent Observability: Claude Code, Codex, Cursor","sidebarTitle":"Overview","href":"/latest/openlit/coding-agents/overview"},{"title":"Setup \u0026 Configure","href":"/latest/openlit/coding-agents/setup-and-configure"},{"title":"Analytics","href":"/latest/openlit/coding-agents/analytics"},{"title":"Sessions","href":"/latest/openlit/coding-agents/sessions"},{"title":"Users","href":"/latest/openlit/coding-agents/users"},{"title":"Privacy \u0026 Governance","href":"/latest/openlit/coding-agents/privacy-and-governance"},{"title":"Troubleshooting","href":"/latest/openlit/coding-agents/troubleshooting"}]}]},{"group":"Evaluations","pages":[{"title":"Agent Evaluations (LLM-as-a-Judge \u0026 Programmatic Evals)","sidebarTitle":"Overview","href":"/latest/openlit/evaluations/overview"},{"title":"Evaluators","href":"/latest/openlit/evaluations/evaluators"},{"title":"Configuration","href":"/latest/openlit/evaluations/configuration"},{"title":"Analytics","href":"/latest/openlit/evaluations/analytics"},{"title":"Manual Feedback","href":"/latest/openlit/evaluations/manual-feedback"},{"group":"Evaluation Methods","icon":"ruler","pages":[{"title":"LLM-as-a-Judge","href":"/latest/openlit/evaluations/llm-as-a-judge"},{"title":"Programmatic Evaluations","href":"/latest/openlit/evaluations/programmatic-evals"}]}]},{"group":"Dashboards","pages":[{"title":"AI Observability Dashboards","sidebarTitle":"Overview","href":"/latest/openlit/dashboards/overview"},{"group":"Get started","icon":"bolt","pages":[{"title":"Create Dashboard","href":"/latest/openlit/dashboards/create-dashboard"},{"title":"Create Folder","href":"/latest/openlit/dashboards/create-folder"},{"title":"Import Dashboard","href":"/latest/openlit/dashboards/import-dashboard"}]},{"group":"Widgets","icon":"grip","pages":[{"title":"Dashboard Widgets","sidebarTitle":"Overview","description":"OpenLIT dashboard widgets for AI observability visualizations: time series charts, statistical summaries, and interactive tables.","href":"/latest/openlit/dashboards/widgets/overview"},{"title":"Area Chart Widget","href":"/latest/openlit/dashboards/widgets/area-chart-widget"},{"title":"Bar Chart Widget","description":"Learn how to use the Bar Chart Widget in OpenLIT to compare grouped data using ClickHouse queries and dynamic filters.","href":"/latest/openlit/dashboards/widgets/bar-chart-widget"},{"title":"Line Chart Widget","href":"/latest/openlit/dashboards/widgets/line-chart-widget"},{"title":"Pie Chart Widget","href":"/latest/openlit/dashboards/widgets/pie-chart-widget"},{"title":"Stats Widget","href":"/latest/openlit/dashboards/widgets/stat-widget"},{"title":"Table Widget","href":"/latest/openlit/dashboards/widgets/table-widget"},{"title":"Markdown Widget","href":"/latest/openlit/dashboards/widgets/markdown-widget"}]},{"group":"Manage Dashboards","icon":"square-poll-vertical","pages":[{"title":"Organize Dashboards","href":"/latest/openlit/dashboards/organize-dashboards"},{"title":"Export Dashboard","href":"/latest/openlit/dashboards/export-dashboard"},{"title":"Filters \u0026 Dynamic Bindings","href":"/latest/openlit/dashboards/filters-and-dynamic-bindings"},{"title":"Auto Refresh \u0026 Time Interval","href":"/latest/openlit/dashboards/auto-refresh-and-time-interval"},{"title":"Pin a Dashboard","href":"/latest/openlit/dashboards/pin-dashboard"},{"title":"Set a Main Dashboard","href":"/latest/openlit/dashboards/set-main-dashboard"}]}]},{"group":"Otter (AI Copilot)","pages":[{"title":"Otter AI Copilot for Observability","sidebarTitle":"Overview","href":"/latest/openlit/chat/overview"},{"title":"Chat with Otter","sidebarTitle":"Chat","href":"/latest/openlit/chat/conversations"},{"title":"Chat Settings","href":"/latest/openlit/chat/settings"},{"title":"Otter usage","href":"/latest/openlit/chat/usage"}]},{"group":"Pricing \u0026 Models","pages":[{"title":"LLM Cost Tracking","sidebarTitle":"Overview","href":"/latest/openlit/costs/overview"},{"title":"Analytics","href":"/latest/openlit/costs/analytics"},{"title":"Manage LLM Model Pricing","sidebarTitle":"Overview","href":"/latest/openlit/costs/manage-models/overview"},{"title":"Configuration","sidebarTitle":"Configuration","href":"/latest/openlit/costs/configuration"}]},{"group":"Prompts and Experiments","pages":[{"group":"Prompt Hub","icon":"message","pages":[{"title":"Prompt Management with Prompt Hub","sidebarTitle":"Overview","href":"/latest/openlit/prompts-experiments/prompt-hub/overview"},{"title":"Manage Prompts","href":"/latest/openlit/prompts-experiments/prompt-hub/manage-prompts"},{"title":"Versioning","href":"/latest/openlit/prompts-experiments/prompt-hub/versioning"},{"title":"Retrieve a Prompt","href":"/latest/openlit/prompts-experiments/prompt-hub/retrieve-a-prompt"},{"title":"AI Prompt Improvement","href":"/latest/openlit/prompts-experiments/prompt-hub/ai-improvement"},{"title":"Rules","href":"/latest/openlit/prompts-experiments/prompt-hub/rules"}]},{"group":"OpenGround","icon":"flask","pages":[{"title":"Compare LLMs Side by Side (OpenGround)","sidebarTitle":"Overview","href":"/latest/openlit/prompts-experiments/openground/overview"},{"title":"Run a Comparison","href":"/latest/openlit/prompts-experiments/openground/run-a-comparison"},{"title":"Results \u0026 History","href":"/latest/openlit/prompts-experiments/openground/results-and-history"}]},{"group":"Context","icon":"books","pages":[{"title":"Context Management for RAG Pipelines","sidebarTitle":"Overview","href":"/latest/openlit/prompts-experiments/context/overview"},{"title":"Manage Contexts","href":"/latest/openlit/prompts-experiments/context/manage-contexts"},{"title":"Retrieve Context","href":"/latest/openlit/prompts-experiments/context/retrieve-context"},{"title":"Link Rules","href":"/latest/openlit/prompts-experiments/context/link-rules"}]},{"group":"Rule Engine","icon":"code-branch","pages":[{"title":"Rule Engine for Conditional Prompt \u0026 Context Retrieval","sidebarTitle":"Overview","href":"/latest/openlit/prompts-experiments/rule-engine/overview"},{"title":"Create \u0026 Manage Rules","href":"/latest/openlit/prompts-experiments/rule-engine/create-and-manage-rules"},{"title":"Conditions","href":"/latest/openlit/prompts-experiments/rule-engine/conditions"},{"title":"Linked Entities","href":"/latest/openlit/prompts-experiments/rule-engine/linked-entities"},{"title":"Preview","href":"/latest/openlit/prompts-experiments/rule-engine/preview"},{"title":"Evaluate API","href":"/latest/openlit/prompts-experiments/rule-engine/evaluate-api"}]}]},{"group":"Developer Resources","pages":[{"group":"Vault","icon":"key","pages":[{"title":"LLM API Key Management (Vault)","sidebarTitle":"Overview","href":"/latest/openlit/developer-resources/vault/overview"},{"title":"Manage Secrets","href":"/latest/openlit/developer-resources/vault/manage-secrets"},{"title":"Retrieve Secrets","href":"/latest/openlit/developer-resources/vault/retrieve-secrets"},{"title":"Security","href":"/latest/openlit/developer-resources/vault/security"}]},{"title":"Local development","sidebarTitle":"Local development","icon":"laptop-code","href":"/latest/openlit/developer-resources/local-development"},{"title":"Connect Multiple Databases","sidebarTitle":"Connect Multiple Databases","href":"/latest/openlit/developer-resources/multiple-db"},{"title":"Anonymous Usage Metrics","sidebarTitle":"Anonymous Usage Metrics","icon":"chart-column","href":"/latest/openlit/developer-resources/anonymous-telemetry"},{"group":"API Reference","icon":"code","pages":[{"title":"Introduction","href":"/latest/openlit/developer-resources/api-reference/introduction"},{"group":"Prompt Hub","pages":[{"title":"Get Prompt","openapi":"POST /api/prompt/get-compiled","href":"/latest/openlit/developer-resources/api-reference/endpoint/prompt-hub/get"}]},{"group":"Vault","pages":[{"title":"Get Secret(s)","openapi":"POST /api/vault/get-secrets","href":"/latest/openlit/developer-resources/api-reference/endpoint/vault/get"}]},{"group":"Rule Engine","pages":[{"title":"Evaluate Rules","openapi":"POST /api/rule-engine/evaluate","href":"/latest/openlit/developer-resources/api-reference/endpoint/rule-engine/evaluate"}]},{"group":"Manage Models","pages":[{"title":"Models","openapi":"GET /api/openground/models","href":"/latest/openlit/developer-resources/api-reference/endpoint/manage-models/models"},{"title":"Providers","openapi":"GET /api/openground/providers","href":"/latest/openlit/developer-resources/api-reference/endpoint/manage-models/providers"},{"title":"Export Pricing","openapi":"GET /api/openground/models/export","href":"/latest/openlit/developer-resources/api-reference/endpoint/manage-models/export"},{"title":"Import Pricing","openapi":"POST /api/openground/models/import","href":"/latest/openlit/developer-resources/api-reference/endpoint/manage-models/import"},{"title":"Public pricing export","openapi":"GET /api/pricing/export/{dbConfigId}","href":"/latest/openlit/developer-resources/api-reference/endpoint/manage-models/public-pricing"}]},{"group":"API Keys","pages":[{"title":"Create API Key","openapi":"POST /api/api-key","href":"/latest/openlit/developer-resources/api-reference/endpoint/api-keys/create"},{"title":"List API Keys","openapi":"GET /api/api-key","href":"/latest/openlit/developer-resources/api-reference/endpoint/api-keys/get"},{"title":"Update API Key Access","openapi":"PATCH /api/api-key/{id}","tag":"Enterprise","href":"/latest/openlit/developer-resources/api-reference/endpoint/api-keys/update"},{"title":"Delete API Key","openapi":"DELETE /api/api-key/{id}","href":"/latest/openlit/developer-resources/api-reference/endpoint/api-keys/delete"}]},{"group":"Scanner","pages":[{"title":"Run scan","openapi":"POST /api/scanners/{id}/scan","href":"/latest/openlit/developer-resources/api-reference/endpoint/scanners/scan"},{"title":"List scan jobs","openapi":"GET /api/scanners","href":"/latest/openlit/developer-resources/api-reference/endpoint/scanners/list"},{"title":"Get scan findings","openapi":"GET /api/scanners/findings","href":"/latest/openlit/developer-resources/api-reference/endpoint/scanners/findings"}]}]}]}]},{"tab":"SDK","pages":[{"title":"SDK","href":"/latest/sdk/overview"}]},{"tab":"GPU Collector","pages":[{"title":"GPU Collector","href":"/latest/gpu-collector/overview"}]}]},"basePath":"","title":"Area Chart Widget - OpenLIT","buildId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","deploymentId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","dynamics":[],"chunks":[]}