Apexchart 2.1.2 issue

Configuration Frontend
1

Hi all

i have a problem with a simple apex chart:

/// apexcharts-card version 2.1.2 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].data is extraneous value.series[0].entity is missing value.series[0].data is extraneous

/
type: custom:apexcharts-card
apex_config:
chart:
type: column
series:

  • name: Monthly Values
    data:
    • x: Januar
      ‘y’: ‘{{ states(’‘sensor.quintus_2024_01_value’‘) | float }}’
    • x: Februar
      ‘y’: ‘{{ states(’‘sensor.quintus_2024_02_value’‘) | float }}’
      /

Both entites exist. I tried 2.1.0 as well-same error.

I´m lost now. Can anybody help ?

best regards

Karl

2

First, please properly format your code, this is clearly described in the forum manual.
Second, where did you find a valid example for this config/setup for apexchart?

3

Thank you for your input!

Below is the formatted code. I’m new to Apexchart—please forgive any silly questions. Apexchart is so powerful with its many commands and diverse configuration options that it’s difficult to find a working code for my specific task:

The task is to group 12 monthly sensors for >4 years in one chart. Each monthly value is displayed in a bar/column:

[01_2022] [01_2023] [01_2024] [01_2025] [02_2022] [02_2023] [02_2024] [02_2025]
and so on.

Sounds simple, and I’ve found several working examples using the data generator, although not for 4*12 individual sensors.

I’m very grateful for any help!

My code shows error
/// apexcharts-card version 2.1.2 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].data is extraneous value.series[0].entity is missing value.series[0].data is extraneous

type: custom:apexcharts-card
apex_config:
  chart:
    type: column
series:
  - name: Monthly Values
    data:
      - x: Januar
        "y": "{{ states('sensor.quintus_2024_01_value') | float }}"
      - x: Februar
        "y": "{{ states('sensor.quintus_2024_02_value') | float }}"
4

I think you’ll have to learn Javascript.

from doc:

data_generator Option

Before we start, to learn javascript, google is your friend or ask for help on the forum :slightly_smiling_face:

data_generator is an advanced feature. It enables you to build your own data out of the last state of a sensor. It completely bypasses the history retrieval and caching mecanism.

You’ll need to write a javascript function which returns a [timestamp, value][]:

5

Another question is - why do you have separate sensors for each month of each year? If you had one sensor that changed every month it would be simple to graph.

6

But not the way you formatted them with data and x and y, or if so: please send the link if this is a working example (!)
Using category (ies) seems not really working in Apex, many questions/issues and no answers/solutions.
Adding to the raised question on why different sensors, it is probably better to define these as series and then tweak the outcome, depends on the timestamp of each of those sensors…you could use datagenerator to output the correct month for x and the value for y but not (!) like above

7

The data came from an outside database: I have no historical data in the long term statistic and so far i know, i can not feed home assistant´s long term statistic afterwards. (except a spooky function but this is a different task)

This code works for example, but its still far away what i need :

type: custom:apexcharts-card
header:
  title: Monthly 
  show: true
span:
  start: year
graph_span: 12month
series:
  - entity: sun.sun
    type: column
    data_generator: |
    return [
        { x: new Date().setMonth(((new Date()).getMonth()-4 )), y: 100},
        { x: new Date().setMonth(((new Date()).getMonth()-3)), y: 50},
        { x: new Date().setMonth(((new Date()).getMonth()-2 )), y: 120},
        { x: new Date().setMonth(((new Date()).getMonth()-1)), y: 70},
      ];

Is there any way to generate / show it like in a categorical column chart ? For example like this ?

type: custom:apexcharts-card
header:
  title: Monthly
  show: true
graph_span: 1y
span:
  start: year
series:
  - entity: sun.sun
    type: column
    data_generator: |
      return [
        { x: "Jan", y: 100},
        { x: "Feb", y: 50},
        { x: "Mar", y: 100},
        { x: "Apr", y: 50},
        { x: "May", y: 100},
        { x: "Jun", y: 50},
        { x: "Jul", y: 100},
        { x: "Aug", y: 50},
        { x: "Sep", y: 100},
        { x: "Oct", y: 50},
        { x: "Nov", y: 100},
        { x: "Dec", y: 50}
      ];
8

Check the really large post on the same card, I cannot see it working anywhere, the ones that come ‘close’ you can find by searching for ‘categories’. I myself spent quite a bit of time on it in the past too, never with a good result but that is just me.
Instead of Jan/Feb/… you could try to use a datetime and just format the xaxis to show months, example can be found in the doc (apexcharts.com) and/or in the same large post.

9

Thanks, I understand.

That’s really strange: Such a powerful tool and only a time-based x-axis ? !

I’ve invested enough time into this. I’ll now try integrating external data into LTS with Spook.

Thanks again for your patience!

10

create a template sensor with attributes for the values of each month. Then use as y value for x label…

sensor:

template:
  - sensor:
      - unique_id: 'test_apex'
        name: 'Test Apex Sensor'
        state: 'apex'
        icon: 'mdi:calendar'
        attributes:
          2024_val: >-
            {{ [
              '20', '55', '12', '16', '24', '2', '80', '30', '25', '65', '40', '75'
            ] | tojson }}
          2023_val: >-
            {{ [
              '30', '45', '22', '26', '34', '12', '90', '40', '35', '75', '50', '85'
            ] | tojson }}

card:

type: custom:apexcharts-card
header:
  title: Monthly
  show: true
span:
  start: month
  offset: "-16month"
graph_span: 12months
series:
  - entity: sensor.test_apex_sensor
    type: column
    data_generator: |
      const results = [];
      for (let i = 0; i < 12; i++) {
        const date = new Date(2024, i, 1);  // Jan–Dec 2024
        const value = Number(entity.attributes['2024_val']?.[i] ?? null);
        if (!isNaN(value)) {
          results.push({ x: date.getTime(), y: value });
        }
      }
      return results;
  - entity: sensor.test_apex_sensor
    type: column
    data_generator: |
      const results = [];
      for (let i = 0; i < 12; i++) {
        const date = new Date(2024, i, 1);  // Jan–Dec 2024
        const value = Number(entity.attributes['2023_val']?.[i] ?? null);
        if (!isNaN(value)) {
          results.push({ x: date.getTime(), y: value });
        }
      }
      return results;

CleanShot 2025-05-02 at 10.29.27
CleanShot 2025-05-02 at 10.29.27999×952 99.7 KB

11

Great ! I take that. Just what i want !