ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
1760

Hi, I don’t know what is wrong with my config of a Yearly - Monthly Power overview. I only see the current month, and not the Month before. The Sensors are running since February.
image

type: custom:apexcharts-card
graph_span: 12month
update_interval: 1hour
cache: true
span:
  end: month
  offset: '-1hour'
header:
  show: true
  title: MoleNord Monthly Overview
  show_states: true
  colorize_states: true
apex_config:
  xaxis:
    labels:
      format: MM
      show: true
      showAlways: true
  yaxis:
    forceNiceScale: false
    decimalsInFloat: 0
  chart:
    type: area
    height: 300
  stroke:
    show: true
    width: 1
  legend:
    show: true
  dataLabels:
    enabled: false
    distributed: true
  fill:
    type: gradient
    gradient:
      shadeIntensity: 0.1
      opacityFrom: 0.25
      opacityTo: 1
      inverseColors: true
      stops:
        - 0
        - 90
        - 100
series:
  - entity: sensor.energy_import_monthly
    name: Consumption Monthly
    type: column
    float_precision: 0
    group_by:
      func: max
      duration: 30d
    show:
      extremas: true
  - entity: sensor.solarexportminusmonthly
    name: Selfused Monthly
    type: column
    float_precision: 0
    group_by:
      func: max
      duration: 30d
  - entity: sensor.energy_export_monthly
    name: Exported Monthly
    type: column
    float_precision: 0
    group_by:
      func: max
      duration: 30d
  - entity: sensor.solarh_98050_month_eq
    name: Production Monthly
    type: column
    float_precision: 0
    group_by:
      func: max
      duration: 30d
´``
1761

Hi,

Not sure what I’m missing but if I copy the code and paste it into a custom button-card nothing shows. Could you give me a hand :slight_smile: ?

1762

Did you get the pool card working? Could you if so help me out by showing the complete code?

1763

Possible bug?

When combining two entities, one with “type: column” and the other one being “type: line” everything looks normal if the “type: line” series is set to “extend_to: end”.

image

image

Now look what will happen if I set “extend_to: now” for the series that has “type: line”. The columns shrimps into very tiny bars.

image

image

1 Like
1764

Just starting out on this fine charting tool. Great to see you can use an attribute of an entity.

One question I have and have yet to get to work is to utilise the attribute when it is non numeric?

I have motion states for cams and an attribute that details if a person is detected.
Im looking to chart the number of times a person is detected over a period.

