ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
2051

Hi,

I am trying to build a graph spanning over three days but the x-axis doesnt show any number except the first/last every day. What am I doing wrong? Would have liked to have at least every three hour shown on x-axis.

image
image2326×900 203 KB 

type: custom:apexcharts-card
header:
  show: true
  title: Förbrukning vs elpriser
  show_states: true
  colorize_states: true
now:
  show: true
  label: Nu
graph_span: 72h
span:
  start: day
  offset: '-24h'
apex_config:
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
  xaxis:
    labels:
      format: HH
      show: true
      rotate: -45
      rotateAlways: true
      hideOverlappingLabels: false
      style:
        fontSize: 10
        fontWeight: 10
  chart:
    xaxis.type: datetime
    height: 300px
    zoom:
      enabled: false
    toolbar:
      show: false
      tools:
        zoom: false
        zoomin: false
        zoomout: false
        pan: false
        reset: true
  tooltip:
    fixed:
      enabled: true
      position: topLeft
yaxis:
  - id: second
    apex_config:
      min: 0
      max: auto
      opposite: true
      forceNiceScale: true
      decimalsInFloat: 2
      labels:
        show: true
  - id: first
    apex_config:
      min: 0
      max: auto
      opposite: false
      forceNiceScale: true
      decimalsInFloat: 0
      labels:
        show: true
all_series_config:
  stroke_width: 4
series:
  - entity: sensor.house_consumed_energy_from_grid
    yaxis_id: first
    name: Förbrukning / h
    type: area
    curve: stepline
    extend_to: now
    float_precision: 2
    stroke_width: 2
    opacity: 0.1
    color: orange
    show:
      in_header: true
      legend_value: false
    group_by:
      duration: 1h
      start_with_last: true
      func: diff
  - entity: sensor.nordpool_excl_vat
    yaxis_id: second
    name: Pris igår
    type: line
    curve: stepline
    extend_to: now
    float_precision: 3
    stroke_width: 3
    opacity: 1
    color: grey
    show:
      in_header: false
      legend_value: false
  - entity: sensor.nordpool_excl_vat
    yaxis_id: second
    name: Pris idag
    type: line
    curve: stepline
    extend_to: now
    float_precision: 3
    stroke_width: 3
    opacity: 1
    color: cyan
    show:
      in_header: true
      legend_value: false
    data_generator: |
      return entity.attributes.raw_today.map((p) => {
        return [new Date(p.start), p.value];
      });
  - entity: sensor.nordpool_excl_vat
    yaxis_id: second
    name: Pris imorgon
    type: line
    curve: stepline
    extend_to: now
    float_precision: 3
    stroke_width: 3
    opacity: 1
    color: magenta
    show:
      in_header: false
      legend_value: false
    data_generator: |
      return entity.attributes.raw_tomorrow.map((p) => {
        return [new Date(p.start), p.value];
      });
2052

hi @cvester , not sure if you question from 21 Jun 2021 was solved somehow satisfactory… :slight_smile: did you find some solution of showing a 12 month graph?
thx. Willy

2053

hi @fhopley , I am curious about setting the data generator to show the monthly graphs of energy production and consumption, as I can read these values from the WattRouter device with the multi-scrape integration (data from the XML source).
I saw at your graphs using also monthly values, but I guess these are always 4 weeks within the month?)
I would need just one monthly value - so the graph can maybe be fixed to categories like:
Jan, Feb, Mar, … , Dec on the X-axis, and at the Y-axis there could be the values readed from the multiscrape sensor (from the XML).

Could you plz share your code for the graph setting what you have achieved?
or - could you plz help with the code - just to show 12 months (not 12*4 values in columns?)

Simply: I would like to have something similar as shown at the original Apex - example: (JavaScript Basic Column Chart Example – ApexCharts.js)

Thanks to anyone who can help with this :slight_smile:

2054

When using zoom or pan, how do I stop chart updates from resetting the view span back to default?

2055

I ended up using chartjs-card but found out that you also can do a

    group_by:
      duration: 1month
      func: sum
2056

When I do zoom or pan I only get data for the period the graph was in in any case. In other words if it shows 24h of data and I zoom out (or pan), I still only see that original 24h of data. How did you get it to show more?

2057

