jpawlowski/hass.tibber_prices
1
0
Fork 0
mirror of https://github.com/jpawlowski/hass.tibber_prices.git synced 2026-03-29 21:03:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
hass.tibber_prices/user/chart-examples.html
github-actions[bot] e9aea64a2e deploy: 6898c126e3
2025-12-06 01:42:39 +00:00

191 lines
No EOL
58 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-chart-examples" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">Chart Examples | Tibber Prices Integration</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:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" name="twitter:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" property="og:url" content="https://jpawlowski.github.io/hass.tibber_prices/user/chart-examples"><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="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="Chart Examples | Tibber Prices Integration"><meta data-rh="true" name="description" content="This guide showcases the different chart configurations available through the tibberprices.getapexcharts_yaml action."><meta data-rh="true" property="og:description" content="This guide showcases the different chart configurations available through the tibberprices.getapexcharts_yaml action."><link data-rh="true" rel="icon" href="/hass.tibber_prices/user/img/logo.svg"><link data-rh="true" rel="canonical" href="https://jpawlowski.github.io/hass.tibber_prices/user/chart-examples"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/chart-examples" hreflang="en"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/chart-examples" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Chart Examples","item":"https://jpawlowski.github.io/hass.tibber_prices/user/chart-examples"}]}</script><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap"><link rel="stylesheet" href="/hass.tibber_prices/user/assets/css/styles.be4f3d68.css">
<script src="/hass.tibber_prices/user/assets/js/runtime~main.624760e0.js" defer="defer"></script>
<script src="/hass.tibber_prices/user/assets/js/main.0445d6e2.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 c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><link rel="preload" as="image" href="/hass.tibber_prices/user/img/logo.svg"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></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="/hass.tibber_prices/user/"><div class="navbar__logo"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Tibber Prices HA</b></a><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/intro">User Guide</a><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Developer Docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/chart-examples">Next 🚧</a><a href="https://github.com/jpawlowski/hass.tibber_prices" 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_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" 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_g3eP lightToggleIcon_pyhR"><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_g3eP darkToggleIcon_wfgR"><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_g3eP systemToggleIcon_QzmC"><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_Bca1"><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_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><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="/hass.tibber_prices/user/intro"><span title="User Documentation" class="linkLabel_WmDU">User Documentation</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_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/installation"><span title="🚀 Getting Started" class="categoryLinkLabel_W154">🚀 Getting Started</span></a></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="/hass.tibber_prices/user/installation"><span title="Installation" class="linkLabel_WmDU">Installation</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="/hass.tibber_prices/user/configuration"><span title="Configuration" class="linkLabel_WmDU">Configuration</span></a></li></ul></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_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/concepts"><span title="📖 Core Concepts" class="categoryLinkLabel_W154">📖 Core Concepts</span></a></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="/hass.tibber_prices/user/concepts"><span title="Core Concepts" class="linkLabel_WmDU">Core Concepts</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="/hass.tibber_prices/user/glossary"><span title="Glossary" class="linkLabel_WmDU">Glossary</span></a></li></ul></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_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/sensors"><span title="📊 Features" class="categoryLinkLabel_W154">📊 Features</span></a></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="/hass.tibber_prices/user/sensors"><span title="Sensors" class="linkLabel_WmDU">Sensors</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="/hass.tibber_prices/user/period-calculation"><span title="Period Calculation" class="linkLabel_WmDU">Period Calculation</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="/hass.tibber_prices/user/dynamic-icons"><span title="Dynamic Icons" class="linkLabel_WmDU">Dynamic Icons</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="/hass.tibber_prices/user/icon-colors"><span title="Dynamic Icon Colors" class="linkLabel_WmDU">Dynamic Icon Colors</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="/hass.tibber_prices/user/actions"><span title="Actions (Services)" class="linkLabel_WmDU">Actions (Services)</span></a></li></ul></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_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/hass.tibber_prices/user/dashboard-examples"><span title="🎨 Visualization" class="categoryLinkLabel_W154">🎨 Visualization</span></a></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="/hass.tibber_prices/user/dashboard-examples"><span title="Dashboard Examples" class="linkLabel_WmDU">Dashboard Examples</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/hass.tibber_prices/user/chart-examples"><span title="Chart Examples" class="linkLabel_WmDU">Chart Examples</span></a></li></ul></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_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/automation-examples"><span title="🤖 Automation" class="categoryLinkLabel_W154">🤖 Automation</span></a></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="/hass.tibber_prices/user/automation-examples"><span title="Automation Examples" class="linkLabel_WmDU">Automation Examples</span></a></li></ul></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_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/faq"><span title="🔧 Help &amp; Support" class="categoryLinkLabel_W154">🔧 Help &amp; Support</span></a></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="/hass.tibber_prices/user/faq"><span title="FAQ - Frequently Asked Questions" class="linkLabel_WmDU">FAQ - Frequently Asked Questions</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="/hass.tibber_prices/user/troubleshooting"><span title="Troubleshooting" class="linkLabel_WmDU">Troubleshooting</span></a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for <!-- -->Tibber Prices Integration<!-- --> <b>Next 🚧</b> version.</div><div class="margin-top--md">For up-to-date documentation, see the <b><a href="/hass.tibber_prices/user/chart-examples">latest version</a></b> (<!-- -->Next 🚧<!-- -->).</div></div><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/hass.tibber_prices/user/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><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"><span class="breadcrumbs__link">🎨 Visualization</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Chart Examples</span></li></ul></nav><span class="theme-doc-version-badge badge badge--secondary">Version: Next 🚧</span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Chart Examples</h1></header>
<p>This guide showcases the different chart configurations available through the <code>tibber_prices.get_apexcharts_yaml</code> action.</p>
<blockquote>
<p><strong>Quick Start:</strong> Call the action with your desired parameters, copy the generated YAML, and paste it into your Lovelace dashboard!</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="overview">Overview<a href="#overview" class="hash-link" aria-label="Direct link to Overview" title="Direct link to Overview" translate="no">​</a></h2>
<p>The integration can generate 4 different chart modes, each optimized for specific use cases:</p>
<table><thead><tr><th>Mode</th><th>Description</th><th>Best For</th><th>Dependencies</th></tr></thead><tbody><tr><td><strong>Today</strong></td><td>Static 24h view of today&#x27;s prices</td><td>Quick daily overview</td><td>ApexCharts Card</td></tr><tr><td><strong>Tomorrow</strong></td><td>Static 24h view of tomorrow&#x27;s prices</td><td>Planning tomorrow</td><td>ApexCharts Card</td></tr><tr><td><strong>Rolling Window</strong></td><td>Dynamic 48h view (today+tomorrow or yesterday+today)</td><td>Always-current overview</td><td>ApexCharts + Config Template Card</td></tr><tr><td><strong>Rolling Window Auto-Zoom</strong></td><td>Dynamic view that zooms in as day progresses</td><td>Real-time focus on remaining day</td><td>ApexCharts + Config Template Card</td></tr></tbody></table>
<p><strong>Screenshots available for:</strong></p>
<ul>
<li class="">✅ Today (static) - Representative of all fixed day views</li>
<li class="">✅ Rolling Window - Shows dynamic Y-axis scaling</li>
<li class="">✅ Rolling Window Auto-Zoom - Shows progressive zoom effect</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="all-chart-modes">All Chart Modes<a href="#all-chart-modes" class="hash-link" aria-label="Direct link to All Chart Modes" title="Direct link to All Chart Modes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-todays-prices-static">1. Today&#x27;s Prices (Static)<a href="#1-todays-prices-static" class="hash-link" aria-label="Direct link to 1. Today&#x27;s Prices (Static)" title="Direct link to 1. Today&#x27;s Prices (Static)" translate="no">​</a></h3>
<p><strong>When to use:</strong> Simple daily price overview, no dynamic updates needed.</p>
<p><strong>Dependencies:</strong> ApexCharts Card only</p>
<p><strong>Generate:</strong></p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">service</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> tibber_prices.get_apexcharts_yaml</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">data</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entry_id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> YOUR_ENTRY_ID</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">day</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">level_type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> rating_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">highlight_best_price</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><br></span></code></pre></div></div>
<p><strong>Screenshot:</strong></p>
<p><img decoding="async" loading="lazy" alt="Today&amp;#39;s Prices - Static 24h View" src="/hass.tibber_prices/user/assets/images/today-7df9c96ed3844407c55b5d71ce188ccf.jpg" width="960" height="704" class="img_ev3q"></p>
<p><strong>Key Features:</strong></p>
<ul>
<li class="">✅ Color-coded price levels (LOW, NORMAL, HIGH)</li>
<li class="">✅ Best price period highlights (vertical bands)</li>
<li class="">✅ Static 24-hour view (00:00 - 23:59)</li>
<li class="">✅ Works with ApexCharts Card alone</li>
</ul>
<p><strong>Note:</strong> Tomorrow view (<code>day: tomorrow</code>) works identically to Today view, just showing tomorrow&#x27;s data. All fixed day views (yesterday/today/tomorrow) use the same visualization approach.</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-rolling-48h-window-dynamic">2. Rolling 48h Window (Dynamic)<a href="#2-rolling-48h-window-dynamic" class="hash-link" aria-label="Direct link to 2. Rolling 48h Window (Dynamic)" title="Direct link to 2. Rolling 48h Window (Dynamic)" translate="no">​</a></h3>
<p><strong>When to use:</strong> Always-current view that automatically switches between yesterday+today and today+tomorrow.</p>
<p><strong>Dependencies:</strong> ApexCharts Card + Config Template Card</p>
<p><strong>Generate:</strong></p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">service</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> tibber_prices.get_apexcharts_yaml</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">data</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entry_id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> YOUR_ENTRY_ID</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Omit &#x27;day&#x27; for rolling window</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">level_type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> rating_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">highlight_best_price</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><br></span></code></pre></div></div>
<p><strong>Screenshot:</strong></p>
<p><img decoding="async" loading="lazy" alt="Rolling 48h Window with Dynamic Y-Axis Scaling" src="/hass.tibber_prices/user/assets/images/rolling-window-6c8a36b71a45f05dce3a59a93a99b808.jpg" width="962" height="705" class="img_ev3q"></p>
<p><strong>Key Features:</strong></p>
<ul>
<li class="">✅ <strong>Dynamic Y-axis scaling</strong> via <code>chart_metadata</code> sensor</li>
<li class="">✅ Automatic data selection: today+tomorrow (when available) or yesterday+today</li>
<li class="">✅ Always shows 48 hours of data</li>
<li class="">✅ Updates automatically when tomorrow&#x27;s data arrives</li>
<li class="">✅ Color gradients for visual appeal</li>
</ul>
<p><strong>How it works:</strong></p>
<ul>
<li class="">Before ~13:00: Shows yesterday + today</li>
<li class="">After ~13:00: Shows today + tomorrow</li>
<li class="">Y-axis automatically adjusts to data range for optimal visualization</li>
</ul>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-rolling-window-auto-zoom-dynamic">3. Rolling Window Auto-Zoom (Dynamic)<a href="#3-rolling-window-auto-zoom-dynamic" class="hash-link" aria-label="Direct link to 3. Rolling Window Auto-Zoom (Dynamic)" title="Direct link to 3. Rolling Window Auto-Zoom (Dynamic)" translate="no">​</a></h3>
<p><strong>When to use:</strong> Real-time focus on remaining day - progressively zooms in as day advances.</p>
<p><strong>Dependencies:</strong> ApexCharts Card + Config Template Card</p>
<p><strong>Generate:</strong></p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">service</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> tibber_prices.get_apexcharts_yaml</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">data</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entry_id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> YOUR_ENTRY_ID</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">day</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> rolling_window_autozoom</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">level_type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> rating_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">highlight_best_price</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><br></span></code></pre></div></div>
<p><strong>Screenshot:</strong></p>
<p><img decoding="async" loading="lazy" alt="Rolling Window Auto-Zoom - Progressive Zoom Effect" src="/hass.tibber_prices/user/assets/images/rolling-window-autozoom-e0a26d16d446e133373ab07b8df6f42a.jpg" width="962" height="706" class="img_ev3q"></p>
<p><strong>Key Features:</strong></p>
<ul>
<li class="">✅ <strong>Progressive zoom:</strong> Graph span decreases every 15 minutes</li>
<li class="">✅ <strong>Dynamic Y-axis scaling</strong> via <code>chart_metadata</code> sensor</li>
<li class="">✅ Always shows: 2 hours lookback + remaining time until midnight</li>
<li class="">✅ Perfect for real-time price monitoring</li>
<li class="">✅ Example: At 18:00, shows 16:00 → 00:00 (8h window)</li>
</ul>
<p><strong>How it works:</strong></p>
<ul>
<li class="">00:00: Shows full 48h window (same as rolling window)</li>
<li class="">06:00: Shows 04:00 → midnight (20h window)</li>
<li class="">12:00: Shows 10:00 → midnight (14h window)</li>
<li class="">18:00: Shows 16:00 → midnight (8h window)</li>
<li class="">23:45: Shows 21:45 → midnight (2.25h window)</li>
</ul>
<p>This creates a &quot;zooming in&quot; effect that focuses on the most relevant remaining time.</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="comparison-level-type-options">Comparison: Level Type Options<a href="#comparison-level-type-options" class="hash-link" aria-label="Direct link to Comparison: Level Type Options" title="Direct link to Comparison: Level Type Options" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="rating-level-3-series">Rating Level (3 series)<a href="#rating-level-3-series" class="hash-link" aria-label="Direct link to Rating Level (3 series)" title="Direct link to Rating Level (3 series)" translate="no">​</a></h3>
<p>Based on <strong>your personal price thresholds</strong> (configured in Options Flow):</p>
<ul>
<li class=""><strong>LOW</strong> (Green): Below your &quot;cheap&quot; threshold</li>
<li class=""><strong>NORMAL</strong> (Blue): Between thresholds</li>
<li class=""><strong>HIGH</strong> (Red): Above your &quot;expensive&quot; threshold</li>
</ul>
<p><strong>Best for:</strong> Personal decision-making based on your budget</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="level-5-series">Level (5 series)<a href="#level-5-series" class="hash-link" aria-label="Direct link to Level (5 series)" title="Direct link to Level (5 series)" translate="no">​</a></h3>
<p>Based on <strong>absolute price ranges</strong> (calculated from daily min/max):</p>
<ul>
<li class=""><strong>VERY_CHEAP</strong> (Dark Green): Bottom 20%</li>
<li class=""><strong>CHEAP</strong> (Light Green): 20-40%</li>
<li class=""><strong>NORMAL</strong> (Blue): 40-60%</li>
<li class=""><strong>EXPENSIVE</strong> (Orange): 60-80%</li>
<li class=""><strong>VERY_EXPENSIVE</strong> (Red): Top 20%</li>
</ul>
<p><strong>Best for:</strong> Objective price distribution visualization</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="dynamic-y-axis-scaling">Dynamic Y-Axis Scaling<a href="#dynamic-y-axis-scaling" class="hash-link" aria-label="Direct link to Dynamic Y-Axis Scaling" title="Direct link to Dynamic Y-Axis Scaling" translate="no">​</a></h2>
<p>Rolling window modes (2 &amp; 3) automatically integrate with the <code>chart_metadata</code> sensor for optimal visualization:</p>
<p><strong>Without chart_metadata sensor (disabled):</strong></p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">┌─────────────────────┐</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ │ ← Lots of empty space</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ___ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ___/ \___ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│_/ \_ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├─────────────────────┤</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">0 100 ct</span><br></span></code></pre></div></div>
<p><strong>With chart_metadata sensor (enabled):</strong></p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">┌─────────────────────┐</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ___ │ ← Y-axis fitted to data</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│ ___/ \___ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│_/ \_ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├─────────────────────┤</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">18 28 ct ← Optimal range</span><br></span></code></pre></div></div>
<p><strong>Requirements:</strong></p>
<ul>
<li class="">✅ The <code>sensor.tibber_home_chart_metadata</code> must be <strong>enabled</strong> (it&#x27;s enabled by default!)</li>
<li class="">✅ That&#x27;s it! The generated YAML automatically uses the sensor for dynamic scaling</li>
</ul>
<p><strong>Important:</strong> Do NOT disable the <code>chart_metadata</code> sensor if you want optimal Y-axis scaling in rolling window modes!</p>
<p><strong>Note:</strong> Fixed day views (<code>today</code>, <code>tomorrow</code>) use ApexCharts&#x27; built-in auto-scaling and don&#x27;t require the metadata sensor.</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="best-price-period-highlights">Best Price Period Highlights<a href="#best-price-period-highlights" class="hash-link" aria-label="Direct link to Best Price Period Highlights" title="Direct link to Best Price Period Highlights" translate="no">​</a></h2>
<p>When <code>highlight_best_price: true</code>, vertical bands overlay the chart showing detected best price periods:</p>
<p><strong>Example:</strong></p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Price</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">30│ ┌─────────┐ Normal prices</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ │ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">25│ ▓▓▓▓▓▓│ │ ← Best price period (shaded)</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ ▓▓▓▓▓▓│ │</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">20│─────▓▓▓▓▓▓│─────────│</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> │ ▓▓▓▓▓▓</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> └─────────────────────── Time</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> 06:00 12:00 18:00</span><br></span></code></pre></div></div>
<p><strong>Features:</strong></p>
<ul>
<li class="">Automatic detection based on your configuration (see <a class="" href="/hass.tibber_prices/user/period-calculation">Period Calculation Guide</a>)</li>
<li class="">Tooltip shows &quot;Best Price Period&quot; label</li>
<li class="">Only appears when periods are configured and detected</li>
<li class="">Can be disabled with <code>highlight_best_price: false</code></li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="required-for-all-modes">Required for All Modes<a href="#required-for-all-modes" class="hash-link" aria-label="Direct link to Required for All Modes" title="Direct link to Required for All Modes" translate="no">​</a></h3>
<ul>
<li class=""><strong><a href="https://github.com/RomRider/apexcharts-card" target="_blank" rel="noopener noreferrer" class="">ApexCharts Card</a></strong>: Core visualization library<!-- -->
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install via HACS</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">HACS → Frontend → Search </span><span class="token string" style="color:#e3116c">&quot;ApexCharts Card&quot;</span><span class="token plain"> → Download</span><br></span></code></pre></div></div>
</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="required-for-rolling-window-modes-only">Required for Rolling Window Modes Only<a href="#required-for-rolling-window-modes-only" class="hash-link" aria-label="Direct link to Required for Rolling Window Modes Only" title="Direct link to Required for Rolling Window Modes Only" translate="no">​</a></h3>
<ul>
<li class=""><strong><a href="https://github.com/iantrich/config-template-card" target="_blank" rel="noopener noreferrer" class="">Config Template Card</a></strong>: Enables dynamic configuration<!-- -->
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># Install via HACS</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">HACS → Frontend → Search </span><span class="token string" style="color:#e3116c">&quot;Config Template Card&quot;</span><span class="token plain"> → Download</span><br></span></code></pre></div></div>
</li>
</ul>
<p><strong>Note:</strong> Fixed day views (<code>today</code>, <code>tomorrow</code>) work with ApexCharts Card alone!</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="tips--tricks">Tips &amp; Tricks<a href="#tips--tricks" class="hash-link" aria-label="Direct link to Tips &amp; Tricks" title="Direct link to Tips &amp; Tricks" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="customizing-colors">Customizing Colors<a href="#customizing-colors" class="hash-link" aria-label="Direct link to Customizing Colors" title="Direct link to Customizing Colors" translate="no">​</a></h3>
<p>Edit the <code>colors</code> array in the generated YAML:</p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">apex_config</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">colors</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;#00FF00&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Change LOW/VERY_CHEAP color</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;#0000FF&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Change NORMAL color</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;#FF0000&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Change HIGH/VERY_EXPENSIVE color</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="changing-chart-height">Changing Chart Height<a href="#changing-chart-height" class="hash-link" aria-label="Direct link to Changing Chart Height" title="Direct link to Changing Chart Height" translate="no">​</a></h3>
<p>Add to the card configuration:</p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">apexcharts</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">graph_span</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> 48h</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">header</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">title</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> My Custom Title</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">apex_config</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">chart</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">height</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">400</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Adjust height in pixels</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="combining-with-other-cards">Combining with Other Cards<a href="#combining-with-other-cards" class="hash-link" aria-label="Direct link to Combining with Other Cards" title="Direct link to Combining with Other Cards" translate="no">​</a></h3>
<p>Wrap in a vertical stack for dashboard integration:</p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> vertical</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">stack</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">cards</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> entity</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">apexcharts</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># ... generated chart config</span><br></span></code></pre></div></div>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="next-steps">Next Steps<a href="#next-steps" class="hash-link" aria-label="Direct link to Next Steps" title="Direct link to Next Steps" translate="no">​</a></h2>
<ul>
<li class=""><strong><a class="" href="/hass.tibber_prices/user/actions">Actions Guide</a></strong>: Complete documentation of <code>get_apexcharts_yaml</code> parameters</li>
<li class=""><strong><a class="" href="/hass.tibber_prices/user/sensors#chart-metadata">Chart Metadata Sensor</a></strong>: Learn about dynamic Y-axis scaling</li>
<li class=""><strong><a class="" href="/hass.tibber_prices/user/period-calculation">Period Calculation Guide</a></strong>: Configure best price period detection</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="screenshots">Screenshots<a href="#screenshots" class="hash-link" aria-label="Direct link to Screenshots" title="Direct link to Screenshots" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="gallery">Gallery<a href="#gallery" class="hash-link" aria-label="Direct link to Gallery" title="Direct link to Gallery" translate="no">​</a></h3>
<ol>
<li class="">
<p><strong>Today View (Static)</strong> - Representative of all fixed day views (yesterday/today/tomorrow)</p>
<p><img decoding="async" loading="lazy" alt="Today View" src="/hass.tibber_prices/user/assets/images/today-7df9c96ed3844407c55b5d71ce188ccf.jpg" width="960" height="704" class="img_ev3q"></p>
</li>
<li class="">
<p><strong>Rolling Window (Dynamic)</strong> - Shows dynamic Y-axis scaling and 48h window</p>
<p><img decoding="async" loading="lazy" alt="Rolling Window" src="/hass.tibber_prices/user/assets/images/rolling-window-6c8a36b71a45f05dce3a59a93a99b808.jpg" width="962" height="705" class="img_ev3q"></p>
</li>
<li class="">
<p><strong>Rolling Window Auto-Zoom (Dynamic)</strong> - Shows progressive zoom effect</p>
<p><img decoding="async" loading="lazy" alt="Rolling Window Auto-Zoom" src="/hass.tibber_prices/user/assets/images/rolling-window-autozoom-e0a26d16d446e133373ab07b8df6f42a.jpg" width="962" height="706" class="img_ev3q"></p>
</li>
</ol>
<p><strong>Note:</strong> Tomorrow view is visually identical to Today view (same chart type, just different data).</p></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_WFHX"><a href="https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/chart-examples.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_Z9Sw" 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_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-12-06T01:37:06.000Z" itemprop="dateModified">Dec 6, 2025</time></b></span></div></div></footer><div style="margin-top:3rem"></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/hass.tibber_prices/user/dashboard-examples"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Dashboard Examples</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/hass.tibber_prices/user/automation-examples"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Automation Examples</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#overview" class="table-of-contents__link toc-highlight">Overview</a></li><li><a href="#all-chart-modes" class="table-of-contents__link toc-highlight">All Chart Modes</a><ul><li><a href="#1-todays-prices-static" class="table-of-contents__link toc-highlight">1. Today&#39;s Prices (Static)</a></li><li><a href="#2-rolling-48h-window-dynamic" class="table-of-contents__link toc-highlight">2. Rolling 48h Window (Dynamic)</a></li><li><a href="#3-rolling-window-auto-zoom-dynamic" class="table-of-contents__link toc-highlight">3. Rolling Window Auto-Zoom (Dynamic)</a></li></ul></li><li><a href="#comparison-level-type-options" class="table-of-contents__link toc-highlight">Comparison: Level Type Options</a><ul><li><a href="#rating-level-3-series" class="table-of-contents__link toc-highlight">Rating Level (3 series)</a></li><li><a href="#level-5-series" class="table-of-contents__link toc-highlight">Level (5 series)</a></li></ul></li><li><a href="#dynamic-y-axis-scaling" class="table-of-contents__link toc-highlight">Dynamic Y-Axis Scaling</a></li><li><a href="#best-price-period-highlights" class="table-of-contents__link toc-highlight">Best Price Period Highlights</a></li><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a><ul><li><a href="#required-for-all-modes" class="table-of-contents__link toc-highlight">Required for All Modes</a></li><li><a href="#required-for-rolling-window-modes-only" class="table-of-contents__link toc-highlight">Required for Rolling Window Modes Only</a></li></ul></li><li><a href="#tips--tricks" class="table-of-contents__link toc-highlight">Tips &amp; Tricks</a><ul><li><a href="#customizing-colors" class="table-of-contents__link toc-highlight">Customizing Colors</a></li><li><a href="#changing-chart-height" class="table-of-contents__link toc-highlight">Changing Chart Height</a></li><li><a href="#combining-with-other-cards" class="table-of-contents__link toc-highlight">Combining with Other Cards</a></li></ul></li><li><a href="#next-steps" class="table-of-contents__link toc-highlight">Next Steps</a></li><li><a href="#screenshots" class="table-of-contents__link toc-highlight">Screenshots</a><ul><li><a href="#gallery" class="table-of-contents__link toc-highlight">Gallery</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">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/hass.tibber_prices/user/intro">User Guide</a></li><li class="footer__item"><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Developer Guide<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><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">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Issues<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://community.home-assistant.io/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Home Assistant Community<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><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://github.com/jpawlowski/hass.tibber_prices" 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_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/releases" target="_blank" rel="noopener noreferrer" class="footer__link-item">Release Notes<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Not affiliated with Tibber AS. Community-maintained custom integration. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>
Reference in a new issue View git blame Copy permalink