Scatter with double histogram

[dbuezas]

title: 2D Histogram - Last 10 days
entities:
  - entity: sensor.openweathermap_pressure
    period: hour
    internal: true
    fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
  - entity: sensor.openweathermap_temperature
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.openweathermap_humidity
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.pressure
    y2: $fn ({ vars }) => vars.humidity
    type: histogram2dcontour
    mode: lines+markers
    line:
      color: null
hours_to_show: 240
raw_plotly_config: true
ha_theme: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  height: 500
  zaxis:
    title:
      text: Humidity
  yaxis:
    title:
      text: Pressure
  xaxis:
    title:
      text: Temperature
    autorange: true

[jandechent]

Hmm, im on 3.3.4, installed via HACS, but the histograms at the border do not show at all.

[dbuezas]

This is what I have in my card:

type: custom:plotly-graph
title: 2D Histogram - Last 10 days
entities:
  - entity: sensor.openweathermap_temperature
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.openweathermap_humidity
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.humidity
    mode: markers
    name: points
    marker:
      color: rgb(102,0,0)
      size: 2
      opacity: 0.4
    type: scatter
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.humidity
    name: density
    ncontours: 20
    colorscale: Hot
    reversescale: true
    showscale: false
    line:
      color: null
    type: histogram2dcontour
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': undefined
    name: x density
    marker:
      color: rgb(219,91,40)
    yaxis: y2
    opacity: 1
    type: histogram
  - entity: ''
    x: undefined
    'y': $fn ({ vars }) => vars.humidity
    name: y density
    marker:
      color: rgb(219,91,40)
    xaxis: x2
    type: histogram
hours_to_show: 240
raw_plotly_config: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  height: 400
  bargap: 0.1
  showlegend: false
  xaxis:
    title:
      text: Temperature
    autorange: true
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  yaxis:
    title:
      text: Humidity
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  xaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false
  yaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false

[jandechent]

Ah yes, that brings me forward. Thanks!

[matthew73210]

Hey, sorry if its pur ignorance. Is there anyway to make the card wider? Mine is stuck like the following :
I want it to be wider but if i use the param width: xxx it's gets larger in the card but the card stays put so you loose visual

type: custom:plotly-graph
title: 2D Histogram - Last 10 days
entities:
  - entity: sensor.a4_c1_38_c0_99_79_9979_temperature
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.a4_c1_38_c0_99_79_9979_humidity
    period: hour
    internal: true
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.humidity
    mode: markers
    name: points
    marker:
      color: rgb(102,0,0)
      size: 2
      opacity: 0.4
    type: scatter
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.humidity
    name: density
    ncontours: 20
    colorscale: Hot
    reversescale: true
    showscale: false
    line:
      color: null
    type: histogram2dcontour
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': undefined
    name: x density
    marker:
      color: rgb(219,91,40)
    yaxis: y2
    opacity: 1
    type: histogram
  - entity: ''
    x: undefined
    'y': $fn ({ vars }) => vars.humidity
    name: y density
    marker:
      color: rgb(219,91,40)
    xaxis: x2
    type: histogram
hours_to_show: 240
raw_plotly_config: true
layout:
  margin:
    t: 10
    l: 40
    r: 20
    b: 40
  height: 400
  bargap: 0.2
  showlegend: false
  xaxis:
    title:
      text: Temperature
    autorange: true
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  yaxis:
    title:
      text: Humidity
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  xaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false
  yaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false

[dbuezas]

Add width: 400 inside layout

[matthew73210]

That's what i did before but the following happens

The data inside the card is at 400, but the card is blocked at a fixed size for only this plot

[caiusseverus]

The card width is fixed by the view type I think. The default Masonry view tries to put 3 or 4 cards across the screen all of equal width. If you want to have them wider, you can use something like Sidebar, which has larger cards on the left and a space on the right for smaller ones. Panel puts a single card as full width. https://www.home-assistant.io/dashboards/views/

It's also possible to use something like the grid card on the Panel layout to set the number of columns and rows on a page, and you then add the individual cards you want within the settings for the grid card. There's also Layour Card in HACS which can give more control over positioning.

[matthew73210]

It's just weird that the card underneath is fine :