It doesn’t show more than the set time span. But the problem is that I have it set to 2h but when I zoom to e.g. 10 minutes period inside that 2h, it changes back to 2h full view right after new data appears. And it’s getting almost realtime data (power measurement) with 5 sec update rate.
I could of course change update rate to slower but I’d like to keep fast updates.

2058

This seems to work better when I enable brush, then also zoom and pan buttons work correctly. Zoom reset doesn’t work, it just does “something”. To reset zoom I have to move brush to the end of the chart and then next chart value update resets zoom to default brush span value.

2059

Do someone know how to only enable tooltip on specific series?
I currently have this (code) but if i hover on the two other graphs then it still shows the value
image

apex_config:
  xaxis:
    labels:
      show: true
    tooltip:
      enabled: false
  tooltip:
    enabledOnSeries:
      - 0
    x:
      show: true
      format: dddd - H:mm
    fixed:
      enabled: true
      position: topRight
      offsetX: -10
      offsetY: -20

full code:

type: custom:apexcharts-card
now:
  show: true
  color: orange
show:
  loading: true
update_interval: 2m
header:
  show: true
  title: Beste
graph_span: 3d
span:
  start: day
  offset: '-1d'
apex_config:
  grid:
    show: false
  legend:
    show: false
  xaxis:
    labels:
      show: true
    tooltip:
      enabled: false
  tooltip:
    enabled: true
    enabledOnSeries:
      - 0
    x:
      show: true
      format: dddd - H:mm
    fixed:
      enabled: true
      position: topRight
      offsetX: -10
      offsetY: -20
yaxis:
  - id: pris
    min: 0
    apex_config:
      decimalsInFloat: 2
      forceNiceScale: true
      labels:
        show: false
  - id: forbruk
    min: 0
    apex_config:
      opposite: true
      decimalsInFloat: 0
      labels:
        show: false
  - id: powersaver
    apex_config:
      labels:
        show: false
series:
  - entity: sensor.powersaver
    yaxis_id: pris
    name: Pris
    extend_to: end
    color: green
    type: line
    curve: straight
    stroke_width: 2
    data_generator: |
      return entity.attributes.hours.map((entry) => {
        return [new Date(entry.start), entry.price];
      });
  - entity: sensor.powersaver
    data_generator: |
      return entity.attributes.hours.map((entry) => {
        return [new Date(entry.start), entry.onOff];
      });
    yaxis_id: powersaver
    name: ' '
    color: green
    type: area
    opacity: 0.2
    curve: stepline
    stroke_width: 0
    show:
      in_header: false
      name_in_header: false
      datalabels: false
  - entity: sensor.varmtvannsbereder_sanntid
    yaxis_id: forbruk
    name: Forbruk
    extend_to: now
    color: orange
    type: column
    curve: stepline
    stroke_width: 1
    group_by:
      func: avg
      duration: 60m
2060

Is there a way to use a bar chart to show how long a sensor stays in any given state over a period of time?

image
image817×204 6.42 KB

1 Like
2061

I expect this is because your xaxis type is set to datetime. You will have to try another option but the result may not satisfactory, I’m not sure…

2062

You need to read the Apex Charts docsto see what is possible. Particularly the area charts demos

2063

Looks like you can do it with bar charts JavaScript Column Chart with nagative values – ApexCharts.js so maybe look at combining the options there with then similarly named area charts with negative values?

2064

I always check those docs also, but did not see the option for that (which does not mean that it does not exist).

2065

Legend>>show>>false is the native Apex Charts option to remove those and it looks like you need to use apex_config in this card to achieve that

2066

TBH I didn’t see exactly what you are after but maybe you will get some alternative inspiration

2067

Check the docs for more info but looks like you need to increase the size of the central hollow.

hollow: {
        margin: 15,
        size: "70%"
      },
2068

What can I change to have a horizontal line on this chart at y-value 0.
image

I have no specific min or max values set, so the range is dynamic.

2069

You can work with annotations:

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 0
        strokeDashArray: 0
        borderColor: '#DDDDDD'
        borderWidth: 1
2070

Team,
Can I use an entity value in the data_generator?
example:
Where I take the value of an entity and add that to the ‘entry.price’. The code below does not work.

    data_generator: |
      var extra_costs = {{ states('sensor.anwb_extracosts') | float(0}};
      return entity.attributes.Prices.map((entry) => {
        return [new Date(entry.start), entry.price + extra_costs];
      });

Is there an easy way to use an entity value in the data_generator?