Setting bar width and alignment

[elbertov]

Hi David,

First of all: very nice card with great possiblities! I love it and try to implement it in my Energy overviews everywhere!
I discovered it only a couple of days ago and I am already a huge fan :-)

I'm trying to built a barchart like this:

So I think I'll have to use barmode: overlay and have to set different widths for the bars, I first tried without specifying the widths:

Then i tried to set the individual widths of the bars, but no matter what I put there for number , the results are the same: a very small bar:

So, my questions are:

1. Is it possible to set the individual widths of the bars
2. Is it possible to make the barchart I want? The bars should align in the middle and have different widths

And I think the barmode: group doesn't work, it looks the same as barmode: overlay (or I'm do something wrong of course :-)):

grtz,
Martin

[dbuezas]

Hi there, happy to hear you are enjoying it!

I think what you are trying to achieve should be possible by:

• Setting the width. You are doing this already, but you got the unit wrong, it is in milliseconds! If you want it to be 1 day wide, that's 10006060*24 = 86400000. It may be possible to write 24h instead, I'm not sure.
• And then either using offset: 12h in the entity to shift the data (which is a config specific to this custom card), or xperiod and xperiodalinment (which are plotlyjs configs) more here

Pro tip: if you want to style plots, google for "plotlyjs how to xyz". That usually will get you in the right direction quite quickly :)

I'm moving this issue to the discussion section since it is more a question than a bug report or feature request.

[elbertov]

Hi David,

Thx for the quick response! I had the unit wrong for sure:

grtz Martin

[dbuezas]

Oh, alignment wasn't even necessary!

[miljbee]

Hello,

I am also trying to plot 2 series as bar. Like @elbertov, I can't get "barmode: group" to work. @dbuezas Do you have some advice ?
I read that if offset is defined, barmode falls back to overlay: https://plotly.com/javascript/reference/bar/#bar-offset
I have tried with two series without offset, and still can't get my bars side by side.

[dbuezas]

I think the issue is that I didn't realise plotly already had an offset attribute for bar charts and it is colliding with the offset feature from this card. That's kind of bad to be honest, but there is a workaround:

type: custom:plotly-graph
entities:
  - entity: sensor. plu_machinealaver_energy
    filters:
      - fn: |-
          ({ys, xs}) => {
            prev = ys[0]
            return {
              ys: ys.map(y => {
                result = y-prev;
                prev = y;
                return result
              }),
            }
          }
  - entity: sensor. plu_lavevaiselle_energy
    filters:
      - fn: |-
          ({ys, xs}) => {
            prev = ys[0]
            return {
              ys: ys.map(y => {
                result = y-prev;
                prev = y;
                return result
              }),
              xs: xs.map(x=>+x-30000000)
            }
          }
defaults:
  entity:
    statistic: sum
    period: day
    type: bar
    width: 30000000
    
hours_to_show: 168

I set a bar width and apply an offset in the x-axis

[miljbee]

Ok, thanks for your help.

[dbuezas]

@miljbee: in V3, the offset property is freed, so the hack of sliding the x values won't be needed anymore.

(the one for offsetting time is now called offset_time).

[miljbee]

Hello,

Thanks for the new version, really great. I'm trying a few things, and barmode group is still difficult ...
It seems to work, but the bars are so thin that its not usable. Setting width is kind of worst since the bars overlaps:

type: custom:plotly-graph
entities:
  - entity: sensor.plu_machinealaver_energy
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    filters:
      - force_numeric
      - delta
  - entity: sensor.plu_lavevaiselle_energy
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    filters:
      - force_numeric
      - delta
layout:
  barmode: group
hours_to_show: 168
refresh_interval: 10

Manually zooming inside shows it works, just the bars are too thin:

Playing with width:

type: custom:plotly-graph
entities:
  - entity: sensor.plu_machinealaver_energy
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    width: $fn () => 24*3600*400
    filters:
      - force_numeric
      - delta
  - entity: sensor.plu_lavevaiselle_energy
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    width: $fn () => 24*3600*400
    filters:
      - force_numeric
      - delta
layout:
  barmode: group
hours_to_show: 168
refresh_interval: 10

I also noticed in V3 that my other 'simple' bar charts now needs a width parameter, otherwise bars are too thin.

Thanks for your help ;)

[thecem]

isn´t "group" not a standard setting? In My case only "stack" changes the bar. But even with my charts in version 3.0.2 the bars are beside each other, but to thin and with a width (but witout barmode group):

    width: $fn () => 24*3600*800

or with width and barmode group:

    width: $fn () => 24*3600*800
layout:
  barmode: group

[thecem]

I have following bar chart. In previous version the bars where nice and alligned, now there are realy smal:

Is this a config problem (Heat Energy and Heizöl)?

