admin管理员组

文章数量:1026989

I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10

I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10
  • apexcharts
  • home-assistant
Share Improve this question edited Nov 16, 2024 at 14:45 Kaspars asked Nov 16, 2024 at 14:14 KasparsKaspars 112 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I found this to be an interesting use case, so I gave it a try. Since I don't currently have a similar entity available, I used the precipitation probability from the forecast of a weather entity. But that shouldn't matter if you replace the entity and make small code adjustments.

Card Configuration

With the help of the config-template-card*, I calculated the threshold values dynamically and used the results as the value for the color.

type: custom:config-template-card
variables:
  ENTITY_NAME: "'sensor.weather_home_forecast_hourly'"
  STATES: states['sensor.weather_home_forecast_hourly']?.attributes?.forecast
  ATTRIBUTE_NAME: "'precipitation_probability'"
  calcThresholdValue: |
    ((objects, valueKey, totalColors, colorIndex) => {
      if (!objects || !Array.isArray(objects)) {
        console.error("Invalid objects:", objects);
        return null;
      }
      const values = objects.map(obj => obj[valueKey]).filter(v => v !== undefined && v > 0);
      if (values.length === 0) {
        console.error("No valid values found:", values);
        return null;
      }

      const minValue = Math.min(...values);
      const maxValue = Math.max(...values);
      const interval = (maxValue - minValue) / (totalColors + 1);
      const threshold = Math.floor(minValue + (interval * colorIndex));
     
      return threshold;
    })
entities:
  - ${ENTITY_NAME}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  experimental:
    color_threshold: true
  header:
    title: Precipitation Probability
    show: true
  span:
    start: hour
  now:
    show: true
    color: gray
    label: Now
  series:
    - entity: ${ENTITY_NAME}
      type: column
      color: gray
      show:
        extremas: true
      color_threshold:
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 6)}
          color: red
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 5)}
          color: orange
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 4)}
          color: gold
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 3)}
          color: yellow
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 2)}
          color: green
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 1)}
          color: lightgreen
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 0)}
          color: blue
      float_precision: 2
      data_generator: |
        return entity.attributes.forecast
          .map(values => {
            return [new Date(values.datetime).getTime(), values['precipitation_probability']];
          });
  yaxis:
    - decimals: 2
      apex_config:
        tickAmount: 10

You need to adjust the values of ENTITY_NAME, STATES, ATTRIBUTE_NAME and the data_generator.

Issues (and possible solutions)

  • An additional custom card is needed
  • config-template-card is maybe not that efficient (yet)?
  • The columns are not colored by day, but by the minimum and maximum of the entire displayed data. Currently, I have no idea how to cleverly implement a day-specific color scheme. Perhaps two charts next to each other, one for today and one for tomorrow, would be an option for you?
  • I couldn't get the variables from the config-template-card to work with data_generator of the apexcharts-card

* I am not affiliated with this package in any way.

I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10

I'm new to HA and struggling to get my head around everything. How to make the bar colors change based on the values? I want the NordPool electricity price data chart to show the high price bars red, middle orange, low green etc, but I want them to be set depending on the max price of the particular day, lets say, the max shown price of the cart today is 50 EUR, so the 80%-100% of the max price will show up red, 60%-80% orange etc. Currently I have them set as 0-10 EUR = blue 10-20 green etc. But that's not convenient if all the hourly prices of the day are, lets say in a range of 0-10 - then all the bars are shown in blue. Any help would be much appreciated. Thanks.

This is the code for the chart right now:

type: custom:apexcharts-card
graph_span: 36h
experimental:
  color_threshold: true
header:
  title: Energy price today (€/kWh)
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_energyprices
    color: green
    type: column
    show:
      extremas: true
    color_threshold:
      - value: 0
        color: blue
      - value: 5
        color: lightgreen
      - value: 10
        color: green
      - value: 15
        color: yellow
      - value: 20
        color: gold
      - value: 25
        color: orange
      - value: 30
        color: red
    float_precision: 2
    data_generator: |
      return entity.attributes.times.map((time, index) => {
        return [new Date(time).getTime(), entity.attributes.prices[index]];
      });
yaxis:
  - decimals: 2
    apex_config:
      tickAmount: 10
  • apexcharts
  • home-assistant
Share Improve this question edited Nov 16, 2024 at 14:45 Kaspars asked Nov 16, 2024 at 14:14 KasparsKaspars 112 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I found this to be an interesting use case, so I gave it a try. Since I don't currently have a similar entity available, I used the precipitation probability from the forecast of a weather entity. But that shouldn't matter if you replace the entity and make small code adjustments.

Card Configuration

With the help of the config-template-card*, I calculated the threshold values dynamically and used the results as the value for the color.

type: custom:config-template-card
variables:
  ENTITY_NAME: "'sensor.weather_home_forecast_hourly'"
  STATES: states['sensor.weather_home_forecast_hourly']?.attributes?.forecast
  ATTRIBUTE_NAME: "'precipitation_probability'"
  calcThresholdValue: |
    ((objects, valueKey, totalColors, colorIndex) => {
      if (!objects || !Array.isArray(objects)) {
        console.error("Invalid objects:", objects);
        return null;
      }
      const values = objects.map(obj => obj[valueKey]).filter(v => v !== undefined && v > 0);
      if (values.length === 0) {
        console.error("No valid values found:", values);
        return null;
      }

      const minValue = Math.min(...values);
      const maxValue = Math.max(...values);
      const interval = (maxValue - minValue) / (totalColors + 1);
      const threshold = Math.floor(minValue + (interval * colorIndex));
     
      return threshold;
    })
entities:
  - ${ENTITY_NAME}
card:
  type: custom:apexcharts-card
  graph_span: 36h
  experimental:
    color_threshold: true
  header:
    title: Precipitation Probability
    show: true
  span:
    start: hour
  now:
    show: true
    color: gray
    label: Now
  series:
    - entity: ${ENTITY_NAME}
      type: column
      color: gray
      show:
        extremas: true
      color_threshold:
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 6)}
          color: red
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 5)}
          color: orange
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 4)}
          color: gold
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 3)}
          color: yellow
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 2)}
          color: green
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 1)}
          color: lightgreen
        - value: ${calcThresholdValue(STATES, ATTRIBUTE_NAME, 7, 0)}
          color: blue
      float_precision: 2
      data_generator: |
        return entity.attributes.forecast
          .map(values => {
            return [new Date(values.datetime).getTime(), values['precipitation_probability']];
          });
  yaxis:
    - decimals: 2
      apex_config:
        tickAmount: 10

You need to adjust the values of ENTITY_NAME, STATES, ATTRIBUTE_NAME and the data_generator.

Issues (and possible solutions)

  • An additional custom card is needed
  • config-template-card is maybe not that efficient (yet)?
  • The columns are not colored by day, but by the minimum and maximum of the entire displayed data. Currently, I have no idea how to cleverly implement a day-specific color scheme. Perhaps two charts next to each other, one for today and one for tomorrow, would be an option for you?
  • I couldn't get the variables from the config-template-card to work with data_generator of the apexcharts-card

* I am not affiliated with this package in any way.

本文标签： home assistantConfiguring datachart bar color in ApexCharts based on bar value Stack Overflow

版权声明：本文标题：home assistant - Configuring datachart bar color in ApexCharts based on bar value % - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745657342a2161675.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。