As the attribute ‘personDetected’ is a string val of ‘true’ I thought I could use a transform to pick this up (as per previous binary sensor values, and use that, however that expression never seems to eval to true. (possible values for this attribute is either true/false

Sample code below.

type: custom:apexcharts-card
all_series_config:
  stroke_width: 2
graph_span: 24h
header:
  show: true
  title: Person Activity
  show_states: true
  colorize_states: true
now:
  show: true
  color: red
  label: Now
series:
  - entity: binary_sensor.backdoor_motion
    attribute: personDetected
    transform: 'return x === ''true'' ? 1 : 0;'
span:
  end: day

Regardless of time span of eval against true/false, it always returns 0. What am I doing wrong here?
Any tips please?

1766

I would like to use the chart to display the price of petrol.
But not all decimal places are displayed.
I saw you can adjust the Y axis with
‘decimals: 4’
but only on the Y axis.

1767

hi can some vouch me how to create a chart like this

image
image819×512 34.1 KB

ref link : Custom DataLabels Bar – ApexCharts.js

1 Like
1768

hi… instead of total like above can i add a sensor state to be showed which is not listed in entity series?
something like this is it possible?

    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return {{states('sensor.processor_use')}} + " core"
                }````
1770

Hi can someone help me how to get a chart like this, instead of comparing with single sensor i want to add 5 sensors and show for single day (show the highest value) as the sensor updates every 5 mins

image
image736×617 36.6 KB

1 Like
1771

In my HA I have a sensor counting (value is continuously increasing) power used by a smart plug. Sensor works correct and for the presentation I would like to have:

  1. chart with x-axis span 1 month showing 28/29/30/31 bars, one for power usage of each day in the month - I got it and it works almost fine
  2. chart with x-axis span 1 year showing 12 bars, one for power usage of each entire month - and here I have a problem

Here I can read that duration cannot be a “month” and I guess “month” is value I need at this point.

Any solution for that?

1772

Hello I really love the card, but may i ask if it’s possible to adjust the ‘datalable’ shown as below:

image

can i change the font-size or the location or even hide it?

could anyone help me and thank u very much.

Here is the code attached:

type: custom:apexcharts-card
chart_type: radialBar
show:
  loading: false
header:
  show: true
all_series_config:
  max: 1
series:
  - entity: light.can_ting_zuo_deng
    attribute: brightness
    transform: return x / 255;
    name: 亮度 #brightness
    opacity: 1
apex_config:
  legend:
    show: false
  dataLabels:
    enabled: true
1773

Wowl would you mind sharing your code for this card, it looks absolutely stunning!

1774

image

type: custom:apexcharts-card
config_templates: grid_chart
stacked: true
experimental:
  color_threshold: true
header:
  show: true
  title: Timpris elen
  show_states: false
graph_span: 48h
span:
  start: day
now:
  show: true
  color: rgb(90,90,90)
series:
  - entity: sensor.nordpool_kwh_se3_sek_3_08_025
    yaxis_id: first
    time_delta: +30m
    name: Timpris el
    color: rgb(200,140,0)
    data_generator: >
      var output =
      entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow); return
      output.map((entry) => { return [new Date(entry.start), entry.value]});
    curve: stepline
    type: column
    stroke_width: 0
    show:
      legend_value: false
      in_header: false
      in_chart: true
    color_threshold:
      - value: 0
        color: green
        opacity: 1
      - value: 1
        color: rgb(200,140,0)
      - value: 2
        color: rgb(180,0,0)
      - value: 5
        color: rgb(255,0,0)
  - entity: sensor.nordpool_kwh_se3_sek_3_08_025
    yaxis_id: first
    time_delta: +30m
    name: Fasta avgifter
    data_generator: >
      var output =
      entity.attributes.raw_today.concat(entity.attributes.raw_tomorrow); return
      output.map((entry) => { return [new Date(entry.start), entry.value -
      entry.value + 0.0175 + 0.305 + 0.45]});
    color: rgb(85,75,55)
    type: column
    stroke_width: 0
    show:
      legend_value: false
      in_header: false
      in_chart: true
  - entity: sensor.energy_h
    curve: smooth
    yaxis_id: second
    color: rgb(215,170,40)
    name: Förbrukning
    type: line
    stroke_width: 2
    extend_to: end
    group_by:
      func: max
      duration: 1h
yaxis:
  - id: first
    min: 0
    max: 9
    apex_config:
      decimalsInFloat: 0
      forceNiceScale: true
      labels:
        style:
          fontSize: 12px
          fontWeight: normal
          colors: rgb(150,150,150)
        formatter: |
          EVAL:v => `${v.toFixed(0)} kr`
      fill:
        type: gradient
        gradient:
          shadeIntensity: 0.5
          inverseColors: true
          opacityFrom: 0.4
          opacityTo: 0
          stops:
            - 2
  - id: second
    min: 0
    max: 5
    opposite: true
    show: false
    apex_config:
      decimalsInFloat: 0
      forceNiceScale: true
      labels:
        style:
          fontSize: 11px
          fontWeight: normal
          colors: rgb(130,130,130)
apex_config:
  legend:
    show: false
  plotOptions:
    bar:
      columnWidth: 95%
  chart:
    type: area
    height: 200
    offsetY: -10
    parentHeightOffset: -5
  xaxis:
    axisBorder:
      show: false
    axisTicks:
      show: true
    tooltip:
      enabled: false
    tickPlacement: between
    crosshairs:
      show: true
    labels:
      style:
        fontSize: 11px
      offsetX: -1

template "grid_chart":