type: custom:plotly-graph
entities:
  - entity: sensor.hmip_sens_out_stho_temperature
    statistic: mean
    period: hour
    name: Aussentemp
  - entity: sensor.at_yesterday
    statistic: mean
    period: day
    time_offset: '-1d'
    extend_to_present: true
    show_value: true
  - entity: sensor.eg_energy_daily
    statistic: state
    period: day
    filters:
      - store_var: egenergy
  - entity: sensor.odg_energy_daily
    statistic: state
    period: day
  - entity: sensor.odg_energy_daily
    statistic: state
    period: day
    type: bar
    opacity: 0.5
    texttemplate: '%{y:0.1f}'
    name: Heating Energy
    filters:
      - map_y: y + vars.egenergy.ys[i]
  - entity: sensor.daily_heizoel
    statistic: state
    period: day
    unit_of_measurement: kWh
    name: Heizöl
    texttemplate: '%{y:0.1f}'
    type: bar
    opacity: 0.5
    filters:
      - map_y_numbers: y * 10
title: Heat Energy LTS
hours_to_show: 576
refresh_interval: 10
defaults:
  entity:
    show_value: true

[dbuezas]

Ok, that was hard:

Problems

• The home assistant API assigns a timestamp to the first datapoint which is not the start of the day, but the start of the period queried. This means there are usually two bars very close together, and plotly is forced to make thin bars
• you had a "show_value" in the defaults, which makes no sense for bar charts, and adds more bars at the end of the chart, which also confuses plotly.

Solution

type: custom:plotly-graph
entities:
  - entity: sensor.energy_heating_oil
    statistic: state
    period: day
    type: bar
    opacity: 0.5
    texttemplate: '%{y:0.1f}'
    filters:
      - delta
      - filter: i>0 # the first value has the timestamp of the beginning of the plot, not the day (home assistant API)
  - entity: sensor.energy_house
    statistic: state
    period: day
    texttemplate: '%{y:0.1f}'
    type: bar
    opacity: 0.5
    filters:
      - delta
      - filter: i>0
      
layout:
  barmode: group
title: Heat Energy LTS
hours_to_show: 100
refresh_interval: 10

[dbuezas]

Show&Tell post so others can use it too? :)

[thecem]

fixing the sceen! THX!

type: custom:plotly-graph
entities:
  - entity: sensor.hmip_sens_out_stho_temperature
    statistic: mean
    period: hour
    name: Aussentemp
    show_value: true
  - entity: sensor.at_yesterday
    statistic: mean
    period: day
    time_offset: '-1d'
    extend_to_present: true
    show_value: true
  - entity: sensor.eg_energy_daily
    statistic: state
    period: day
    filters:
      - store_var: egenergy
    show_value: true
  - entity: sensor.odg_energy_daily
    statistic: state
    period: day
    show_value: true
  - entity: sensor.odg_energy_daily
    statistic: state
    period: day
    type: bar
    opacity: 0.5
    texttemplate: '%{y:0.1f}'
    name: Heating Energy
    filters:
      - filter: i>0
      - map_y: y + vars.egenergy.ys[i]
  - entity: sensor.daily_heizoel
    statistic: state
    period: day
    unit_of_measurement: kWh
    name: Heizöl
    texttemplate: '%{y:0.1f}'
    type: bar
    opacity: 0.5
    filters:
      - filter: i>0
      - map_y_numbers: y * 10
title: Heat Energy LTS
hours_to_show: 576
refresh_interval: 10

[dbuezas]

Please post in Show&tell

[miljbee]

Thanks a lot for your support

[dbuezas]

Gladly! This is very fun, particularly when it's appreciated :)

Btw, I just realized that the delta filter should remove the first timestamp instead of making it have an NaN value. I should fix that.

[miljbee]

Hello,

Sorry to bother you again David, but the problem with barmode group is still alive :(
When series have different units, the problem is back:

entities:
  - entity: sensor.pm_main_kwh
    name: energy
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    filters:
      - delta
  - entity: sensor.pm_main_kwh_cost
    name: cost
    statistic: sum
    period: day
    type: bar
    opacity: 0.5
    filters:
      - delta
layout:
  barmode: group
hours_to_show: 10d
refresh_interval: auto
title: Daily Energy

I fixed it with time_offset and width, so not a big deal ....

[thecem]

Did you try to add:

filters:
  - filter: i>0

[miljbee]

yep

[dbuezas]

Well, they are in different yaxes, so they are unaware of each other.
I'm affraid that's a plotly thing, so there's nothing I can do about it without fundamentally changing the library's behaviour (which will cause a lot of corner cases, and is not the point of this card).

The way to think about different yaxes (or xaxes) is as different layers on top of each other. As they share the x-axis, both layers get "synchronized" on that axis only. That's roughly how these things are implemented in d3, which is the "low level" svg framework used by plotly.

I think working with widths and offsets is the only way to go in this case :)

[miljbee]

Ok, thanks for your response

[miljbee]

in fact it's easy to fix, there is a setting for that problem: offsetgroup

type: custom:plotly-graph
entities:
  - entity: sensor.pm_main_kwh
    name: energy
    statistic: sum
    period: day
    type: bar
    offsetgroup: 1
    opacity: 0.5
    filters:
      - delta
  - entity: sensor.pm_main_kwh_cost
    name: cost
    statistic: sum
    period: day
    type: bar
    offsetgroup: 2
    opacity: 0.5
    filters:
      - delta
layout:
  barmode: group
hours_to_show: 10d
refresh_interval: auto
title: Daily Energy