🔧 Improvements

🗂️ A Reorganized Editor

📋 Card-level: 6 focused tabs

The General Settings panel is now organized into a clear 3 × 2 grid:

Each tab holds only what belongs to that topic — no more long scroll of mixed options.

• Chart — chart mode, sparkline, graph data, animation, grid, legend, and pie/heatmap-specific options
• Card — header text & typography, icon, and card styling (shadow, border, padding, background, etc.)
• Overlay — interval picker, attribute list, tooltip, brush zooming, tooltip sync, battery indicator, annotations
• X Axis / Y Axis — visibility, labels, grid, bounds
• Calendar — date picker, energy sync, and time window settings

🎯 Tabs adapt to your chart mode

The tab bar hides options that don't apply to your current chart type:

• Pie / Ranking / Radar → Y Axis and Calendar tabs disappear
• State Timeline → only Calendar shows (no axis tabs)
• Sparkline mode → only Chart and Card stay visible

You'll never see a tab full of greyed-out options.

🔷 Entity-level: 6 focused tabs

Each entity's expanded settings now use the same 3 × 2 layout:

• General — entity, name, unit, tap action
• Graph — graph type, line, fill, data points, Y axis range
• Basic — Y axis, attribute, aggregation, points/hour, decimals, number format, legend
• State Row — primary/secondary value, name position, MDI icon, font sizes, adaptive color, trend icon
• Colors — line/fill/icon/state colors, rise/fall, color thresholds
• Advanced — forecast horizon, offset, value factor, value transform, fixed value, invert, state map, attribute data source

Power-user fields you rarely change live in Advanced, so the Basic tab stays clean for everyday adjustments.

📂 Entities section is now collapsible

The Entities list above the General Settings panel can now be folded away when you want to focus on configuration. It's open by default and matches the look of the General Settings panel.

---

🎨 Card styling without card-mod

A whole class of card-mod tweaks is now built into the editor. Open the Card tab to find:

🔲 Border, shape & spacing

• Border Radius — round the card corners. Type 12, 0, or any CSS value like 1rem.
• Border Color — custom border color (only available when Card Border is on).
• Border Width — set border thickness in pixels.
• Padding — inner spacing of the card. Use a single number or any CSS shorthand like 8px 16px.

🖼️ Background

• Background — now supports rgba(...) for partial transparency. Example: rgba(155, 150, 150, 0.3) gives you a soft, translucent card while keeping your chart fully readable.
• Background Image — set any image as the card background. Local files in /config/www/ work with friendly paths:
  • local/photos/sunset.jpg ✓
  • photos/sunset.jpg ✓
  • /local/photos/sunset.jpg ✓
  • https://example.com/image.jpg ✓
• Background Blur — softens just the background image while keeping your chart, header, and other content perfectly sharp. Try values like 4 to 12 for atmospheric backgrounds.

🔤 Header typography

In the Header section you'll find:

• Header Color — custom color for the title text
• Header Weight — 300, 400, 600, bold, etc.
• Letter Spacing — fine-tune the spacing between characters

---

⏪ Forecast Horizon now supports negative values

The Forecast Horizon field used to only shift data forward in time (for sensors whose state predicts T+N hours ahead). It now also accepts negative values — useful when you have an attribute-based forecast (e.g. Solcast PV, EPEX prices, weather forecast) and want to overlay tomorrow's forecast onto today's chart:

- entity: sensor.solcast_pv_forecast_tomorrow
  data_attribute: detailedHourly
  data_time_field: period_start
  data_value_field: pv_estimate
  name: Tomorrow's forecast (shown today)
  forecast_horizon: -24

This shifts each forecast point 24 hours backward, so tomorrow's predictions line up with today's chart timeline. The X-axis stays where it is — only the data slides.

Positive values continue to work exactly as before.

✨ New Features & 🐛 Bug Fixes

🎯 Primary Value Works in All Chart Modes

The Primary Value dropdown (State / Last / Sum / Avg / Min / Max / First) was designed with Timeline in mind but always worked in other chart modes too — the editor tooltip just didn't explain this. The tooltip has been rewritten to clarify:

