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