ApexCharts card - A highly customizable graph card

danielweb · January 10, 2024, 9:02am

I am trying to create a donut chart based off some local csvfiles, but I am not able to show each entry (“Name”) with its corresponding value (“Wert”), instead, it just uses the last entry in my local json file as a series value.

For a donut chart, is there a way to create a custom series for each “Name” it finds in the local json? So is there a dynamic way to add as many series as it finds in the json?

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  standard_format: true
  disable_actions: true
  show_states: false
  colorize_states: true 
apex_config:
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true 
series:
  - entity: input_number.dummy
    group_by:
      func: "raw"
    data_generator: |
      const request  = async () => {
        let a = [],
          req = await fetch('/local/data/mydata/holdings.json', {method: 'GET', headers: {'Accept': 'application/json'}, cache: 'no-cache' }), 
          req_json = await req.json();

        for(let r of req_json["data"]) {
          a.push([r["Name"],r["Wert"]]);
        }
        
        console.log(a);
        return a;
      };
      return request();

smibrandon · January 10, 2024, 2:46pm

Is it possible to have two (or more) concentric donuts like this…?

ChatGPT suggested some YAML (a piece if it is below), but I wasn’t able to get it to work my in case. Perhaps sharing that will inspire someone.

series:
  - data:
      - entity: sensor.sensor1
      - entity: sensor.sensor2
      - entity: sensor.sensor3
  - data:
      - entity: sensor.sensor4
      - entity: sensor.sensor5
      - entity: sensor.sensor6

Fingers crossed. Thanks in advance!

complex1 · January 10, 2024, 2:50pm

Install config-template-card Card integration and try this:

type: custom:config-template-card
variables:
  - states['48_hour_anerage_electricity_profit_cost'].state
card:
  type: custom:apexcharts-card
  header:
    [...]
  apex_config:
    annotations:
      yaxis:
        - 'y': ${vars[0]}
          borderColor: '#00E396'
          borderWidth: 4
          label:
            text: mean

blaxxor · January 11, 2024, 8:24pm

Is there any way to change font-size for entities value in header when using:

header:
  show_states: true

I’ve tried various card-mod but nothing seems to be able to change the font for those values. I only managed to change the font for the title.

RuneNyhuus · January 12, 2024, 8:45pm

Does Apexchart not working with Long Term Statistic ?
My Charts seems to not include the long term stats data?

langestefan · January 13, 2024, 2:06am

It does. Have a look at the statistics options.

ChatGPT doesn’t understand what you’re doing, it suggests total nonsense.

langestefan · January 13, 2024, 2:09am

Useful during the cold winter days:

Code

type: custom:apexcharts-card
span:
  end: day
header:
  title: Airco Energy Consumption
  show: true
  colorize_states: true
graph_span: 7d
locale: en
apex_config:
  chart:
    type: area
  xaxis:
    labels:
      format: ddd
yaxis:
  - id: first
    decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
  - id: second
    opposite: true
    decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
series:
  - entity: sensor.airco_energy
    name: Airco Energie
    yaxis_id: first
    type: column
    show:
      datalabels: true
    statistics:
      type: sum
      period: hour
    group_by:
      func: diff
      duration: 24h
  - entity: sensor.bresser_weather_station_temperature
    name: Weerstation
    yaxis_id: second
    type: line
    show:
      datalabels: true
    group_by:
      func: min
      duration: 24h

BSGalactica · January 13, 2024, 8:47pm

Hello
I was looking an implemetation for this also, but apexcharts only can use different entities for pie as far as I know.
Perhaps a Feature Request for apexchart to use values of the same sensor??

Meanwhile, I have configured some sensors to cover this.
Perhaps not the best one or the final one. But it could be an option
Here is the link with the implementation:

Sensor with different values in an apexchart pie – MelCloud – OperationMode example

I hope this helps

Best regards

Henkonoly · January 13, 2024, 11:34pm

Thx!

I have allmost the same using this code:

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 7d
span:
  end: day
header:
  show: true
  title: WP werkingsstatus | dag
  show_states: true
  colorize_states: true
chart_type: pie
series:
  - entity: sensor.wp_werking_geschiedenis_legionella
  - entity: sensor.wp_werking_geschiedenis_koelen
  - entity: sensor.wp_werking_geschiedenis_ontdooien
  - entity: sensor.wp_werking_geschiedenis_stop
  - entity: sensor.wp_werking_geschiedenis_verwarmen
  - entity: sensor.wp_werking_geschiedenis_warm_water

but yours look better, so i borrow some of the code, great

luberk8 · January 14, 2024, 5:22am

I would like to use this feature of apex charts for smoother interpolations:

stroke: {
curve: “monotoneCubic”
}

I can’t figure out where to add it. I tried this, but it just stopped showing any plots:

apex_config:
stroke:
curve: monotoneCubic

hajo62 · January 14, 2024, 9:57am

Is there a way to make the graph using the full card, having no axis and name as well as state (center and a big font) on the top and above the graph?
Similar to the mock shown below?

I know the mini-graph-card, but there the graph is only a very small part of the card.

vingerha · January 14, 2024, 10:12am

Here are a number of things you can play with

