jpawlowski/hass.tibber_prices
1
0
Fork 0
mirror of https://github.com/jpawlowski/hass.tibber_prices.git synced 2026-03-30 05:13:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
hass.tibber_prices/user/assets/js/f5506564.89680ad1.js
github-actions[bot] e9aea64a2e deploy: 6898c126e3
2025-12-06 01:42:39 +00:00

1 line
No EOL
22 KiB
JavaScript
Raw Permalink Blame History

"use strict";(globalThis.webpackChunkdocs_split_user=globalThis.webpackChunkdocs_split_user||[]).push([[5902],{572:(e,i,n)=>{n.d(i,{A:()=>s});const s=n.p+"assets/images/rolling-window-autozoom-e0a26d16d446e133373ab07b8df6f42a.jpg"},2478:(e,i,n)=>{n.d(i,{A:()=>s});const s=n.p+"assets/images/today-7df9c96ed3844407c55b5d71ce188ccf.jpg"},5841:(e,i,n)=>{n.d(i,{A:()=>s});const s=n.p+"assets/images/rolling-window-6c8a36b71a45f05dce3a59a93a99b808.jpg"},8019:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>a,contentTitle:()=>d,default:()=>h,frontMatter:()=>t,metadata:()=>s,toc:()=>o});const s=JSON.parse('{"id":"chart-examples","title":"Chart Examples","description":"This guide showcases the different chart configurations available through the tibberprices.getapexcharts_yaml action.","source":"@site/docs/chart-examples.md","sourceDirName":".","slug":"/chart-examples","permalink":"/hass.tibber_prices/user/chart-examples","draft":false,"unlisted":false,"editUrl":"https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/chart-examples.md","tags":[],"version":"current","lastUpdatedAt":1764985026000,"frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Dashboard Examples","permalink":"/hass.tibber_prices/user/dashboard-examples"},"next":{"title":"Automation Examples","permalink":"/hass.tibber_prices/user/automation-examples"}}');var r=n(4848),l=n(8453);const t={},d="Chart Examples",a={},o=[{value:"Overview",id:"overview",level:2},{value:"All Chart Modes",id:"all-chart-modes",level:2},{value:"1. Today's Prices (Static)",id:"1-todays-prices-static",level:3},{value:"2. Rolling 48h Window (Dynamic)",id:"2-rolling-48h-window-dynamic",level:3},{value:"3. Rolling Window Auto-Zoom (Dynamic)",id:"3-rolling-window-auto-zoom-dynamic",level:3},{value:"Comparison: Level Type Options",id:"comparison-level-type-options",level:2},{value:"Rating Level (3 series)",id:"rating-level-3-series",level:3},{value:"Level (5 series)",id:"level-5-series",level:3},{value:"Dynamic Y-Axis Scaling",id:"dynamic-y-axis-scaling",level:2},{value:"Best Price Period Highlights",id:"best-price-period-highlights",level:2},{value:"Prerequisites",id:"prerequisites",level:2},{value:"Required for All Modes",id:"required-for-all-modes",level:3},{value:"Required for Rolling Window Modes Only",id:"required-for-rolling-window-modes-only",level:3},{value:"Tips & Tricks",id:"tips--tricks",level:2},{value:"Customizing Colors",id:"customizing-colors",level:3},{value:"Changing Chart Height",id:"changing-chart-height",level:3},{value:"Combining with Other Cards",id:"combining-with-other-cards",level:3},{value:"Next Steps",id:"next-steps",level:2},{value:"Screenshots",id:"screenshots",level:2},{value:"Gallery",id:"gallery",level:3}];function c(e){const i={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.header,{children:(0,r.jsx)(i.h1,{id:"chart-examples",children:"Chart Examples"})}),"\n",(0,r.jsxs)(i.p,{children:["This guide showcases the different chart configurations available through the ",(0,r.jsx)(i.code,{children:"tibber_prices.get_apexcharts_yaml"})," action."]}),"\n",(0,r.jsxs)(i.blockquote,{children:["\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Quick Start:"})," Call the action with your desired parameters, copy the generated YAML, and paste it into your Lovelace dashboard!"]}),"\n"]}),"\n",(0,r.jsx)(i.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsx)(i.p,{children:"The integration can generate 4 different chart modes, each optimized for specific use cases:"}),"\n",(0,r.jsxs)(i.table,{children:[(0,r.jsx)(i.thead,{children:(0,r.jsxs)(i.tr,{children:[(0,r.jsx)(i.th,{children:"Mode"}),(0,r.jsx)(i.th,{children:"Description"}),(0,r.jsx)(i.th,{children:"Best For"}),(0,r.jsx)(i.th,{children:"Dependencies"})]})}),(0,r.jsxs)(i.tbody,{children:[(0,r.jsxs)(i.tr,{children:[(0,r.jsx)(i.td,{children:(0,r.jsx)(i.strong,{children:"Today"})}),(0,r.jsx)(i.td,{children:"Static 24h view of today's prices"}),(0,r.jsx)(i.td,{children:"Quick daily overview"}),(0,r.jsx)(i.td,{children:"ApexCharts Card"})]}),(0,r.jsxs)(i.tr,{children:[(0,r.jsx)(i.td,{children:(0,r.jsx)(i.strong,{children:"Tomorrow"})}),(0,r.jsx)(i.td,{children:"Static 24h view of tomorrow's prices"}),(0,r.jsx)(i.td,{children:"Planning tomorrow"}),(0,r.jsx)(i.td,{children:"ApexCharts Card"})]}),(0,r.jsxs)(i.tr,{children:[(0,r.jsx)(i.td,{children:(0,r.jsx)(i.strong,{children:"Rolling Window"})}),(0,r.jsx)(i.td,{children:"Dynamic 48h view (today+tomorrow or yesterday+today)"}),(0,r.jsx)(i.td,{children:"Always-current overview"}),(0,r.jsx)(i.td,{children:"ApexCharts + Config Template Card"})]}),(0,r.jsxs)(i.tr,{children:[(0,r.jsx)(i.td,{children:(0,r.jsx)(i.strong,{children:"Rolling Window Auto-Zoom"})}),(0,r.jsx)(i.td,{children:"Dynamic view that zooms in as day progresses"}),(0,r.jsx)(i.td,{children:"Real-time focus on remaining day"}),(0,r.jsx)(i.td,{children:"ApexCharts + Config Template Card"})]})]})]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Screenshots available for:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsx)(i.li,{children:"\u2705 Today (static) - Representative of all fixed day views"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Rolling Window - Shows dynamic Y-axis scaling"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Rolling Window Auto-Zoom - Shows progressive zoom effect"}),"\n"]}),"\n",(0,r.jsx)(i.h2,{id:"all-chart-modes",children:"All Chart Modes"}),"\n",(0,r.jsx)(i.h3,{id:"1-todays-prices-static",children:"1. Today's Prices (Static)"}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"When to use:"})," Simple daily price overview, no dynamic updates needed."]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Dependencies:"})," ApexCharts Card only"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Generate:"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:"service: tibber_prices.get_apexcharts_yaml\ndata:\n entry_id: YOUR_ENTRY_ID\n day: today\n level_type: rating_level\n highlight_best_price: true\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Screenshot:"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Today's Prices - Static 24h View",src:n(2478).A+"",width:"960",height:"704"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Key Features:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsx)(i.li,{children:"\u2705 Color-coded price levels (LOW, NORMAL, HIGH)"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Best price period highlights (vertical bands)"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Static 24-hour view (00:00 - 23:59)"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Works with ApexCharts Card alone"}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Note:"})," Tomorrow view (",(0,r.jsx)(i.code,{children:"day: tomorrow"}),") works identically to Today view, just showing tomorrow's data. All fixed day views (yesterday/today/tomorrow) use the same visualization approach."]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h3,{id:"2-rolling-48h-window-dynamic",children:"2. Rolling 48h Window (Dynamic)"}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"When to use:"})," Always-current view that automatically switches between yesterday+today and today+tomorrow."]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Dependencies:"})," ApexCharts Card + Config Template Card"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Generate:"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:"service: tibber_prices.get_apexcharts_yaml\ndata:\n entry_id: YOUR_ENTRY_ID\n # Omit 'day' for rolling window\n level_type: rating_level\n highlight_best_price: true\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Screenshot:"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Rolling 48h Window with Dynamic Y-Axis Scaling",src:n(5841).A+"",width:"962",height:"705"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Key Features:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:["\u2705 ",(0,r.jsx)(i.strong,{children:"Dynamic Y-axis scaling"})," via ",(0,r.jsx)(i.code,{children:"chart_metadata"})," sensor"]}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Automatic data selection: today+tomorrow (when available) or yesterday+today"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Always shows 48 hours of data"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Updates automatically when tomorrow's data arrives"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Color gradients for visual appeal"}),"\n"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"How it works:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsx)(i.li,{children:"Before ~13:00: Shows yesterday + today"}),"\n",(0,r.jsx)(i.li,{children:"After ~13:00: Shows today + tomorrow"}),"\n",(0,r.jsx)(i.li,{children:"Y-axis automatically adjusts to data range for optimal visualization"}),"\n"]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h3,{id:"3-rolling-window-auto-zoom-dynamic",children:"3. Rolling Window Auto-Zoom (Dynamic)"}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"When to use:"})," Real-time focus on remaining day - progressively zooms in as day advances."]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Dependencies:"})," ApexCharts Card + Config Template Card"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Generate:"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:"service: tibber_prices.get_apexcharts_yaml\ndata:\n entry_id: YOUR_ENTRY_ID\n day: rolling_window_autozoom\n level_type: rating_level\n highlight_best_price: true\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Screenshot:"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Rolling Window Auto-Zoom - Progressive Zoom Effect",src:n(572).A+"",width:"962",height:"706"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Key Features:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:["\u2705 ",(0,r.jsx)(i.strong,{children:"Progressive zoom:"})," Graph span decreases every 15 minutes"]}),"\n",(0,r.jsxs)(i.li,{children:["\u2705 ",(0,r.jsx)(i.strong,{children:"Dynamic Y-axis scaling"})," via ",(0,r.jsx)(i.code,{children:"chart_metadata"})," sensor"]}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Always shows: 2 hours lookback + remaining time until midnight"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Perfect for real-time price monitoring"}),"\n",(0,r.jsx)(i.li,{children:"\u2705 Example: At 18:00, shows 16:00 \u2192 00:00 (8h window)"}),"\n"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"How it works:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsx)(i.li,{children:"00:00: Shows full 48h window (same as rolling window)"}),"\n",(0,r.jsx)(i.li,{children:"06:00: Shows 04:00 \u2192 midnight (20h window)"}),"\n",(0,r.jsx)(i.li,{children:"12:00: Shows 10:00 \u2192 midnight (14h window)"}),"\n",(0,r.jsx)(i.li,{children:"18:00: Shows 16:00 \u2192 midnight (8h window)"}),"\n",(0,r.jsx)(i.li,{children:"23:45: Shows 21:45 \u2192 midnight (2.25h window)"}),"\n"]}),"\n",(0,r.jsx)(i.p,{children:'This creates a "zooming in" effect that focuses on the most relevant remaining time.'}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"comparison-level-type-options",children:"Comparison: Level Type Options"}),"\n",(0,r.jsx)(i.h3,{id:"rating-level-3-series",children:"Rating Level (3 series)"}),"\n",(0,r.jsxs)(i.p,{children:["Based on ",(0,r.jsx)(i.strong,{children:"your personal price thresholds"})," (configured in Options Flow):"]}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"LOW"}),' (Green): Below your "cheap" threshold']}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"NORMAL"})," (Blue): Between thresholds"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"HIGH"}),' (Red): Above your "expensive" threshold']}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Best for:"})," Personal decision-making based on your budget"]}),"\n",(0,r.jsx)(i.h3,{id:"level-5-series",children:"Level (5 series)"}),"\n",(0,r.jsxs)(i.p,{children:["Based on ",(0,r.jsx)(i.strong,{children:"absolute price ranges"})," (calculated from daily min/max):"]}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"VERY_CHEAP"})," (Dark Green): Bottom 20%"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"CHEAP"})," (Light Green): 20-40%"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"NORMAL"})," (Blue): 40-60%"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"EXPENSIVE"})," (Orange): 60-80%"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:"VERY_EXPENSIVE"})," (Red): Top 20%"]}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Best for:"})," Objective price distribution visualization"]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"dynamic-y-axis-scaling",children:"Dynamic Y-Axis Scaling"}),"\n",(0,r.jsxs)(i.p,{children:["Rolling window modes (2 & 3) automatically integrate with the ",(0,r.jsx)(i.code,{children:"chart_metadata"})," sensor for optimal visualization:"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Without chart_metadata sensor (disabled):"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u2502 \u2190 Lots of empty space\n\u2502 ___ \u2502\n\u2502 ___/ \\___ \u2502\n\u2502_/ \\_ \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n0 100 ct\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"With chart_metadata sensor (enabled):"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 ___ \u2502 \u2190 Y-axis fitted to data\n\u2502 ___/ \\___ \u2502\n\u2502_/ \\_ \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n18 28 ct \u2190 Optimal range\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Requirements:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:["\u2705 The ",(0,r.jsx)(i.code,{children:"sensor.tibber_home_chart_metadata"})," must be ",(0,r.jsx)(i.strong,{children:"enabled"})," (it's enabled by default!)"]}),"\n",(0,r.jsx)(i.li,{children:"\u2705 That's it! The generated YAML automatically uses the sensor for dynamic scaling"}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Important:"})," Do NOT disable the ",(0,r.jsx)(i.code,{children:"chart_metadata"})," sensor if you want optimal Y-axis scaling in rolling window modes!"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Note:"})," Fixed day views (",(0,r.jsx)(i.code,{children:"today"}),", ",(0,r.jsx)(i.code,{children:"tomorrow"}),") use ApexCharts' built-in auto-scaling and don't require the metadata sensor."]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"best-price-period-highlights",children:"Best Price Period Highlights"}),"\n",(0,r.jsxs)(i.p,{children:["When ",(0,r.jsx)(i.code,{children:"highlight_best_price: true"}),", vertical bands overlay the chart showing detected best price periods:"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Example:"})}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{children:"Price\n \u2502\n30\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 Normal prices\n \u2502 \u2502 \u2502\n25\u2502 \u2593\u2593\u2593\u2593\u2593\u2593\u2502 \u2502 \u2190 Best price period (shaded)\n \u2502 \u2593\u2593\u2593\u2593\u2593\u2593\u2502 \u2502\n20\u2502\u2500\u2500\u2500\u2500\u2500\u2593\u2593\u2593\u2593\u2593\u2593\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502\n \u2502 \u2593\u2593\u2593\u2593\u2593\u2593\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Time\n 06:00 12:00 18:00\n"})}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.strong,{children:"Features:"})}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:["Automatic detection based on your configuration (see ",(0,r.jsx)(i.a,{href:"/hass.tibber_prices/user/period-calculation",children:"Period Calculation Guide"}),")"]}),"\n",(0,r.jsx)(i.li,{children:'Tooltip shows "Best Price Period" label'}),"\n",(0,r.jsx)(i.li,{children:"Only appears when periods are configured and detected"}),"\n",(0,r.jsxs)(i.li,{children:["Can be disabled with ",(0,r.jsx)(i.code,{children:"highlight_best_price: false"})]}),"\n"]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,r.jsx)(i.h3,{id:"required-for-all-modes",children:"Required for All Modes"}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:(0,r.jsx)(i.a,{href:"https://github.com/RomRider/apexcharts-card",children:"ApexCharts Card"})}),": Core visualization library","\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-bash",children:'# Install via HACS\nHACS \u2192 Frontend \u2192 Search "ApexCharts Card" \u2192 Download\n'})}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(i.h3,{id:"required-for-rolling-window-modes-only",children:"Required for Rolling Window Modes Only"}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:(0,r.jsx)(i.a,{href:"https://github.com/iantrich/config-template-card",children:"Config Template Card"})}),": Enables dynamic configuration","\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-bash",children:'# Install via HACS\nHACS \u2192 Frontend \u2192 Search "Config Template Card" \u2192 Download\n'})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Note:"})," Fixed day views (",(0,r.jsx)(i.code,{children:"today"}),", ",(0,r.jsx)(i.code,{children:"tomorrow"}),") work with ApexCharts Card alone!"]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"tips--tricks",children:"Tips & Tricks"}),"\n",(0,r.jsx)(i.h3,{id:"customizing-colors",children:"Customizing Colors"}),"\n",(0,r.jsxs)(i.p,{children:["Edit the ",(0,r.jsx)(i.code,{children:"colors"})," array in the generated YAML:"]}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:'apex_config:\n colors:\n - "#00FF00" # Change LOW/VERY_CHEAP color\n - "#0000FF" # Change NORMAL color\n - "#FF0000" # Change HIGH/VERY_EXPENSIVE color\n'})}),"\n",(0,r.jsx)(i.h3,{id:"changing-chart-height",children:"Changing Chart Height"}),"\n",(0,r.jsx)(i.p,{children:"Add to the card configuration:"}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:"type: custom:apexcharts-card\ngraph_span: 48h\nheader:\n show: true\n title: My Custom Title\napex_config:\n chart:\n height: 400 # Adjust height in pixels\n"})}),"\n",(0,r.jsx)(i.h3,{id:"combining-with-other-cards",children:"Combining with Other Cards"}),"\n",(0,r.jsx)(i.p,{children:"Wrap in a vertical stack for dashboard integration:"}),"\n",(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:"language-yaml",children:"type: vertical-stack\ncards:\n - type: entity\n entity: sensor.tibber_home_current_interval_price\n - type: custom:apexcharts-card\n # ... generated chart config\n"})}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"next-steps",children:"Next Steps"}),"\n",(0,r.jsxs)(i.ul,{children:["\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:(0,r.jsx)(i.a,{href:"/hass.tibber_prices/user/actions",children:"Actions Guide"})}),": Complete documentation of ",(0,r.jsx)(i.code,{children:"get_apexcharts_yaml"})," parameters"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:(0,r.jsx)(i.a,{href:"/hass.tibber_prices/user/sensors#chart-metadata",children:"Chart Metadata Sensor"})}),": Learn about dynamic Y-axis scaling"]}),"\n",(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.strong,{children:(0,r.jsx)(i.a,{href:"/hass.tibber_prices/user/period-calculation",children:"Period Calculation Guide"})}),": Configure best price period detection"]}),"\n"]}),"\n",(0,r.jsx)(i.hr,{}),"\n",(0,r.jsx)(i.h2,{id:"screenshots",children:"Screenshots"}),"\n",(0,r.jsx)(i.h3,{id:"gallery",children:"Gallery"}),"\n",(0,r.jsxs)(i.ol,{children:["\n",(0,r.jsxs)(i.li,{children:["\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Today View (Static)"})," - Representative of all fixed day views (yesterday/today/tomorrow)"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Today View",src:n(2478).A+"",width:"960",height:"704"})}),"\n"]}),"\n",(0,r.jsxs)(i.li,{children:["\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Rolling Window (Dynamic)"})," - Shows dynamic Y-axis scaling and 48h window"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Rolling Window",src:n(5841).A+"",width:"962",height:"705"})}),"\n"]}),"\n",(0,r.jsxs)(i.li,{children:["\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Rolling Window Auto-Zoom (Dynamic)"})," - Shows progressive zoom effect"]}),"\n",(0,r.jsx)(i.p,{children:(0,r.jsx)(i.img,{alt:"Rolling Window Auto-Zoom",src:n(572).A+"",width:"962",height:"706"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.p,{children:[(0,r.jsx)(i.strong,{children:"Note:"})," Tomorrow view is visually identical to Today view (same chart type, just different data)."]})]})}function h(e={}){const{wrapper:i}={...(0,l.R)(),...e.components};return i?(0,r.jsx)(i,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);
Reference in a new issue View git blame Copy permalink