[Feature Request] Add a line with a preset value

[hugosbnarciso]

Hey,

A cool feature would be to add in config a line in the graph.

Example, a graph that shows 0-100% humidity, i could have a dashed line at 50%, just for context.

great work! Thanks,

[sbrisson1]

If I could add, I would give the possibility to add multiples lines. Something like this:

   reference_lines:
    - value: 25
      style: "dashed"
      color: "#f39c12"
    - value: 50
      style: "solid"
      color: "#d35400"
    - value: 75
      color: "#c0392b"

[lanrat]

I could also use this feature. For now I just made a helper in Home Assistant with the values that I want and graph them as well.

[RomRider]

This feature exists in apexcharts-card, probably won't make it to mini-graph-card as it's in maintenance mode.

[lanrat]

@RomRider how do I implement something like this in apexcharts-card?

Looking over the documentation it looks like it could be possible with data_generator but that is likely overkill.

[RomRider]

With annotations: https://apexcharts.com/docs/options/annotations/

• examples of what you can do: https://apexcharts.com/javascript-chart-demos/line-charts/line-chart-annotations/

[lanrat]

Thanks for the pointer. I have a solution that is almost perfect, expect sometimes the annotations are outside of the viewpoint of the graph and are not shown. Is there a way to force an annotation to always be visible, or anchor one of the axis to always make it visible?

type: custom:apexcharts-card
all_series_config:
  curve: stepline
  stroke_width: 2
  group_by:
    func: avg
    duration: 5min
apex_config:
  annotations:
    yaxis:
      - 'y': 0
        strokeDashArray: 0
        borderColor: '#01579B'
        borderWidth: 2
        label:
          borderColor: '#01579B'
          text: Freezer Baseline
          style:
            color: '#fff'
            background: '#01579B'
      - 'y': 40
        strokeDashArray: 0
        borderColor: '#0277BD'
        borderWidth: 2
        label:
          borderColor: '#01579B'
          text: Fridge Baseline
          style:
            color: '#fff'
            background: '#0277BD'
series:
  - entity: sensor.fridge_temperature
    name: Fridge
    color: '#2196F3'

[lanrat]

I figured it out. Here is my final configuration for anyone else trying to do something similar:

type: custom:apexcharts-card
all_series_config:
  curve: stepline
  stroke_width: 2
  group_by:
    func: avg
    duration: 5min
apex_config:
  xaxis:
    tooltip:
      enabled: false
  yaxis:
    forceNiceScale: true
    min: -5
    max: 50
  grid:
    borderColor: grey
  annotations:
    yaxis:
      - 'y': 0
        strokeDashArray: 0
        borderColor: '#01579B'
        borderWidth: 2
        label:
          borderColor: '#01579B'
          text: Freezer Baseline
          style:
            color: '#fff'
            background: '#01579B'
      - 'y': 40
        strokeDashArray: 0
        borderColor: '#0277BD'
        borderWidth: 2
        label:
          borderColor: '#01579B'
          text: Fridge Baseline
          style:
            color: '#fff'
            background: '#0277BD'
series:
  - entity: sensor.fridge_temperature
    name: Fridge
    color: '#2196F3'

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[ildar170975]

Could be a useful feature with this implementation: https://github.com/kalkih/mini-graph-card/issues/570#issuecomment-804990374

[stale[bot]]

Still an active issue, got it! Removing stale label.

[jlsjonas]

Could be solved with #89 if also allowing style: dashed or similar

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[DamianosS]

This would be a very useful feature. Especially, adding multiple lines. Use case: swimming pool values for temperature, chlorine, pH etc. do have upper and lower thresholds. By having the lines in place the user can easily spot if the values are within the allowed boundaries.

[DamianosS]

[RoepLuke]

This would be a very useful feature. Especially, adding multiple lines. Use case: swimming pool values for temperature, chlorine, pH etc. do have upper and lower thresholds. By having the lines in place the user can easily spot if the values are within the allowed boundaries.

I want to add the following: It would be possible to use color_threshold in your example but I too would more like to have dotted lines with a specified color as this also would work flawlessly with multiple entities in one graph-card.

Currently if you dont want to create dummy-helpers and have multiple entities of some type (e.g. humidity or temperature) you can only define differently colored color_thresholds for each entity to properly differentiate between them - which then makes it harder to read / understand the graph and the purpose of the thresholds.

[conorlap]

+1 for this, would be very useful!