layout: minimal  
apex_config:
  legend:
    show: false
  grid:
    margin:
      left: 0
      right: 0
  xaxis:
    axisborder:
      show: false
    axisTicks:
      show: false
    labels:
      show: false
  yaxis:
    axisborder:
      show: false
    axisTicks:
      show: false
    labels:
      show: false

hajo62 · January 14, 2024, 10:46am

The layout: minimal does most of what I was looking for. Thanks for the hint.

Most of the other seem to redundant, when going with the minimal; at least, I don’t see changes, wehe playing with those.

Now I looks like this:

Is there a way to stretch the graph to the top of the graph (plotted behind the state value)?
How to move the state value to the middle?

Edit: Added the source, to have it together with the result.

type: custom:apexcharts-card
layout: minimal
header:
  show: true
  title: Außen
  floating: true
  show_states: true
  colorize_states: false
graph_span: 24h
series:
  - entity: sensor.lumi_lumi_weather_temperature_2
    name: Außen
    color: '#ff444f'
apex_config:
  stroke:
    width: 2
  legend:
    show: false
    showForSingleSeries: true
    position: top
    horizontalAlign: center
    fontSize: 40px
    offsetX: 0
    offsetY: -8
    labels:
      useSeriesColors: false
    onItemClick:
      toggleDataSeries: false
    onItemHover:
      highlightDataSeries: false

vingerha · January 14, 2024, 11:40am

add floating: true to the header section

hajo62 · January 14, 2024, 12:02pm

Had this already. Does only half of the expected stretching.
I’ve added my source to my posting above, to have source and result together.

Kire88 · January 14, 2024, 1:44pm

Looking for some help here with the y-axis. The value does not correspond to the value of the combined values for both airco’s, it tops off at 16. Looking for some advise where I am going wrong with my config.

type: custom:apexcharts-card
stacked: true
span:
  end: day
header:
  title: Airco Energy Consumption
  show: true
  colorize_states: true
graph_span: 7d
apex_config:
  chart:
    type: area
  xaxis:
    labels:
      format: ddd
yaxis:
  - id: first
    decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
  - id: second
    opposite: true
    decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
series:
  - entity: sensor.living_room_energy_consumption
    name: Daikin
    yaxis_id: first
    type: column
    show:
      datalabels: true
    statistics:
      type: sum
      period: hour
    group_by:
      func: diff
      duration: 24h
  - entity: sensor.daily_energy_airco_upstairs_2
    name: Gree
    yaxis_id: first
    type: column
    show:
      datalabels: true
    statistics:
      type: sum
      period: hour
    group_by:
      func: diff
      duration: 24h
  - entity: sensor.average_daily_outdoor_temp
    name: Average temperature
    yaxis_id: second
    type: line
    show:
      datalabels: true
    group_by:
      func: min
      duration: 24h

apex

airman · January 15, 2024, 5:05pm

Hi guys,

does anyone have an idea, how I could align the columns correctly?
I think with this data generator I am just adding the start time, but no end time, so the columns are centered exactly at the hour:

But this example, the columns are right of the hour, as they seem to represent a duration of 1hr or have an end time:

How could I change the data_generator to get the same results as in the example?
There would be an attribute end_time available too.

- type: custom:apexcharts-card
  card_mod:
    style: |
      ha-card {
        border: none;
        background: none;
        box-shadow: none;
      }
  yaxis:
    - decimals: 0
      show: true
      apex_config:
        forceNiceScale: true
        decimalsInFloat: 0
        labels:
          style:
            colors: '#9b9b9b'
            fontSize: 12
            fontWeight: bolder
            fontFamily: Roboto,Noto,sans-serif
  apex_config:
    tooltip:
      x:
        show: true
        format: HH:00 - HH:59
    chart:
      height: 232px
    grid:
      show: true
      borderColor: '#9b9b9b'
    xaxis:
      axisTicks:
        show: true
        color: '#9b9b9b'
      labels:
        style:
          colors: '#9b9b9b'
          fontSize: 12
          fontWeight: bolder
          fontFamily: Roboto,Noto,sans-serif
      axisBorder:
        show: false
  graph_span: 36h
  span:
    start: hour
    offset: '-2hr'
  series:
    - entity: sensor.epex_spot_at_net_price
      show:
        extremas: true
      name: Strompreis
      type: column
      color: '#0288d1'
      stroke_width: 2.5
      unit: ct/kWh
      extend_to: false
      float_precision: 2
      data_generator: >
        return entity.attributes.data.map((entry, index) => { return [new
        Date(entry.start_time).getTime(), entry.price_ct_per_kwh]; });

Thank you
Oliver

Dakononov · January 15, 2024, 7:05pm

Please, can you share the code?

airman · January 16, 2024, 6:30am

Hi,

I have added the complete card code now.

Thank you

vingerha · January 16, 2024, 7:03am

If I look at the history graph, the measurements seem to be ‘on’ the hour so why would you want it to show ‘next’ to the hour, isn’t that twisting the data? I also donot know why you interpret the column to be a period but that is a different topic. Simple solution (?) would be to add a small offset to push it left or right as this seems stable ‘on-the-hour’