ApexCharts card - A highly customizable graph card

kleinerhobbit · October 29, 2023, 11:42am

Hi all

I am using ApexCharts with the apex_config: option to have more option to customize the chart.
Does someone kowns if there is an option to change the image url due to the value of the sensor?

type: custom:apexcharts-card
chart_type: radialBar
apex_config:
  .
  .
  .
  plotOptions:
    radialBar:
      .
      hollow:
        image: "Swich this URL due to sensor value" <--
series:
  - entity: sensor.my_sensor

Any idea or help is very welcome.

HVPereira · October 29, 2023, 4:00pm

Did you managed to figure this one out?

Steve.Eggo · October 30, 2023, 7:31am

Try changing the entity name: Allergy Forcast to name: " "
If you remove the row name: graph will display the sensor name
If you have name: with nothing following it you get an error
Setting name: " " displays a space that you cannot see

There is a lot of information here:

pcwii · October 31, 2023, 1:12am

I am trying to create a graph of some sports stats and I would like the line graph to start at the start of the season and the end of the graph to be the current date so that I can see the season progress.
Is this possible? The documentation is not clear if I can dynamically do this or not.

mstu01 · October 31, 2023, 2:39pm

Hey there,

I’m currently trying to achieve something like this in the ApexChart Card (red lines are the problem)

Chart

Basically adding red vertical lines on the lowest price ranges for the forecast. I need it to be dynamically, since i calculate how long i need to let a certain automation run, for example 3 hours - so i need the timeframe for the lowest 3 datapoints which are directly connected. I get this points via the EPEX Spot integration, now i only need to make these red lines.

My current card config:

type: custom:apexcharts-card
header:
  show: false
graph_span: 48h
span:
  start: day
now:
  show: true
  label: Now
color_list:
  - var(--primary-color)
series:
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: line
    curve: stepline
    extend_to: false
    show:
      extremas: true
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh]; }).slice(0,24);
    color_threshold:
      - value: 0
        color: '#186ddc'
      - value: 5
        color: '#04822e'
      - value: 10
        color: '#12A141'
      - value: 12
        color: '#79B92C'
      - value: 15
        color: '#C4D81D'
      - value: 20
        color: '#F3DC0C'
      - value: 25
        color: red
      - value: 30
        color: magenta
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: line
    curve: stepline
    extend_to: end
    show:
      extremas: true
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh];
      }).slice(23,47);
    color_threshold:
      - value: 0
        color: '#186ddc'
      - value: 10
        color: '#04822e'
      - value: 15
        color: '#12A141'
      - value: 20
        color: '#79B92C'
      - value: 25
        color: '#C4D81D'
      - value: 30
        color: '#F3DC0C'
      - value: 35
        color: red
      - value: 40
        color: magenta
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    color: green
    float_precision: 2
    type: area
    curve: stepline
    extend_to: false
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(),
      entry.price_ct_per_kwh];}).slice(parseInt(hass.states['sensor.epex_start_low_period'].state.substring(0,2)),parseInt(hass.states['sensor.epex_start_low_period'].state.substring(0,2))+4);
experimental:
  color_threshold: true
yaxis:
  - id: uurprijs
    min: 0.1
    max: 50
    decimals: 2
    apex_config:
      title:
        text: ct/kWh
      tickAmount: 4
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59

Do anyone can give me a hint?
Thanks!

ppmt · October 31, 2023, 11:01pm

You need to use the data_generator…something like that.

series:
  - entity: sensor.electricity_xxxx_xxxx_current_rate
    data_generator: |
      return entity.attributes.all_rates.map((entry) => {
         return [new Date(entry.valid_from), entry.value_inc_vat];
       });

Here is my card for my rate. I use column rather than line

type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Today's Import Flux Rates
stacked: false
graph_span: 24h
span:
  start: day
now:
  show: true
  label: Now
  color: black
yaxis:
  - min: -10
    max: 40
    decimals: 1
series:
  - entity: sensor.electricity_xxxx_xxxx_current_rate
    type: column
    name: price
    color: gray
    opacity: 1
    stroke_width: 0
    unit: p/Kw
    show:
      in_header: false
      legend_value: false
      header_color_threshold: true
    color_threshold:
      - value: -100
        color: cyan
      - value: 0
        color: green
      - value: 20
        color: orange
      - value: 30
        color: red
    data_generator: |
      return entity.attributes.all_rates.map((entry) => {
         return [new Date(entry.valid_from), entry.value_inc_vat];
       });

Steve.Eggo · November 1, 2023, 6:27am

Thanks Philippe, I have marked my question as solved.

03397 · November 1, 2023, 12:46pm

Guys is there a way when I hover the mouse over the graph to make the date in the black backround not to be shown, since at the edges it is cropped?

`
type: custom:apexcharts-card
header:
show: true
title: Outdoor Temperature
show_states: true
colorize_states: true
series:

entity: sensor.outside_temperature
stroke_width: 2
show:
in_header: true
name_in_header: false
`

haraldh · November 2, 2023, 1:08pm