• Sum / Avg / Min / Max make sense in every chart mode — they aggregate over the visible data window
• Last / First are most useful in time-based modes (Timeline, Scatter, State Timeline). In Pie, Ranking, Heatmap and similar modes they still work, but they reflect the endpoints of the raw series, not any visible slice or cell

When you pick Last or First in a non-temporal chart mode, a small inline warning appears under the dropdown as a reminder. The warning updates live as you change the selection.

---

🕳️ Break Line on Gaps (Per-Entity Toggle)

When a sensor goes unavailable or unknown, the line would previously be carried through the gap using the last known value, so the chart looked continuous even across long outages. A new per-entity toggle break_on_null lets you opt in to breaking the line at outages instead:

entities:
  - entity: sensor.steady_sensor
    # default — continuous line, last known value carried across any gap
  - entity: sensor.flakey_sensor
    break_on_null: true
    # outages show as visible breaks in the line

The toggle is exposed in the editor under each entity's General panel, next to Show Average and Range Band. Because the option only applies to continuous time-series charts, it's only shown (and persisted) for timeline mode. Value-transform scripts that return null to drop a bucket are completely unaffected — those nulls are removed from the series before the carry-forward logic runs.

---

🎨 State Timeline: Configurable Corner Radius

State timeline segments now have a state_timeline_corner_radius option (0–20 px, default 3) so you can go from perfectly sharp edges to pill-shaped segments. The default matches the previous look, so nothing changes until you decide otherwise. Power users can also target the new sgc-stl-cell CSS class from card_mod for per-state styling.

chart_mode: state_timeline
state_timeline_corner_radius: 0   # sharp
# or
state_timeline_corner_radius: 10  # pill

The option is also exposed in the Visual Options editor when chart mode is state_timeline.

---

📜 State Timeline: Visible Window + Horizontal Scroll

max_visible_interval and scroll_mode — previously only available in regular Timeline mode — now work in State Timeline too. When max_visible_interval is smaller than hours_to_show, the chart becomes horizontally scrollable with the rightmost (most recent) position shown by default. Both scroll_mode: scrollbar (default) and scroll_mode: wheel (mouse-wheel scrolling) are supported.

chart_mode: state_timeline
hours_to_show: 168          # 7 days loaded
max_visible_interval: 24    # 24 hours visible at a time
scroll_mode: scrollbar      # or 'wheel'

This uses the same CSS and scroll mechanics as the regular timeline — consistent behaviour across chart types.

---