apexcharts_card_templates:
  grid_chart:
    show:
      loading: false
    header:
      show: true
      show_states: false
      colorize_states: true
    apex_config:
      yaxis:
        labels:
          show: true
          style:
            fontSize: 11px
            fontWeight: normal
            colors: rgb(150,150,150)
      xaxis:
        tooltip:
          enabled: false
        labels:
          show: true
          style:
            fontSize: 11px
            fontWeight: normal
            colors: rgb(150,150,150)
          offsetX: 0
          offsetY: -3
        axisTicks:
          show: true
          height: 3
          color: rgb(150,150,150)
        axisBorder:
          show: false
          color: rgb(70,70,70)
          height: 1
          width: 100%
          offsetX: 0
          offsetY: 0
        crosshairs:
          show: false
          width: 1
          position: back
          opacity: 100
      grid:
        show: true
        borderColor: rgb(60,60,60)
        strokeDashArray: 1
        xaxis:
          lines:
            show: false
        row:
          colors: rgb(60,60,60)
          opacity: 0.2
      tooltip:
        enabled: true
      legend:
        showForSingleSeries: true
        fontSize: 11px
        fontWeight: normal
        labels:
          colors: rgb(200,200,200)
        enabled: true
      chart:
        height: 340px
        zoom:
          enabled: true
        toolbar:
          show: false
          tools:
            zoom: true
            zoomin: true
            zoomout: true
        opacity: 0.5
    style: |
      div#header__title {
        color: rgb(200, 200, 200);
        font-size: 17px;
        font-weight: bold;
      }
2 Likes
1775

Hi everyone,
I wanted to give interactive charts a go but before I spend hundreds of noob hour wondering what I am doing wrong:
are these kind of charts supported?
https://apexcharts.com/javascript-chart-demos/area-charts/github-style/
https://codepen.io/apexcharts/pen/QrbEQg
https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/

1776

Thank you, could you explain how you are using grid_chart as a config template in the configuration?

1777

@RomRider A really great job that you have done so far!

I found you with that picture on other post:

I would like to have the right top bar Chart with my sensor.daily_energy and sensor.daily_solar_energy

How can i do that? I tried a few things but doesnt get it :confused:

1778

Anyone have an idea if it is possible to have dynamic value/code in color_threshold ?

Eg: I want one color to be 25% of sensor.entity.attribute_no4, an other color 50% of sensor.entity.attribute_no5 and so on…

1779

It’s best described in the docs:

1780

Hi,

I think i have 2 simple questions regarding the apexchart-card:

  1. I want to get the steps of the lines of the yaxis set to clean 100-steps. Cant find a option for this.

  2. I don’t want to draw apex a line of values after “now”. Can i make apexchart stop drawing a line after “now”?

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 12h
show:
  last_updated: true
  loading: false
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: Solarertrag Tagesverlauf
now:
  show: true
  color: red
  label: jetzt
span:
  start: day
  offset: +6h
yaxis:
  - min: 0
    max: 800
    decimals: 0
apex_config:
  fill:
    type: gradient
    gradient:
      shadeintensity: 1
      opacityFrom: 0.5
      opacityTo: 1
      inverseColors: true
series:
  - entity: sensor.shl_pls_pv_anlage_power
    name: Power
    stroke_width: 2
    group_by:
      duration: 60min
    show:
      extremas: max
      header_color_threshold: true

apex

1781

Hi,

I’ve setup a nordpool integration and a apex graph which works beautifylly except one thing I can’t figure out.

I’d like to have the current value in header but it seems the last value in graph which is in the future is picked up. In this case 62 is last and current is 368. Bonus if I could hide sensor name also but not that important.

image

type: custom:apexcharts-card
graph_span: 27h
experimental:
color_threshold: true
header:
title: Elpriser SE3 (öre/kWh ex moms)
show: true
show_states: true
colorize_states: true
apex_config:
yaxis:
min: 0
hours_12: false
span:
start: hour
offset: ‘-3h’
now:
show: true
label: Nu
series:

  • entity: sensor.nordpool_kwh_se3_sek_0_10_0
    type: column
    data_generator: |
    return (entity.attributes.raw_today.map((start, index) => {
    return [new Date(start[“start”]).getTime(), entity.attributes.raw_today[index][“value”]];
    })).concat(entity.attributes.raw_tomorrow.map((start, index) => {
    return [new Date(start[“start”]).getTime(), entity.attributes.raw_tomorrow[index][“value”]];
    }));
    color_threshold:
    • value: 0
      color: green
    • value: 50
      color: yellow
    • value: 100
      color: orange
    • value: 200
      color: red
    • value: 300
      color: darkred
1 Like