Hi, would You share how You have created the sensor.*_energy sensors? And that hourly graph is very nice, would like to look at that as well. Thanks.

scriptengine · November 2, 2023, 3:05pm

Max and average of 3 sensors

Does anyone know if I could graph the maximum of three sensors for each data point IN Apex charts
And plot the the average of 3 different sensors IN Apex charts

(I can do it with a template sensors in HA, but if I can do it in the chart that would be better for my scenerio.)

Thanks for reading

Shooter182 · November 2, 2023, 6:37pm

hey guys,

I have not yet found out how I can increase the font size of the displayed values in the upper area and how I can change the font of the axis labeling?
Then I miss the unit on the Y axis?

do you have a tip for me, I didn’t get any further on github.
Greeting Andi

zavjah · November 3, 2023, 12:25pm

[SOLVED]
Hi there,

this is an awesome card, thx very much @RomRider.

This is what I have so far:

And I have few questions, I couldn’t find an answer so far:

I want to have the value of each column there but it shows only on two. Someone an idea why?
How do I get those values without colored background?
Is there a way to get the top edges of the column rounded, like in the standard graphs of HA?

thx,
zavjah

Solarflor · November 5, 2023, 9:14am

Dear all,
this is my first experience with ApexCharts and I’m pround of what I have done so far but now I need your help.
I’m trying to create a nice energy dashboard.

This is what I have done so far:

type: custom:apexcharts-card
header:
  show: true
  title: Bilancio Energia
  show_states: true
  colorize_states: true
chart_type: donut
series:
  - entity: sensor.myenergi_hub_20007605_grid_import_today
    name: Importata
    color: red
  - entity: sensor.myenergi_hub_20007605_green_consumed_today
    name: Green Consumata
    color: green
  - entity: sensor.myenergi_hub_20007605_grid_export_today
    name: Esportata
    color: yellow
apex_config:
  plotOptions:
    pie:
      startAngle: -130
      endAngle: 130
  legend:
    show: false
  dataLabels:
    enabled: true
    style:
      fontSize: 18px

Now I would like to add two additional donuts concentrics to the first one to summarise the total Energy Consumed and the Total Energy Produced.

Is it possible?
eventualy without to show the black portion of these two additional donuts.
Thanks for your support

Lipown · November 5, 2023, 11:16pm

Hi guys, could you advise how to create same sensor as in example: GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant

Thanks!

Solarflor · November 6, 2023, 10:47am

Hi foraster,
have you found a way to do it?

Holdestmade · November 6, 2023, 11:02am

Maybe this ?

Solarflor · November 6, 2023, 12:38pm

Hi Holdrstmade,
do you believe it could be done also to the below type of chart?

I have tried but it doesnt work

type: custom:apexcharts-card
header:
  show: true
  title: Bilancio Energia
  show_states: true
  colorize_states: true
chart_type: donut
series:
  - entity: sensor.myenergi_hub_20007605_grid_import_today
    name: Importata
    color: red
  - entity: sensor.myenergi_hub_20007605_green_consumed_today
    name: Green Consumata
    color: green
  - entity: sensor.myenergi_hub_20007605_grid_export_today
    name: Esportata
    color: yellow
apex_config:
  dataLabels:
    enabled: true
    style:
      fontSize: 10px
    dropShadow:
      enabled: false
    formatter: |
      EVAL: function (value, opt) {
          return opt.w.config.labels[opt.seriesIndex] + ": " + opt.w.config.series[opt.seriesIndex].toFixed(0) + " " + " W" ;
        }
  plotOptions:
    pie:
      startAngle: -130
      endAngle: 130
  legend:
    show: false
    pie:
      donut:
        size: 40%
        dataLabels:
          minAngleToShowLabel: 0.5
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(0) + " W"
                }

Solarflor · November 6, 2023, 12:58pm

I found a way.

but what about if I want to show another entities instead the total?

Solarflor · November 6, 2023, 6:03pm

Any help on this?

Lipown · November 6, 2023, 7:02pm

Hello, would it be possible:

Show sum of column on mouse hover?
Hide the date and time tab when the another one is already shown

Thanks!

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
graph_span: 2d
span:
  start: day
now:
  show: true
  label: Teď
series:
  - entity: sensor.current_spot_electricity_buy_price
    name: Celková cena
    color: black
    show:
      in_header: raw
      in_chart: false
    float_precision: 2
  - entity: sensor.cena_tarifu
    type: column
    name: Cena tarifu
    color: green
    float_precision: 2
    group_by:
      func: sum
      duration: 1hour
    data_generator: |
      return entity.attributes.datum.map((peak, index) => {
        return [new Date(peak).getTime(), entity.attributes.hodnota[index] * 1.21];
      });
  - entity: sensor.current_spot_electricity_price
    type: column
    color: orange
    name: Spot
    float_precision: 2
    group_by:
      func: sum
      duration: 1hour
    show:
      in_header: before_now
    data_generator: |
      return Object.entries(entity.attributes).map(([date, value], ) => {
        return [new Date(date).getTime(), value* 1.21];
      });
stacked: true
apex_config:
  legend:
    show: false