General Settings
Navigate: Configuration overview · Entity Settings · Visual Editor · Option Index
Card-level options, organized to match the six tabs in the visual editor.
Many rows below end with a mode restriction (Timeline mode only, Pie mode only, …). Since v3.32 the visual editor enforces those restrictions for you: an option that does nothing in the selected chart mode is hidden, down to the individual field. A section heading disappears once every field under it is hidden, a tab once all its sections are, and you are moved to the first surviving tab. Nothing is lost when a field is hidden — the option keeps its YAML value and reappears as soon as you switch back to a mode that uses it.
Chart mode, data window, aggregation density, scrolling, legends, animation, exports, and mode-specific presentation.
| Option | Type | Default | Description |
|---|---|---|---|
chart_mode
|
string | "timeline" |
Chart visualization mode. See Chart Modes. timeline | scatter | pie | ranking | radialbar | polararea | radar | heatmap | calendar | gauge | box | waterfall | histogram
|
sparkline
|
boolean | false |
Compact mode — strips all chrome (header, axes, grid, toolbar) and renders tiny inline graphs. See Sparkline Mode. Only available in Timeline mode. |
waterfall_total
|
boolean | true |
Waterfall mode only — append the automatic Total bar (running total from zero) at the end. Set false to hide it. |
histogram_bins
|
number | auto | Histogram mode only — fixed number of bins (2–80). Leave empty for automatic bin sizing via Freedman–Diaconis (clamped to 5–40). |
hours_to_show
|
number | 24 |
Hours of history to load and display. Ignored whenever graph_start is set (day, tomorrow, week, month, year) — the anchored period defines the range instead. |
points_per_hour
|
number | 2 |
Data points fetched per hour (global default). Integer only. The editor offers the common divisors of 60 (1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60) so buckets tile an hour cleanly; YAML still accepts any integer. |
auto_scale_points
|
boolean | false |
Automatically pick bucket size and group_by based on the visible time window. Falls back to the configured values when any entity uses offset, forecast_horizon, or data_attribute. See Auto Scale Points. |
auto_scale_rules
|
list | null |
Custom thresholds for Auto Scale — only active when auto_scale_points: true. Each rule maps a visible period to a bucketing: up_to_hours (number, required), group_by (same values as the main group_by — interval, hour, any Nh like 2h, date [day is accepted as an alias], week, month, year, raw), and an optional points_per_hour (only meaningful for group_by: interval). The smallest matching threshold wins; periods beyond every threshold fall back to the built-in auto scale. While Auto Scale is on, the resolved rule fully overrides the main group_by (bucketing and data fetching); the main value only applies when Auto Scale is off. See Auto Scale Points. |
group_by
|
string | "interval" |
Bucketing strategy: interval / hour / 2h / 3h / 4h / 6h / 12h (any Nh works) / date / week / month / year / raw. Multi-hour values create fixed-width buckets aligned like hour. When set to week, month, or year, data is fetched using native HA statistics periods for accuracy and performance. See Long-Range Views. raw skips bucketing entirely — every recorded sample is drawn at its exact timestamp and points_per_hour is ignored — ideal for step charts of binary/state sensors. See Raw Grouping. |
update_interval
|
number | null |
Auto-refresh interval in seconds. Empty = HA events only. |
extended_window_multiplier
|
number | null |
(new in v3.29) Scrollback for the selected period: renders N× the period and opens scrolled to the newest part — the screen shows exactly the period you picked (same scale and buckets as without scrolling) and you can scroll back through the extra history. Follows the date picker: a Week view with 2 keeps one extra week scrollable behind the current one; the picker's header and arrows stay on the selected period. 1/empty = off. Overrides max_visible_interval while active. Timeline mode. |
bar_spacing
|
number | 4 |
Gap between bar columns in pixels. Timeline mode only. |
stacked
|
boolean | false |
Stack entities on top of each other. Timeline mode only. See Stacked Mode. |
pie_style
|
string | "donut" |
Pie chart visual preset: classic (full pie), thick (wide donut), donut (default), or thin (narrow ring). Pie mode only. |
pie_spacing
|
number | 0 |
Gap between pie slices in degrees (0–15). Spaced slices automatically get rounded corners. Pie mode only, donut styles only. |
pie_3d
|
boolean | false |
Adds depth and a perspective effect to the pie chart with subtle shadows and a glossy highlight on top. Works with any pie_style. Pie mode only. |
pie_label_font_size
|
number | null |
Font size in pixels of slice value labels (the per-slice numbers like "21.1 kWh"). Leave empty for auto-size based on chart radius. Pie mode only. |
pie_label_color
|
string | null |
Color for slice value labels. Accepts any CSS color (hex, rgba, name) or CSS variable like var(--accent-color). Leave empty for auto white (high contrast against any slice color). Pie mode only. |
pie_label_format
|
string | "value" |
What to show inside each pie slice: value (number with unit, e.g. "42.0 kWh"), percentage (share of the total, e.g. "23%"), or both (value followed by percentage). Precision is controlled by the entity's decimals setting — affects both value and percentage display. Pie mode only. |
pie_center_font_size
|
number | null |
Font size in pixels of the center total value shown in the donut hole. Requires show_tooltip_total: true. Leave empty for auto-size. Pie mode only. |
pie_center_color
|
string | null |
Color of the center total value and its sub-label (which inherits the same color with reduced opacity). Accepts any CSS color or variable. Leave empty for the theme default. Pie mode only. |
show_grid
|
boolean | true |
Show grid lines. Available in Timeline and Scatter modes. |
period_highlight
|
boolean | false |
Highlight the period under the cursor on bar charts. Hovering a bar shades a background band spanning that whole period, making it easy to see where each period begins and ends — especially with multiple entities drawn side by side. Works whether or not show_tooltip is enabled. Timeline mode, bar charts. See Period Highlight. |
period_highlight_color
|
string | null |
Color of the period-highlight band. Accepts any CSS color (hex, rgba, name) or variable; you can also theme it globally with the --sgc-period-highlight-color CSS variable. Leave empty for a subtle theme grey. Requires period_highlight: true. |
show_legend
|
boolean | false |
Show a compact color-coded entity name key below the graph. Click any item to temporarily toggle that entity's visibility on the graph. For per-entity stats, use the entity-level Legend toggle. |
auto_hide_entities
|
boolean | false |
Start every entity hidden — the plot begins empty and you reveal series by clicking them in the legend. Reveals stick for the session; entities added later also start hidden. Best paired with show_legend: true. |
legend_position
|
string | "center" |
Position of the compact legend: left / center / right. The legend flows inline at the chosen alignment. |
include_area_names
|
boolean | false |
Append each entity's Home Assistant area to its name across the state row, legend, tooltip, stats and exports — e.g. Heating Temperature · Lounge. Every entity with an area gets it (no duplicate detection, so the legend doesn't change shape when you add or remove an unrelated entity). The area comes from the entity's area, or its device's area as a fallback; if neither resolves the name is unchanged, and a name that already contains its area isn't doubled up. An explicit name: is never modified. Comparison ghosts inherit their parent's suffix. See Area names. |
include_attribute_name
|
boolean | false |
Append the plotted attribute to each entity's name in the same places — e.g. Lounge Heating · Current temperature (v3.32). Rows that plot the entity state itself have no attribute and are left alone, as are entities with an explicit name:. Uses Home Assistant's own translated attribute name where one exists, otherwise a humanised form of the attribute key. |
use_only_attribute_name
|
boolean | false |
Like include_attribute_name, but shows only the attribute — Current temperature instead of Lounge Heating · Current temperature (v3.32). The two are alternatives: the visual editor turns one off when you switch the other on, and in YAML this one wins if both are set. Combines with include_area_names to give Current temperature · Lounge. |
animate_graph
|
boolean | false |
Draw-in animation on load (Timeline mode): lines sweep in along their length and bars grow up from the baseline. Also enables a grow-in animation on every data refresh for Pie, Radial Bar, Polar Area, Gauge, Radar, Ranking and Scatter modes — slices, arcs, bars and points sweep out from zero whenever the underlying values change. |
max_visible_interval
|
number | null |
Maximum visible time range in hours. Enables horizontal scrolling. Works in Timeline and State Timeline modes. |
scroll_mode
|
string | "scrollbar" |
How the scroll works when max_visible_interval is active. scrollbar (default) shows a bottom scrollbar; wheel hides it and lets the mouse wheel scroll horizontally. |
state_timeline_corner_radius
|
number | 3 |
Roundness of state_timeline segment corners, in pixels. 0 = sharp edges. Larger values produce rounder / pill-shaped segments (capped at half the row height). State Timeline mode only. Advanced users can also target the sgc-stl-cell CSS class from card_mod for per-state styling. |
state_timeline_show_labels
|
boolean | true |
Show the state labels drawn inside state_timeline segments. Set to false for clean, label-free color bands — the tooltip still names each state on hover. Labels only render in segments wide enough to fit them anyway. Accepts {{ }} templates — see Template Toggles. State Timeline mode only. |
state_timeline_label_font_size
|
number |
10 / 11
|
Font size in pixels (6–40) of the state label inside each state_timeline segment and of the entity name in the label column on the left (v3.32). Defaults differ when unset: 10 inside segments, 11 for entity names. Both budgets scale with it — segments show fewer characters with an ellipsis, entity names wrap onto up to three lines and rows grow to fit. The segment label additionally requires state_timeline_show_labels. State Timeline mode only. (v3.31)
|
ranking_min_value
|
number | null |
Hide entities whose absolute value falls below this threshold. Ranking mode only. Useful for energy / power rankings where idle or standby devices would otherwise crowd the chart — set to e.g. 5 to drop appliances reading under 5 W. Leave empty for no filter. |
gauge_columns
|
number | null |
Number of gauge columns in the grid (Gauge mode). Empty / 0 = auto (fits as many dials as the width allows). |
gauge_span
|
number | 270 |
Arc sweep of each gauge in degrees, 90–360. 180 = top semicircle; 270 = classic open-bottom dial. Gauge mode only. |
gauge_value_position
|
string | "below" |
Where the value is drawn relative to the dial: below (default) or above. The value sits just outside the arc, clear of the needle. Gauge mode only. |
gauge_value_size
|
number | null |
Font size of the gauge value in pixels. Empty = auto-size from the gauge. Gauge mode only. |
gauge_show_minmax
|
boolean | false |
Show the dial's lower/upper bound labels at the two arc ends (e.g. 0 and 30). Gauge mode only. |
show_export
|
boolean | false |
Show a small download icon overlaying the top-right corner of the card. Clicking it opens a menu — Download PNG (Chart) / Download PNG (Card) / Download CSV — exporting the current view ("export what you see": a zoomed chart exports the zoomed range). The Card variant captures the entire card — header, chart, state row, and legend. Hidden in sparkline mode. Accepts {{ }} templates — see Template Toggles. See PNG / CSV Export. |
Header, icon, card sizing, layout, borders, background, and typography.
card-mod: since v3.32 styles injected by card-mod survive a page reload — the card no longer discards them when it builds its insides on the first history fetch. Where a
card_*option and a card-mod rule set the same property (e.g.card_background_colorvs.ha-card { background: ... }), the built-in option wins, because the card writes it as an inline style. Use one or the other, or add!importantto the card-mod rule.
| Option | Type | Default | Description |
|---|---|---|---|
card_header
|
string | "" |
Title shown at the top. Leave empty to hide. |
card_icon
|
string | null |
MDI icon next to the title, e.g. mdi:thermometer
|
card_icon_image
|
string | null |
URL to a custom image. Overrides card_icon. |
card_icon_color
|
string | null |
Color of the header icon (CSS color). Set to "threshold" to color dynamically based on the first entity's value and its color threshold rules. |
card_header_size
|
string | null |
Font size of the title and battery icon. The battery indicator scales proportionally with this value. Accepts CSS values like 16px or 1.2em. |
card_icon_size
|
string | null |
Size of the header icon, e.g. 22px
|
card_icon_position
|
string | "left" |
Header icon position: left or right
|
card_shadow
|
boolean | true |
Show the default HA card drop shadow. Disable for a flat look or when the card sits on a decorated background. |
card_border
|
boolean | true |
Show the default HA card border. Disable for a cleaner borderless appearance. |
align_header
|
string | "left" |
Header alignment: left / center / right
|
state_layout
|
string | "default" |
State row layout: default (vertical stack) or horizontal. Horizontal flows entities side by side in a single row, wrapping if needed. Left/centre/right placement of individual rows is per entity, via the entity-level align_state option. |
chart_align
|
string | "center" |
Horizontal alignment of the Ranking chart within the card. center (default) keeps the chart centered in the card. left pins it to the left edge — the name-label strip shrinks so bars start closer to the left. right mirrors the layout to the right edge — bars grow from right to left with name labels on the right. Ranking mode only. |
height
|
number / auto
|
150 |
Graph area height in pixels. Set to auto (or leave the editor's Height field empty) to fill the grid cell instead — the card then participates in Home Assistant's Sections layout sizing. See Sections Auto-height. |
card_background_color
|
color | null |
Custom background color for the card. Accepts any CSS color (hex, rgba, name). Use rgba(R, G, B, A) for translucent cards. Replaces card_mod workarounds — this value persists across re-renders. |
card_padding
|
string/number | null |
Inner spacing of the card. Accepts a single number (treated as px) or any CSS shorthand like 8px 16px or 0. Leave empty for theme default. |
card_border_radius
|
string/number | null |
Roundness of the card corners. Accepts a number (px) or any CSS value like 12px, 1rem, 0. Leave empty for theme default. |
card_border_color
|
color | null |
Custom color for the card border. Only effective when card_border is true. Accepts any CSS color or variable. |
card_border_width
|
string/number | null |
Border thickness. Accepts a number (px) or any CSS value like 2px. Only effective when card_border is true. |
card_background_image
|
string | null |
URL of an image to use as the card background. Local files in /config/www/ resolve via friendly paths — local/photos/sunset.jpg, photos/sunset.jpg, and /local/photos/sunset.jpg all work, as do external URLs (https://...). The image overlays the background color (use rgba(...) colors for translucent overlays that show the image through). |
card_background_blur
|
number | null |
Blur amount in pixels applied to card_background_image only. The chart, header, and other content stay sharp. 0 or empty = no blur. Useful for soft, atmospheric backgrounds (try 4–12). |
card_header_color
|
color | null |
Custom color for the header title text. Accepts any CSS color or variable. Leave empty for theme default. |
card_header_weight
|
string/number | null |
Header text font weight. Accepts CSS keywords (light, normal, bold) or numbers (300, 400, 600, 700). Leave empty for theme default. |
card_header_letter_spacing
|
string/number | null |
Header letter spacing. Accepts a number (treated as px) or any CSS value like 0.5px, normal, -0.02em. Leave empty for theme default. |
Tooltips, on-card controls, synchronization, annotations, and battery status.
| Option | Type | Default | Description |
|---|---|---|---|
battery_entity
|
string | null |
Entity ID reporting battery level (0–100%). Shows a color-coded battery icon with percentage in the header (when header exists) or state row (when no header). See Battery Icon. |
battery_low_threshold
|
string/number | 20 |
Battery percentage below which the icon turns red. Accepts a number, entity ID (sensor.x), or entity attribute (sensor.x.attribute). |
show_tooltip
|
boolean | true |
Show hover tooltip with crosshair |
show_tooltip_total
|
boolean | true |
Controls total/summary displays across chart modes. Timeline: Total row in tooltip — the unit is appended when every visible entity shares it (e.g. "6.20 kWh"). Pie/Polar Area: total in donut center (off = full pie). Radial Bar: average in center. Ranking: percentage labels on bars and Share row in tooltip. Waterfall: Running total row in tooltip. Histogram: Share row (bin's share of all samples) in tooltip. Not used in Scatter. |
tooltip_stacked_total
|
boolean | true |
When the chart is stacked with 2+ stack groups, adds a per-group total row to the tooltip — labelled with the group name (e.g. "Apples Total") — for each named group. Independent of show_tooltip_total: with both on, the tooltip shows the per-group totals and the grand Total of all entities. Timeline mode. See Stacked Groups. |
tooltip_match_axis
|
boolean | false |
Format the tooltip's date header exactly like the X-axis labels. On long-range views shows e.g. "May 26" instead of a full timestamp (ignoring datetime_format, just as the axis does). It never appends a time to a date: Month / Year / day views show the date only, intraday (hour) views show the clock only. Timeline mode. |
tooltip_order
|
string | "default" |
Order of the entity rows inside the tooltip: default (configuration order, first entity on top), reverse (bottom-to-top — matches a stacked chart's visual order so the topmost stacked segment is listed first), or alphabetic (A→Z by display name). The Total row, when shown, always stays at the bottom. Timeline mode. |
show_interval_picker
|
boolean | false |
Show quick-select time range buttons on the card. Default set: 1H, 2H, 4H, 8H, 12H, 24H, 7D. Customize with interval_options. |
interval_picker_position
|
string | "left" |
Position of the interval picker: left / center / right
|
interval_picker_group
|
string | null |
Named group for interval picker sync — works exactly like date_picker_group: cards sharing the name follow the selected interval together, and receivers don't need show_interval_picker. |
interval_options
|
list | null |
Which interval buttons to show. Example: ["2H", "12H", "24H", "7D"]. When not set, the default compact set (1H–24H + 7D) is used. Available labels: 1H, 2H, 4H, 8H, 12H, 24H, 3D, 7D, 14D, 30D, 90D, 6M, 1Y. |
show_attribute_list
|
boolean | false |
Show per-entity attribute dropdown selectors on the card |
attribute_list_position
|
string | "left" |
Position of the attribute list: left / center / right
|
show_pph_picker
|
boolean | false |
Show a Points/Hour dropdown on the card itself. The pick persists per card, takes priority over Auto Scale, and Auto returns to the configured value. |
pph_picker_position
|
string | "left" |
Position of the Points/Hour picker: left / center / right
|
pph_picker_group
|
string | null |
Named group syncing the Points/Hour selection across cards — receivers don't need the picker visible. Independent from group_by_picker_group. |
show_group_by_picker
|
boolean | false |
Show a Group By dropdown on the card (Interval, Hour, 2H–12H, Date, Week, Month, Year). Persists per card; Auto returns to the configured value. |
group_by_picker_position
|
string | "left" |
Position of the Group By picker: left / center / right
|
group_by_picker_group
|
string | null |
Named group syncing the Group By selection across cards. Independent from pph_picker_group. |
tooltip_sync
|
boolean | false |
Broadcast hovered timestamp to other synced cards. Timeline mode only. |
tooltip_sync_group
|
string | null |
Named group for tooltip sync. Cards with the same name sync only with each other. Leave empty to sync with other ungrouped cards only — an empty group never matches a named one. |
drill_down
|
boolean | false |
Click a single bucket on the graph to reload the card for just that bucket, at the finer resolution the shorter window allows — click a month bar to see its days, a day to see its hours. Each click pushes a level onto a stack (20 deep); double-click steps back out one level, unwinding any brush zoom first. Unlike zooming this refetches history at the finer resolution, so it shows detail the original chart did not contain. Clicking empty space, a bucket under a minute long, or a bucket that already fills the view, does nothing. Any date picker or interval picker change — including one arriving from a synced card — drops every drill level and returns to that period. Shares the click handler with Brush Zooming, so it does nothing while brush_zoom: false. Timeline mode only. Broadcasts through zoom_sync when that is on. See Drill Down. |
zoom_sync
|
boolean | false |
When you brush-zoom (or double-click to reset) on this card, the same time window is applied to all other cards sharing the group. Broadcasting requires Brush Zooming, which is Timeline-only — but State Timeline cards can receive and follow a synced window, so the option is available in Timeline and State Timeline. See Zoom Sync. |
zoom_sync_group
|
string | null |
Named group for zoom sync. Cards with the same name sync only with each other. Leave empty to sync with other ungrouped cards only — an empty group never matches a named one. |
scroll_sync
|
boolean | false |
Mirror horizontal scrolling across all other cards in the same group. Most useful when max_visible_interval is set so the chart is actually scrollable. Works in Timeline and State Timeline modes. See Scroll Sync. |
scroll_sync_group
|
string | null |
Named group for scroll sync. Cards with the same name sync only with each other. Leave empty to sync with other ungrouped cards only — an empty group never matches a named one. |
energy_date_sync
|
boolean | false |
Sync the card's time range with HA's Energy dashboard date picker or the energy-period-selector-plus custom card. When the user selects a date range, this card automatically updates to show the same period. See Energy Date Sync. |
annotations
|
list | [] |
Reference lines and markers on the graph. Timeline mode only. See Annotations. |
Time labels, tick spacing, visibility, grid styling, and the current-time marker.
| Option | Type | Default | Description |
|---|---|---|---|
x_axis_font_size
|
number | null |
Font size of X-axis time labels in pixels. Default is 10 (9 in Heatmap). Applies in Timeline, State Timeline, Scatter, Heatmap and Calendar. |
x_axis_font_opacity
|
number | null |
Opacity of X-axis labels. 0 = invisible, 1 = fully opaque. Default is 0.5 in Timeline / State Timeline (0.55 in Scatter, 1 in Heatmap and Calendar). Applies in Timeline, State Timeline, Scatter, Heatmap and Calendar. |
x_axis_color
|
string | null |
Custom color for X-axis time labels and tick marks. Accepts any CSS color or CSS variable. Leave empty for theme default. Applies in Timeline, State Timeline, Scatter, Heatmap and Calendar. |
x_axis_date_color
|
string | null |
Custom color for X-axis date markers (the bold date dividers shown in 12+ hour views). Defaults to --primary-color so dates stand out. Set to match x_axis_color for a uniform axis. In State Timeline it colors the labels when the visible range spans more than a day, and defaults to the X label color there. |
x_axis_interval
|
string | null |
Manual X-axis tick spacing. Values: 1h–12h, 1d, 2d, 7d, 1w, 2w, 1M, 3M. Ticks snap to clean boundaries (hour starts, midnight, Mondays, 1st of month). Leave empty for auto. |
datetime_format
|
string | "system" |
Controls how timestamps appear on the X-axis, tooltips, and extrema labels. See Date Formats. |
x_grid_style
|
string | "dashed" |
Line pattern for vertical (X-axis) grid lines: dashed, solid, dotted, or long-dash. |
x_grid_width
|
number | 1 |
Thickness of vertical grid lines in pixels. |
x_grid_color
|
string | null |
Color of vertical grid lines. Accepts any CSS color, variable, or {{ }} template. |
x_grid_opacity
|
number | 0.15 |
Opacity of vertical grid lines, from 0 (invisible) to 1 (fully opaque). |
show_x_axis
|
boolean | true |
Show X axis labels (time in Timeline, values in Scatter). Available in Timeline and Scatter modes. |
show_x_ticks
|
boolean | false |
Draw small tick marks at each X-axis label position. |
show_now_line
|
boolean | true |
Show a vertical line marking the current moment on the graph. Timeline mode only. |
now_line_color
|
string | null |
Color of the now line. Accepts any CSS color or variable. Leave empty for theme default. |
now_line_opacity
|
number | null |
Opacity of the now line (0–1). Leave empty for default. |
now_line_width
|
number | null |
Thickness of the now line in pixels. Leave empty for default. |
now_line_style
|
string | null |
Line pattern for the now line: solid, dashed, dotted, or long-dash. Leave empty for default. |
Primary and secondary scales, bounds, ticks, number formats, labels, and horizontal grid styling.
| Option | Type | Default | Description |
|---|---|---|---|
min_bound_range
|
number | null |
Minimum span of the primary Y axis |
min_bound_range_secondary
|
number | null |
Minimum span of the secondary Y axis. When combined with a locked lower_bound_secondary / upper_bound_secondary, the range grows only away from the locked edge — it won't push a locked bound past zero. |
lower_bound
|
string/number | null |
Hard or soft minimum for the primary Y axis. See Bounds. |
upper_bound
|
string/number | null |
Hard or soft maximum for the primary Y axis. See Bounds. |
lower_bound_secondary
|
string/number | null |
Hard or soft minimum for the secondary Y axis. See Bounds. |
upper_bound_secondary
|
string/number | null |
Hard or soft maximum for the secondary Y axis. See Bounds. |
y_axis_ticks
|
number | 4 |
Number of tick marks (grid lines + labels) on the Y axis. |
y_axis_decimals
|
number | null |
Number of decimal places for Y-axis labels. Overrides per-entity decimals for axis labels only — state row values are not affected. Leave empty for auto. |
y_axis_number_format
|
string | "system" |
Controls how Y-axis tick numbers are formatted. system follows HA's locale (default); comma forces European style (1.234,56); dot forces American style (1,234.56). Independent from per-entity number_format, which still drives state row, tooltip and data label formatting. Pick the one that matches the audience of the dashboard. |
y_axis_round_ticks
|
boolean | true |
Snap Y-axis tick values to clean round numbers (e.g. 0, 500, 1000, 1500) that fit within the data range without expanding it. Produces tidy, evenly-spaced labels similar to Excel's default. Disable to let tick values follow the exact data range. |
show_y_axis_label
|
boolean | false |
Show vertical unit labels on the left and/or right edge of the graph. When enabled, defaults to the unit of measurement of the first entity on each axis. |
y_axis_label
|
string | null |
Custom text for the left (primary) vertical axis label. Overrides the auto-detected unit. Requires show_y_axis_label: true. |
y2_axis_label
|
string | null |
Custom text for the right (secondary) vertical axis label. Overrides the auto-detected unit. Requires show_y_axis_label: true. |
y_axis_format
|
string | null |
Custom label format for the primary axis: a duration shorthand (h:mm, h:mm:ss, mm:ss, d h:mm) or a safe {expression} template (e.g. {fixed(value/1000,1)} kW). Also drives tooltips, data labels, the state row and the average-line label for entities on this axis. See Y-Axis Label Formats. |
y2_axis_format
|
string | null |
Same as y_axis_format, for the secondary (right) axis and the entities plotted on it. |
duration_unit
|
string | "s" |
Unit of the raw sensor value when a duration shorthand is used: s / ms / min / h — e.g. 5400 with h:mm shows 1:30. Ignored by {expression} templates. |
y_axis_font_size
|
number | null |
Font size of Y-axis numeric labels in pixels. Default is 10. |
y_axis_font_opacity
|
number | null |
Opacity of Y-axis labels. 0 = invisible, 1 = fully opaque. Default is 0.65. |
y_axis_color
|
string | null |
Custom color for Y-axis labels and tick marks. Accepts any CSS color (hex, rgba, color name) or a CSS variable like var(--my-color). Leave empty for theme default. |
y_grid_style
|
string | "dashed" |
Line pattern for horizontal (Y-axis) grid lines: dashed, solid, dotted, or long-dash. Also accepts a custom SVG stroke-dasharray like 6 2 2 2. |
y_grid_width
|
number | 1 |
Thickness of horizontal grid lines in pixels. Accepts decimals like 0.5. |
y_grid_color
|
string | null |
Color of horizontal grid lines. Accepts any CSS color, variable, or {{ }} template. Leave empty for theme default. |
y_grid_opacity
|
number | 0.15 |
Opacity of horizontal grid lines, from 0 (invisible) to 1 (fully opaque). Lower values keep the grid subtle without competing with the data. |
show_y_axis
|
boolean | true |
Show primary (left) Y axis value labels. Available in Timeline and Scatter modes. |
show_y2_axis
|
boolean | false |
Show secondary (right) Y axis value labels independently. Hidden by default — enable it to show right-side labels. Only relevant when at least one entity uses y_axis: secondary; those entities stay plotted even while the axis labels are hidden. |
show_y_ticks
|
boolean | false |
Draw small tick marks at each Y-axis label position. |
logarithmic
|
boolean | false |
Logarithmic Y axis scale. Timeline mode only. |
Daily hour filtering, calendar anchoring, full-period display, and the built-in date picker.
| Option | Type | Default | Description |
|---|---|---|---|
graph_start_hour
|
number / entity | null |
Daily start hour filter. Points before this hour each day are hidden, creating natural line breaks between days. Accepts a fixed number (6 = 06:00, 6.5 = 06:30) or a sensor entity ID (sensor.sunrise_hour) for dynamic values. Works with Date Picker: in Day mode trims the X-axis, in Week/Month/Year modes filters per day. See Dynamic Graph Hours. |
graph_end_hour
|
number / entity | null |
Daily end hour filter. Points after this hour each day are hidden. Same format as graph_start_hour. Use with sensor.sunset_hour for sunrise-to-sunset views. |
graph_start
|
string | null |
Snaps the graph start to a calendar boundary: day (today 00:00 — shown as Today in the editor; today is accepted as an alias), tomorrow (tomorrow 00:00 — ideal for next-day spot prices via data_attribute), week (Monday 00:00), month (1st of month), year (Jan 1st). When set to tomorrow, the window automatically extends to cover the full next day even without show_full_period. Ignored when the interval picker is active. See Long-Range Views. |
show_full_period
|
boolean | false |
Extends the X-axis to cover the full calendar period instead of stopping at "now". A dashed vertical line marks the current time. Works with graph_start (week/month/year) and energy_date_sync. Not required for graph_start: tomorrow — that extends automatically. See Show Full Period. |
show_date_picker
|
boolean | false |
Show a built-in date navigation bar with Day/Week/Month/Year buttons, arrow navigation, calendar popup, and preset ranges. Cannot be used together with energy_date_sync. See Date Picker. |
date_picker_position
|
string | top |
Position of the date picker bar. top or bottom. |
date_picker_nav_position
|
string | "left" |
Horizontal position of the ‹ period › navigator inside the picker bar: left / center / right. |
date_picker_shortcuts_position
|
string | "right" |
Position of the D/W/M/Y shortcuts and the calendar icon: left / center / right. Sharing a zone with the navigator places the navigator first. |
date_picker_group
|
string | null |
Named group for date picker sync. Cards with the same group name share date selection — change the date on one card and all cards in the group update together. Works even on cards without show_date_picker — a single card with a visible picker can control all other cards in the group. |
date_picker_modes
|
list | null |
Which period buttons to show: day, week, month, year. Also accepts rolling modes (last_24h, last_3d, last_7d, last_15d, last_30d, last_90d, last_180d, last_12m) to show them as extra buttons (24H … 12M) next to D/W/M/Y. Example: [month, year] or [day, last_7d, last_30d]. When only one mode is listed, the buttons are hidden and the navigation is centered. Default (null) = the four calendar modes (rolling ones off). |
date_picker_default_mode
|
string | null |
Forces the date picker to always open in a specific mode regardless of the last-used state. Calendar modes: day, week, month, year. Rolling windows that end at now: last_24h, last_3d, last_7d, last_15d, last_30d, last_90d, last_180d, last_12m (e.g. last_7d = the last 7 days; prev/next jumps a full period). Leave empty (default) for Auto — the picker remembers the last mode you selected. Useful on shared dashboards where you always want the picker to start on, say, Month or the last 30 days. |
date_picker_step
|
number | 1 |
Window width in units of the selected mode. 1 = single-unit window (legacy behavior — one day, one month, etc.). >1 turns the picker into a rolling N-unit window: prev/next buttons jump a full N units at a time. Example: 4 with week mode shows the last 4 weeks and navigates back/forward 4 weeks per click. See Date Picker → Window Step. |