ApexCharts card - A highly customizable graph card

Haha, alright, I have been using that code for all my charts without knowing it was wrong :slight_smile: But when I change the code to your suggestion i get:

/// apexcharts-card version 1.8.2 /// value.yaxis is extraneous

Hello @RomRider
Is there a way to create a graph of a manually inserted data?

I’ll try to explain better.
I have a custom sensor where I daily store some data. I’m using attributes to store the date and the value, as you can see below:
apex

How can i create a line graph with those dates and values?

Thank you!

The error is pretty much explicit. You’re not running the latest version but an older cached one where this feature was not available.

You are completely right, I have the recently released beta with soft bounds but the error message says 1.8.2. Incognito mode in Edge shows it correct.

In cases like this, do I have to clear the browsers cache completely or can I do it so it only affects Home Assistant?

Yes, with data_generator but your attributes are not very friendly for that, if you could have them in a “sub-attribute” it would be easier.

Eg:

unit_of_measurment: xxx
friendly_name: xxx
my_values:
  22-05: 12345
  23-05: 12345

This way you could loop over the my_values object in javascript more easily

Thank you very much for your reply. Where should I use that code?

unit_of_measurment: xxx
friendly_name: xxx
my_values:
  22-05: 12345
  23-05: 12345

I saw your Data Generator instructions, but I don’t understand how i do create a sensor like the one in your example:

FirstPeak: High
PeakTimes:
  - '2021-01-27 03:43:00'
  - '2021-01-27 10:24:00'
  - '2021-01-27 16:02:00'
  - '2021-01-27 22:38:00'
  - '2021-01-28 04:21:00'
  - '2021-01-28 11:06:00'
  - '2021-01-28 16:40:00'
  - '2021-01-28 23:18:00'
  - '2021-01-29 05:00:00'
  - '2021-01-29 11:45:00'
  - '2021-01-29 17:19:00'
  - '2021-01-29 23:58:00'
  - '2021-01-30 05:39:00'
  - '2021-01-30 12:25:00'
  - '2021-01-30 17:59:00'
PeakHeights:
  - 4.99
  - 1.41
  - 4.96
  - 1.33
  - 5.22
  - 1.19
  - 5.15
  - 1.14
  - 5.42
  - 1.01
  - 5.3
  - 0.99
  - 5.57
  - 0.87
  - 5.39
unit_of_measurement: m
friendly_name: Tides

Is this a template sensor?

EDIT:

Ok @RomRider , so I tried to create a sensor like this one:

sensor:
  - platform: template
    sensors:
      test:
        friendly_name: Test
        unit_of_measurement: 'X'
        value_template: >
          FirstPeak: High
          PeakTimes:
            - '2021-05-22'
            - '2021-05-23'
          PeakHeights:
            - 0.00499446
            - 0.01417467

Now, I’m a bit confused about the usage of data_generator.
What is the function of “FirstPeak”?

I don’t have enough acknowledge to generate the value needed for this:

data_generator: | # This is what builds the data
      return entity.attributes.PeakTimes.map((peak, index) => {
        return [new Date(peak).getTime(), entity.attributes.PeakHeights[index]];
      });

@RomRider I tried to go deeper regarding this data_generator and i Found a previous message where someone did something like the one i need.

Now, my sensor.test has the following attributes:

value: |-
  - datetime: '2021-05-22T11:05:30+00:00' 
    test: 0.00499446
  - datetime: '2021-05-22T11:05:30+00:00'
    test: 0.01417467
unit_of_measurement: X
friendly_name: TEST

And my card code is:

type: 'custom:apexcharts-card'
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
graph_span: 1d
span:
  start: day
apex_config:
  dataLabels:
    enabled: true
series:
  - entity: sensor.test
    type: line
    data_generator: |
      return entity.attributes.value.map((entry) => {
        return [new Date(entry.datetime), entry.test];
      });

Nothing appears. Any clue?

Hi everyone,

do you also have the problem?
The rectangle in extremas is not centered
image

I realize Color Thresholds are an experimental feature but curious if anyone has run into this and found a fix? Something changed in the last release and now it appears the colors are being applied to small groupings rather than the overall chart?

type: 'custom:apexcharts-card'
apex_config:
  chart:
    height: 200px
graph_span: 7d
update_delay: 2000ms
span:
  start: day
  offset: '-3d'
experimental:
  color_threshold: true
  hidden_by_default: false
now:
  show: true
header:
  show: true
  title: Wind Forecast
  show_states: true
  colorize_states: true
series:
  - entity: weather.to_daynight
    name: NWS
    attribute: wind_speed
    extend_to_end: false
    curve: smooth
    stroke_width: 3
    show:
      extremas: true
    group_by:
      func: max
      duration: 15min
    color_threshold:
      - value: 5
        color: green
        opacity: 1
      - value: 12
        color: yellow
      - value: 15
        color: red
  - entity: weather.to_daynight
    type: area
    name: Forecasted
    data_generator: |
      return entity.attributes.forecast.map((entry) => {     
                return [new Date(entry.datetime), entry.wind_speed];
              });
    extend_to_end: false
    group_by:
      func: max
      duration: 30min
    stroke_width: 0
    opacity: 0.3
    color: grey

That’s because you have null values in the serie. Use fill_raw: last

That is a string, not an array (see |-), it’s the reason it doesn’t work. The data needs to be stored as a native array.

ah yes, I do see when I remove - entity: weather.to_daynight the issue clears up. I will need to research how to transform the string into a native array. I’m a newbie to templating.

How can I achieve this?

This would need to be done where you set those attributes in the sensor. Is that a custom component?

In my example above weather.to_daynight is from the NWS (National weather service) integration.

Thank you again @RomRider
No, that’s a sensor template:

sensor:
  - platform: template
    sensors:
      test:
        friendly_name: Test
        unit_of_measurement: 'X'
        value_template: '1'
        attribute_templates:
         data: >
            - date: '2021-05-22T05:30:00.000Z' 
              value: 0.00499446
            - date: '2021-05-23T05:30:00.000Z'
              value: 0.01417467

As I said, I daily add one value on this list. But I need to do it manually.

How can i turn this into an array?

Wow that sounds very inconvenient, not very automated for an automation system :open_mouth:

Remove > from data: > and it’s going to become a native array (if that’s supported by home-assistant, which I don’t know)

True, but currently I don’t have any system to import those value. I just started a project.

Unfortunatelly not =(

sensor

Hello! May I ask you which theme are u using?

The only way I can see this working if it needs to be a string is to define it as a string which can be parsed as JSON:

        attribute_templates:
         data: "[ ['2021-05-22T05:30:00.000Z', 0.00499446], ['2021-05-23T05:30:00.000Z', 0.01417467] ]"

This is now an array of array as a string :slight_smile:

And then convert it to a usable array in the data_generator:

    data_generator: |
      return JSON.parse(entity.attributes.value).map((entry) => {
        return [new Date(entry[0]).getTime(), parseFloat(entry[1])];
      });