ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
4098

I have a noob question that I’m sure is very simple: how do I use data_generator to force the chart to use server time? I see that it is supported now, but I cannot find an example and I do not know java script. All the examples seem more complex to shift the time or add logic that doesn’t apply to me.

I found this snippet on the GitHub page: data.push([start.getTime()]) but I can’t seem to get it to work. Here is a chart that I am trying to add it to:

type: custom:apexcharts-card
graph_span: 2h
all_series_config:
  stroke_width: 1.5
yaxis:
  - id: temp
    decimals: 0
    min: ~90
    max: ~101
series:
  - entity: sensor.water_temperature
    yaxis_id: temp
    name: Temp
4099

Hi all,

I have couple of ApexCharts that use some configured values that are stored in helpers. Unfortunately I’m unable to figure out how I can use helper values inside the data_generator code.

Is it even possible with ApexCharts? I also tried wrapping it in a iantrich/config-template-card, but also that doesn’t work for the data_generator code…

Any help is greatly appreciated!
Raymond

4100

Interesting topic, care to share some code and what you want to achieve? One example suffices I guess

EDIT: I use another template card and this works

      data_generator_template: |
        return entity.attributes.{{states('sensor.test')}}.map((entry) => {
              return [new Date(entry.datetime), entry.temperature];
            })

gadgetchnnel/lovelace-card-templater: Custom Lovelace card which allows Jinja2 templates to be applied to other cards

4101

For some reason var(--card-background-color) does not do anything for me, it’s just black. I’ve tried several other color variables and none of them works, all just black.
If I manually set a color with a hex or name it does work as intended. Any idea whats wrong?

4102

I spent hours yesterday on formatitng a lot of cards and with odd issues, then finding out that I had card_mod 2.5.0 installed which apparently has bugs, downgraded to 2.4.4. and it works

4103

3.5.0… downgrade to 3.4.3 , restart then upgrade to 3.4.4.

4104

Yeah, sorry… I meant 3.4.4 (and buggy 3.5.0)…but nothing more, did no need an additional further downgrade > upgrade. Why do you suggest this, something I am not aware about?

1 Like
4105

It was in another post, some people having issues with simple downgrade from 3.5.0 to 3.4.4

4106

OK, I have had no issues but the main gist is: get rid of 3.5.0 :slight_smile: …for now

1 Like
4107

I’ve also tried a few of the system color variables, I get the same “black” colour results. It looks like the the color variables are not working. The document example shows an example with color variables so it should work, I am wondering whether this is a recent bug,

Color variables that I tried.

            color_threshold:
              - value: 50
                color: var(--divider-color)
              - value: 20
                color: var(--info-color)
              - value: 5
                color: var(--warning-color)
              - value: 0.1
                color: var(--accent-color)
              - value: 0
                color: var(--card-background-color)
4108

image
image756×584 26.2 KB

Is there any way to have day names only appear once (when day changes) in x axis labels?

4109

To set you a bit in the right direction, you can use javascript, e.g.

apex_config:
  xaxis:
    type: numeric
    tickAmount: 6
    position: bottom
    labels:
      formatter: |
        EVAL:(timestamp) => {
          let date = new Date(timestamp);
          if (date.getHours() == 0)
            { return new Date(timestamp).toLocaleDateString('en-US', { weekday: 'long' });}
            else
            { return date.getHours() + ':' + date.getMinutes()}
        }

image
image941×390 19.9 KB

4110

Thanks. But it only helps if one of the tick labels is midnight which is not always true.

4111

How do you format the values of a slice in a donut chart?

Screenshot 2025-01-16 165320
Screenshot 2025-01-16 165504

I thought this might work, but it does not.

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 400
  legend:
    show: false
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          name:
            show: true
          value:
            show: true
            formatter: |
              EVAL:function(value) {
                return value.toFixed(2) + " kWh";
              }         
          total:
            show: true
            label: Total
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(2) + " kWh"
                }
series:
  - entity: sensor.server_rack_energy_today
    name: Server Rack
    float_precision: 2
  - entity: sensor.jay_s_office_energy_today
    name: Jay's Office
    float_precision: 2
  - entity: sensor.linda_s_office_energy_today
    name: Linda's Office
    float_precision: 2
  - entity: sensor.dishwasher_energy_today
    name: Dishwasher
    float_precision: 2
4112

Exactly … this is expected of course as how else can the grid know what to do. There is another post of a few days ago that explains how you can ‘fix’ the grid but not sure if that is what you like

4113 
apex_config:
  dataLabels:
    style:
      fontSize: 22px

dataLabels – ApexCharts.js

EDIT: I missed the fact that you wanted the dataLables formatted, not the layout…other examples

apex_config:
  dataLabels:
    style:
      fontSize: 22px
    formatter: |
      EVAL: function (value, opt) {
        if (opt.w.config.series[opt.seriesIndex] >= 1000) {
          return opt.w.config.labels[opt.seriesIndex] + ": " + (opt.w.config.series[opt.seriesIndex] / 1000).toFixed(2) + " " + " kW" ;
        } else if (opt.w.config.series[opt.seriesIndex] < 1000) {
          return opt.w.config.labels[opt.seriesIndex] + ": " + opt.w.config.series[opt.seriesIndex].toFixed(0) + " " + " W" ;
        }
      }
4115

I think you’ve misunderstood. I want to format the value inside the donut to two decimals. For example, if I click on the Server Rack slice, I want to see 2.41 kWh inside the circle, not 2.40952533458485. Similar to how the Total value displays.

Screenshot 2025-01-17 104448
Screenshot 2025-01-17 104448932×909 38.3 KB

4116

I copy from your post : “values of a slice”
And now you are adding more conditions…
Most the stuff is here but I guess you already found that
pie – ApexCharts.js

You would have to use javascript alike

  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: LABELNAME
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0)
                }
4117

I copy from your post : “values of a slice”
And now you are adding more conditions…

Well, no, I’m not. You continue to misunderstand the question.
If you look at my yaml, you’ll see that I already have that in place for TOTAL and it works just fine. However, if I click on one slice of the donut, SERVER RACK for instance, it displays a lengthy number with 12 decimals. That is the value I want to configure to two decimals.

4118

On a few of my ApexCharts the graph will show a value of zero, when the values should be no where near zero. I assume this is due to invalid data. Looking at the sensor logs it seems that the zeros might correspond to when the log is showing a value of “unavailable”. Is this what is causing the charts to show a zero value?

What would be a solution?