Apex-charts experts help! Show planned EV charging hours as columns in chart

Configuration Frontend
1

I have an entity (sensor.ai_ev_charging_plan) with an attribute containing a list of planned EV charging hours ahead:

charging_hours: 
- startsAt: '2025-06-22T09:00:00.000+02:00'
  total: 0.5138
  energy_kwh: 3.11
  total_cost: 1.597918
- startsAt: '2025-06-22T10:00:00.000+02:00'
  total: 0.5068
  energy_kwh: 3.11
  total_cost: 1.5762
- startsAt: '2025-06-22T12:00:00.000+02:00'
  total: 0.5552
  energy_kwh: 1.25
  total_cost: 0.694

If I make a series like this in apex-charts card:

      - entity: sensor.ai_ev_charging_plan
        yaxis_id: Bool2
        name: ChargeAI
        unit: " "
        curve: stepline
        type: area
        color: pink
        stroke_width: 1
        float_precision: 3
        opacity: 0.5
        show:
          legend_value: false
          extremas: false
          in_header: false
        extend_to: false
        data_generator: |
          var a = entity.attributes.charging_hours.map((entry) => {
            return ([new Date(entry.startsAt), entry.total]);
          }); return a;

It will show like this (pink columns):

image
image862×724 54.8 KB

I.e. if there is a gap the area will simply continue till the next data-point in the list, and the final hour will not show as an area.

For the experts out there, is there a way I can show a column/‘area’ (or whatever) of the 3 selected hours only in an apex-chart?

2

Maybe with type column?
Shift with +30 minutes to have the bar start at begin of hour (in stead of centered on hour). Stroke width 0 gives good result for a separate bar, but experiment with it if you want them to connect to eachother.

time_delta: +30min
type: column
stroke_width: 0

1 Like
3

Thanks!

This:

      - entity: sensor.ai_ev_charging_plan
        yaxis_id: Bool2
        name: ChargeAI
        unit: " "
        time_delta: +30min
        type: column
        stroke_width: 0
        color: pink
        float_precision: 3
        opacity: 0.8
        show:
          legend_value: false
          extremas: false
          in_header: false
        data_generator: |
          var a = entity.attributes.charging_hours.map((entry) => {
            return ([new Date(entry.startsAt), entry.total]);
          }); return a;

Gives this result:

image
image1026×854 72.5 KB

So yeah looks like stroke_width >0 is needed in mye case (ideally total width/48, since there are 2 days showing).

1 Like