🔥 Heatmap and Calendar: Future Cells in Evening Timezones (#151)

📊 Year View: Line Aligns With Bars (#148)

⏰ Graph Start/End Hour Without Show Full Period (#147)

🎯 Bar Hover Highlight: Accurate Hit-Testing (#148)

📈 Year View: Hover Dot Sits On The Line (Line-Only Charts) (#148)

👆 State Timeline: Tap Action on graph (#152)

🥧 Pie Chart Label Improvements (#146)

🔧 Improvement

For the all recent Feature Requests details please see here

v2.27

diff removed from the editor

diff has always been an internal alias for change — the two produced identical results. To avoid confusion, the Aggregation dropdown in the visual editor no longer lists diff.

Backward compatible: existing YAML configurations using aggregate_func: diff continue to work exactly as before. If you hand-write YAML, the value is still accepted. New configurations should use change.

Editor tooltip

The Aggregation tooltip in the per-entity editor now describes each function with its precise formula and typical use case, matching the table above.

v2.26

✨ New Features

🔮 Forecast Horizon

For sensors whose current state represents a prediction for N hours ahead (e.g. "Solar forecast in 1 hour", "Temperature in 3 hours"), set forecast_horizon: N on the entity. The chart shifts each recorded value forward by N hours so it lands at the time it was predicting. The X-axis auto-extends to keep shifted data visible.

entities:
  - entity: sensor.solcast_pv_forecast_leistung_in_1_stunde
    forecast_horizon: 1

Available in the editor under the entity's Data settings, next to Value Factor and Number Format. Works alongside the existing offset option — offset shifts data backward (for past-period comparison), forecast_horizon shifts forward (for future prediction display).

⏱️ "Now" Line

A vertical line marking the current moment, enabled by default. Customize under Annotations → Now Line in the editor: color, opacity, width, line style (solid, dashed, dotted, long-dash), or disable entirely.

📏 Rounded Y-axis Ticks

Y-axis now picks clean round values (0, 500, 1000, 1500 instead of 0, 511.5, 1023, …) that fit within your data range without expanding it. Grid lines and labels align perfectly. Enabled by default; toggle via Y Axis → Labels → Y Axis Round Ticks or y_axis_round_ticks: false.

🔢 Primary Value Dropdown

Pick which value appears next to each entity name in the state row: Live State, Last, Sum, Avg, Min, Max, or First. Useful for clean header-only entities when combined with show_graph: false. Replaces the older "Show Last" toggle (which is still honored if you have it set). Adaptive Color toggle remains in the same section.

📐 Stacked Name Layout

Set name_position: below on an entity to show its value large with the entity name centered underneath (ApexCharts-style). The default side-by-side layout is unchanged. Configured via the new Name Position dropdown in the entity's State Row section.

🎨 Card Shadow and Border Toggles

Both are now togglable independently in the editor. Enabled by default.

🏷️ Blank Name Support in State Timeline

In the State Timeline chart, setting an entity's name to an empty string now produces a blank label and the chart uses the full width (the label column collapses). Helpful when you want a clean look without the entity name taking up space. Previously, an empty name fell back to the friendly name.

entities:
  - entity: binary_sensor.door
    name: ""          # no label, graph shifts left

If name is omitted entirely (as before), the friendly name is still used.

---

🐛 Fixes

🔄 Mirror (Invert) View Behaves Correctly

When an entity is mirrored with invert: true:

• Fill now stops at the zero baseline instead of extending to the bottom of the chart. Mirrored lines fill upward to zero, normal lines fill downward to zero, and series that cross zero get a clean positive/negative split.
• Displayed values are positive again across the state row, legend (Min / Avg / Max / Last / Sum), tooltips and extrema labels. The mirror remains a purely visual transformation; the numbers you read match the original sensor values.

🪟 Forecast Data No Longer Overrides Your Window

When using a forecast sensor with many days of future data (e.g. a 10-day weather forecast), the chart used to open showing the full forecast range on the first render and snap back to your configured window ~30 seconds later. Now, if you set show_full_period or a graph_start anchor, your window is respected from the start.

🖼️ First-Render Stability for Forecast Entities

The chart takes a safe copy of forecast data when reading it, preventing brief visual glitches (zigzags, spikes) that could occur on the first paint if a weather integration was still updating its data. Additionally, rendering before the card is fully sized no longer drops detail on dense forecast series — full resolution is preserved until the card's real size is known.

⚡ Energy Dashboard Date Picker with Past Periods

When syncing with the energy date picker and selecting a past period (last week, last month, etc.), the chart no longer leaves empty space on the right side. The chart end now correctly follows the selected period instead of being clamped to "now".

📊 Range Band with Calendar Groupings

Range band now works correctly with group_by: date and other calendar groupings. Min/max bands show the actual range instead of collapsing to the average line.

✂️ Sparkline Edge Clipping

Curved sparklines ending near a card boundary now render cleanly without the line being cut off.

🥧 Pie / Radar / Ranking Chart Editor

Configuration options for these chart types are now accessible in the editor — the X-axis tab is correctly exposed.

🧹 Various Polish

• Month tick alignment corrected
• Page transitions no longer show stale cached data
• Custom unit now appears in tooltips
• Graph End Hour rescales the visible range correctly
• Hidden state rows styled consistently
• Heatmap and calendar views work with dark themes
• "Today" option in the Graph Start dropdown works as expected
• Mobile: touch interactions no longer cause stuck hover states
• Brush Zoom toggle available
• Chart font follows your Home Assistant theme

✨ New Features & 🐛 Bug Fix

✨ New Features

🔮 Forecast Horizon

For sensors whose current state represents a prediction for N hours ahead (e.g. "Solar forecast in 1 hour", "Temperature in 3 hours"), set forecast_horizon: N on the entity. The chart shifts each recorded value forward by N hours so it lands at the time it was predicting. The X-axis auto-extends to keep shifted data visible.

entities:
  - entity: sensor.solcast_pv_forecast_leistung_in_1_stunde
    forecast_horizon: 1

Available in the editor under the entity's Data settings, next to Value Factor and Number Format. Works alongside the existing offset option — offset shifts data backward (for past-period comparison), forecast_horizon shifts forward (for future prediction display).

⏱️ "Now" Line

A vertical line marking the current moment, enabled by default. Customize under Annotations → Now Line in the editor: color, opacity, width, line style (solid, dashed, dotted, long-dash), or disable entirely.

📏 Rounded Y-axis Ticks

Y-axis now picks clean round values (0, 500, 1000, 1500 instead of 0, 511.5, 1023, …) that fit within your data range without expanding it. Grid lines and labels align perfectly. Enabled by default; toggle via Y Axis → Labels → Y Axis Round Ticks or y_axis_round_ticks: false.

🔢 Primary Value Dropdown

Pick which value appears next to each entity name in the state row: Live State, Last, Sum, Avg, Min, Max, or First. Useful for clean header-only entities when combined with show_graph: false. Replaces the older "Show Last" toggle (which is still honored if you have it set). Adaptive Color toggle remains in the same section.

📐 Stacked Name Layout

Set name_position: below on an entity to show its value large with the entity name centered underneath (ApexCharts-style). The default side-by-side layout is unchanged. Configured via the new Name Position dropdown in the entity's State Row section.

🎨 Card Shadow and Border Toggles

Both are now togglable independently in the editor. Enabled by default.

🏷️ Blank Name Support in State Timeline

In the State Timeline chart, setting an entity's name to an empty string now produces a blank label and the chart uses the full width (the label column collapses). Helpful when you want a clean look without the entity name taking up space. Previously, an empty name fell back to the friendly name.

entities:
  - entity: binary_sensor.door
    name: ""          # no label, graph shifts left

If name is omitted entirely (as before), the friendly name is still used.

---

🐛 Fixes

🔄 Mirror (Invert) View Behaves Correctly

When an entity is mirrored with invert: true:

• Fill now stops at the zero baseline instead of extending to the bottom of the chart. Mirrored lines fill upward to zero, normal lines fill downward to zero, and series that cross zero get a clean positive/negative split.
• Displayed values are positive again across the state row, legend (Min / Avg / Max / Last / Sum), tooltips and extrema labels. The mirror remains a purely visual transformation; the numbers you read match the original sensor values.

🪟 Forecast Data No Longer Overrides Your Window

When using a forecast sensor with many days of future data (e.g. a 10-day weather forecast), the chart used to open showing the full forecast range on the first render and snap back to your configured window ~30 seconds later. Now, if you set show_full_period or a graph_start anchor, your window is respected from the start.

🖼️ First-Render Stability for Forecast Entities

The chart takes a safe copy of forecast data when reading it, preventing brief visual glitches (zigzags, spikes) that could occur on the first paint if a weather integration was still updating its data. Additionally, rendering before the card is fully sized no longer drops detail on dense forecast series — full resolution is preserved until the card's real size is known.

⚡ Energy Dashboard Date Picker with Past Periods

When syncing with the energy date picker and selecting a past period (last week, last month, etc.), the chart no longer leaves empty space on the right side. The chart end now correctly follows the selected period instead of being clamped to "now".

📊 Range Band with Calendar Groupings

Range band now works correctly with group_by: date and other calendar groupings. Min/max bands show the actual range instead of collapsing to the average line.

✂️ Sparkline Edge Clipping

Curved sparklines ending near a card boundary now render cleanly without the line being cut off.

🥧 Pie / Radar / Ranking Chart Editor

Configuration options for these chart types are now accessible in the editor — the X-axis tab is correctly exposed.

🧹 Various Polish

• Month tick alignment corrected
• Page transitions no longer show stale cached data
• Custom unit now appears in tooltips
• Graph End Hour rescales the visible range correctly
• Hidden state rows styled consistently
• Heatmap and calendar views work with dark themes
• "Today" option in the Graph Start dropdown works as expected
• Mobile: touch interactions no longer cause stuck hover states
• Brush Zoom toggle available
• Chart font follows your Home Assistant theme

TEST

🎯 Primary Value Works in All Chart Modes

The Primary Value dropdown (State / Last / Sum / Avg / Min / Max / First) was designed with Timeline in mind but always worked in other chart modes too — the editor tooltip just didn't explain this. The tooltip has been rewritten to clarify:

• Sum / Avg / Min / Max make sense in every chart mode — they aggregate over the visible data window
• Last / First are most useful in time-based modes (Timeline, Scatter, State Timeline). In Pie, Ranking, Heatmap and similar modes they still work, but they reflect the endpoints of the raw series, not any visible slice or cell

When you pick Last or First in a non-temporal chart mode, a small inline warning appears under the dropdown as a reminder. The warning updates live as you change the selection.

🔥 Heatmap and Calendar: Future Cells in Evening Timezones (#151)

📊 Year View: Line Aligns With Bars (#148)

⏰ Graph Start/End Hour Without Show Full Period (#147)

✨ New Features & 🔧 Improvements

Please DO NOT FORGET TO CLEAR YOUR CACHE on BROWSER and MOBILE APP AFTER THE UPDATE.

📊 State Timeline Chart Mode

A brand-new chart mode for non-numeric data. Displays horizontal colored bars showing when states changed — perfect for visualizing window open/close times, power source switching, or any on/off entity.

type: custom:statistics-graph-chart-card
height: 90
chart_mode: state_timeline
entities:
  - entity: binary_sensor.alarm_zone_5
    name: Motion
    state_map:
      - value: "off"
        label: Clear
        color: "#e74c3c"
      - value: "on"
        label: Detected
        color: "#5dade2"
  - entity: binary_sensor.alarm_zone_2
    name: Downstairs
    state_map:
      - value: "off"
        label: Closed
        color: "#e74c3c"
      - value: "on"
        label: Open
        color: "#5dade2"
annotations: []

• Entity name displayed on the left
• State label shown inside each segment when wide enough
• Tooltip with state name, duration, and time range on hover
• Works with binary_sensor, input_boolean, input_select, and any entity with state_map
• Automatically derives state maps for binary sensors
• Available in the editor Chart Mode dropdown

🌅 Dynamic Graph Start & End Hours

graph_start_hour and the new graph_end_hour now work as daily time filters — ideal for solar panels, outdoor sensors, or anything where nighttime data is irrelevant.

graph_start_hour: sensor.sunrise_hour
graph_end_hour: sensor.sunset_hour
hours_to_show: 168

• Entity references — point to a sensor instead of a fixed number. The graph updates automatically when the sensor changes.
• Decimal hours — 6.5 means 06:30.
• Multi-day filtering — when viewing a week or month, each day only shows data within the specified hours. Lines break naturally between days.
• Works with Date Picker — in Day mode, trims the X-axis start. In Week/Month/Year modes, filters data per day.
• Independent of hours_to_show — set hours_to_show: 168 for a full week, combined with graph_start_hour: 6 to only see daytime data each day.
• Available in the editor under Time Window as text inputs that accept both numbers and entity IDs.

🎨 Card Background Color

Set a custom background color directly in the card config — no more card_mod workarounds that break on re-render. Available in the editor under Chart → Background.

card_background_color: "#000000"

🔥 fire-dom-event Tap Action support (yaml only)

Tap actions now support fire-dom-event for integration with browser_mod popups and other custom components. Configure via YAML:

entities:
  - entity: sensor.temperature
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:mini-graph-card
            entity: sensor.temperature

---

Improvements

Sparkline Mode

• Thinner default line (1px) for a cleaner look
• Lines no longer appear distorted or overly thick — consistent stroke width in all directions
• Fill opacity reduced to match the subtle look of earlier versions
• Entity settings now respected: line_width, show_fill, and smooth all work in sparkline mode
• Color threshold directions (vertical / horizontal) and transitions (smooth / hard) work correctly

Tooltip

• Range band — when show_range_band is enabled, the tooltip shows a "Range" row with min → max values, matching the original format
• Monthly bars — correct bar highlights when hovering with equal-spacing active

Date Picker

• date_picker_position: bottom now works reliably

Canvas Charts

• CSS variables like var(--primary-text-color) now resolve correctly for pie_center_color, pie_label_color, and entity colors in all canvas-based charts (Pie, Radial Bar, Polar Area, Radar, Ranking, Heatmap, Calendar)

Equal Monthly Bar Spacing

When using group_by: month with bar charts, all months now have equal visual width regardless of their day count (28–31 days). February and March bars are the same size. Tooltip hover and bar highlighting are correctly aligned with the new positions.

---

Configuration Reference

Option	Type	Default	Description
chart_mode	string	timeline	Now includes state_timeline
card_background_color	color	—	Card background override
graph_start_hour	number / entity	—	Daily start hour filter
graph_end_hour	number / entity	—	Daily end hour filter
date_picker_position	top / bottom	top	Date picker placement

✨ New Features & 🐛 Bug Fixes

✨ New Features

🎯 Color Threshold Direction & Transition

Color thresholds now have two independent settings:

Direction — which axis colors are painted along:

• Vertical — Y-axis gradient. The entire chart is colored based on value height.
• Horizontal — per-segment coloring along the time axis. Each line segment gets the color of its value.

Transition — how colors change at threshold boundaries:

• Smooth — gradual blend between adjacent threshold colors.
• Hard — instant color switch at the threshold value.

All four combinations are available from the editor under Colors → Color Thresholds.

✏️ Annotation Manual Mode

Event markers and time spans can now be configured with fixed timestamps directly from the editor — no YAML required. A new Source toggle switches between:

• Entity — automatically tracks a binary sensor's state changes.
• Manual — enter specific start/end times (spans) or a single timestamp (events).

👁️ Annotation Opacity

All annotation types (threshold, band, event, span) now have an Opacity slider in the editor (0–1). Control how prominent or subtle each annotation appears.

🧩 Annotation Jinja Templates

Manual annotation fields (start, end, time, value, label) now support Jinja2 templates. Values update automatically when the referenced entities change.

annotations:
  - type: threshold
    value: "{{ states('sensor.target_temp') | float }}"
    label: "Target"
  - type: span
    start: "{{ states('input_datetime.shift_start') }}"
    end: "{{ states('input_datetime.shift_end') }}"

---

🐛 Bug Fixes

🔖 Annotation Show Values

The Show Values toggle for threshold lines and bands now works. When enabled, the numeric value is displayed alongside the label. When no label is set, just the value is shown.

⬜ Rounded Bar Corners

Bars now have slightly rounded corners for a more polished look. Corner radius scales with bar width (up to 5px).

🌅 Bar Gradient Fill

Bar charts now feature a subtle vertical gradient — full color at the value end fading to 40% opacity at the baseline. Negative bars reverse the gradient direction. Disable per entity with gradient: false.

🔄 Invert + Stacked Bars

Fixed a bug where using invert: true on a bar entity together with stacked: true caused the inverted bars to stack on top of normal bars instead of drawing below zero. Butterfly charts now render correctly — positive bars go up, inverted bars go down.

0️⃣ Y-Axis Zero Label

The "0" label on the Y-axis was sometimes missing or overlapping with nearby values like 0.2. Zero now always appears when the chart crosses zero, and any nearby tick that would overlap is removed — because 0 is always more useful as a reference point than an arbitrary value next to it.

✂️ Y-Axis Label Clipping

Y-axis labels with wide values (e.g. 1880.1 or -9945.4) were cut off at the card edge. The chart now measures actual label width from real data values and reserves enough space so labels are never clipped.

🔢 Y-Axis Decimals

Setting decimals on an entity now correctly propagates to Y-axis labels when y_axis_decimals is not explicitly configured. Priority: y_axis_decimals > entity decimals > auto-detect from range.

📅 Date Format Consistency

datetime_format (e.g. DD/MM) was only applied to some parts of the chart. It now works consistently across X-axis date labels, X-axis time labels, extrema labels, and tooltips.

📊 Range Bands Not Showing

show_range_band: true stopped working with calendar group modes (group_by: date, week, month, year). The min/max range data was lost during calendar grouping. Range bands now display correctly for all group modes.

📐 Range Band Clipping

When range bands extended beyond the plotted data values, the band cloud was cut off at the chart edges. Y-axis bounds now include range band extremes so the full band is always visible.

🗓️ Date Picker — Jump to Current

Clicking the date label in the date picker now always jumps back to the current period, regardless of how far you've navigated. Previously this only worked when viewing a past period.

🎨 Editor — Template Colors

Entity color dots in the editor now correctly display resolved template colors (e.g. color: "{{ 'green' }}") instead of showing the default red.

🔻 Negative Threshold Color Extension

The lowest color threshold now extends to negative infinity — symmetric with how the highest threshold already extended to positive infinity. No more fallback to the entity's base color below the lowest threshold.

🐛 Hot Fix on features v2.22

Fix for 3 issues rised after v2.22

#104

#105

#106

✨ New Features & 🐛 Bug Fix

PLEASE DO FOLLOWING AFTER UPDATING

Clear Browser cache:

Hard reset your browser: Ctrl + Shift + R

Companion App on Android Device

• Go to the sidebar and click on Settings
• Scroll down until you see Companion app item and click on it
• Scroll down until you see Troubleshooting item and click on it
• Click on Reset frontend cache
• Close the App and open it again

Companion App on IOS Device

• Go to the sidebar and click on App configuration
• Go to Debugging and click on Reset frontend cache
  -Close the App and open it again

---

🎨 Color Templates

All color fields now accept Home Assistant templates. Instead of hardcoding #ff4757, you can write:

color: "{{ state_attr('sensor.entity_colors','entities')['Temperature'] | default('#ff4757') }}"

Create a single template sensor with all your entity colors, and every card updates automatically when you change it. Works with color, icon_color, state_color, point_colors, and all card-level color options (axis colors, grid colors, header icon color).

In the visual editor, every color field now shows a text input alongside the color picker — type a template and the picker dims automatically.

---

📅 Tomorrow View for Spot Prices

New graph_start: tomorrow option — perfect for displaying next-day electricity prices from Nord Pool, EPEX, Tibber, and similar integrations.

graph_start: tomorrow
group_by: hour
entities:
  - entity: sensor.nord_pool
    data_attribute: tomorrow_hourly
    data_time_field: start
    data_value_field: value
    graph_type: bar

The graph window automatically covers tomorrow 00:00 to end of day. No need to set show_full_period or calculate offsets — it just works.

---

📏 Grid Line Customization

Full control over how grid lines look, independently for horizontal (Y) and vertical (X) lines:

• Style — Dashed (default), Solid, Dotted, or Long Dash
• Width — any thickness from hairline (0.5px) to bold (5px)
• Color — any CSS color, theme variable, or even a template

All configurable from the editor under the Y Axis and X Axis tabs.

---

📱 Better Mobile Touch

Touch interaction has been refined for phones and tablets:

• Tap a bar or line → tooltip appears instantly (no need to slide your finger first)
• Slide your finger → tooltip follows across the graph
• Hold on a bar → tooltip and bar highlight stay visible as long as you hold
• Long press + drag → brush zoom activates (tooltip stays until you start dragging)

Previously, holding your finger on a bar would trigger zoom mode after a moment, making the tooltip disappear. Now zoom only starts when you actually drag after the long press.

---

🥧 Pie & Radial Bar Decimal Control

The decimals setting on each entity now controls how percentage labels appear in pie charts, radial bars, and their tooltips — not just the value display. Set decimals: 2 and you'll see 23.45% instead of 23%.

---

🔢 Y-Axis Label Consistency

Y-axis labels now default to 1 decimal place when no explicit setting is provided. When the data range is very narrow (e.g. 21.6–21.8°C), the number of tick marks is automatically reduced to prevent duplicate labels instead of adding extra decimals.

✨ New Features & 🐛 Bug Fixes

PLEASE DO FOLLOWING AFTER UPDATING

Clear Browser cache:

Hard reset your browser: Ctrl + Shift + R

Companion App on Android Device

• Go to the sidebar and click on Settings
• Scroll down until you see Companion app item and click on it
• Scroll down until you see Troubleshooting item and click on it
• Click on Reset frontend cache
• Close the App and open it again

Companion App on IOS Device

• Go to the sidebar and click on App configuration
• Go to Debugging and click on Reset frontend cache
  -Close the App and open it again

---

🎨 Color Templates

All color fields now accept Home Assistant templates. Instead of hardcoding #ff4757, you can write:

color: "{{ state_attr('sensor.entity_colors','entities')['Temperature'] | default('#ff4757') }}"

Create a single template sensor with all your entity colors, and every card updates automatically when you change it. Works with color, icon_color, state_color, point_colors, and all card-level color options (axis colors, grid colors, header icon color).

In the visual editor, every color field now shows a text input alongside the color picker — type a template and the picker dims automatically.

---

📅 Tomorrow View for Spot Prices

New graph_start: tomorrow option — perfect for displaying next-day electricity prices from Nord Pool, EPEX, Tibber, and similar integrations.

graph_start: tomorrow
group_by: hour
entities:
  - entity: sensor.nord_pool
    data_attribute: tomorrow_hourly
    data_time_field: start
    data_value_field: value
    graph_type: bar

The graph window automatically covers tomorrow 00:00 to end of day. No need to set show_full_period or calculate offsets — it just works.

---

📏 Grid Line Customization

Full control over how grid lines look, independently for horizontal (Y) and vertical (X) lines:

• Style — Dashed (default), Solid, Dotted, or Long Dash
• Width — any thickness from hairline (0.5px) to bold (5px)
• Color — any CSS color, theme variable, or even a template

All configurable from the editor under the Y Axis and X Axis tabs.

---

📱 Better Mobile Touch

Touch interaction has been refined for phones and tablets:

• Tap a bar or line → tooltip appears instantly (no need to slide your finger first)
• Slide your finger → tooltip follows across the graph
• Hold on a bar → tooltip and bar highlight stay visible as long as you hold
• Long press + drag → brush zoom activates (tooltip stays until you start dragging)

Previously, holding your finger on a bar would trigger zoom mode after a moment, making the tooltip disappear. Now zoom only starts when you actually drag after the long press.

---

🥧 Pie & Radial Bar Decimal Control

The decimals setting on each entity now controls how percentage labels appear in pie charts, radial bars, and their tooltips — not just the value display. Set decimals: 2 and you'll see 23.45% instead of 23%.

---

✨ Bar Hover Highlight

Bars now light up when hovered — with a subtle brightness boost, white border, and soft glow. This works reliably on both desktop and mobile, making it clear which bar the tooltip refers to in dense or stacked charts.

---

🔧 Long-Term Statistics Improvements

• Entities with statistic_id (like Gazpar or Linky imports) now display correctly at all time ranges, including short views under 24 hours
• The 1–7 day range now uses 5-minute statistics for much higher resolution (previously fell back to hourly)
• A console warning now appears when entities lack state_class and the time range exceeds recorder retention — helps diagnose why data might be missing

---

🔢 Y-Axis Label Consistency

Y-axis labels now default to 1 decimal place when no explicit setting is provided. When the data range is very narrow (e.g. 21.6–21.8°C), the number of tick marks is automatically reduced to prevent duplicate labels instead of adding extra decimals.