Skip to content

Bar chart

A bar chart shows every time bin as a separate vertical bar. Positive and negative values extend from the zero line in opposite directions.

Use it for hourly energy, rainfall, production, counts, or another history where individual intervals should remain visually distinct.

Flexible Horseshoe sparkline equalizer example

See: Sparkline History Template Card #060

Basic configuration

This example shows one average value for every hour in the latest day:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
layout:
  sparklines:
    - id: hourly-values
      entity_index: 0
      xpos: 50
      ypos: 50
      width: 80
      height: 35

      period:
        type: rolling_window
        rolling_window:
          duration:
            hour: 24
          bins:
            per_hour: 1

      sparkline:
        state_values:
          aggregate_func: avg
        show:
          chart_type: bar
        bar:
          column_spacing: 0.5

Configuration options

Option Type Required Default Description
show.chart_type string No line Set to bar to display a bar chart.
show.fill string No solid Uses a solid fill or a separate fade for every bar.
bar.column_spacing number No 1 Sets the space between neighboring bars.
state_values.aggregate_func string No avg Chooses the value represented by each bar.
bins.per_hour number or auto No auto Chooses how many bars can appear within each hour.
series[].color color No automatic palette Gives each series a recognizable fixed color.

Keep automatic bins

Leave bins.per_hour set to auto for normal use. Flexible Horseshoe Card then chooses a suitable bar interval automatically. Set a number only when you deliberately need a fixed number of bars per hour.

Basic bar chart

1
2
3
4
5
6
sparkline:
  show:
    chart_type: bar

  bar:
    column_spacing: 0.5

Fade each bar

1
2
3
4
sparkline:
  show:
    chart_type: bar
    fill: fade

The fade follows the length and direction of each bar.