ApexCharts doesn't show today

[besohome]

Hi there,
I have a graph showing the consumption of a dishwasher.
To understand which days consumption is at 0, I had to insert a “marker point” (any other ideas are welcome).
What I can’t do, however, is show today’s date (in this case, January 4th).
Any ideas?

type: vertical-stack
title: Lavastoviglie
cards:
  - type: entities
    entities:
      - entity: switch.tz3000_2putqrmw_ts011f
        name: Accensione
    show_header_toggle: false
    state_color: false
  - type: custom:apexcharts-card
    header:
      show: true
      title: Consumo giornaliero
      show_states: false
    graph_span: 7d
    span:
      end: day
    series:
      - entity: sensor.consumo_lavastoviglie_giornaliero
        name: kWh/giorno
        type: column
        group_by:
          func: max
          duration: 1d
          fill: zero
      - entity: sensor.consumo_lavastoviglie_giornaliero
        type: line
        color: transparent
        stroke_width: 0
        group_by:
          func: max
          duration: 1d
          fill: zero
        show:
          in_legend: false
          legend_value: false
    yaxis:
      - decimals: 2
        min: 0
    apex_config:
      chart:
        stacked: false
      xaxis:
        tickAmount: 7
        labels:
          format: dd MMM
      markers:
        size:
          - 0
          - 4
        colors:
          - "#ffa600"
        offsetX: 6
        strokeColors: "#ffa600"
        strokeWidth: 2
      plotOptions:
        bar:
          borderRadius: 5
          columnWidth: 35%
      dataLabels:
        enabled: false

Thanks

[Biscuit (Geoff)]

ApexCharts doesn’t show the x-axis label for today.

The rendering engine that actually draws the graph will work out what bits fall inside the plot window, and what does not.

Your label for today is “04 Gen”, and most likely a small bit of the “n” falls outside of the plot area. Hence the render engine decides not to plot that particular label.

There are several solutions to this. Try setting the format to ‘ddMMM’ without the space, or ‘dd-MM’ for just numbers. This will show you what will fit, and how much you need to ‘trim’ off the label for it to show up.

If you make the plot window just a tiny bit wider (i.e. make the graph smaller) or shift the plot window slightly to the right (the graph to the left) then that label will probably appear. The plotting window (what the graph shows) is governed by

• graph_span (the time-width of the data window)
• span: end/start (the anchor point of the window)
• span: offset (a shift of the window against the anchor point)

If you shift the graph plot window slightly to the right by using

span:
  offset: "+3h"

your label might appear. Naturally you might loose the label on the left, so this is often a case of experimenting. Switching to hours can help make fine adjustments, with a window (span) of 176h being 7 days plus 8 hours, and then an offset of +4h to give an extra 4 hours on both the left and the right.

This is not always going to work as you expect. Making the graph window bigger in span decreases the size of the picture (more has to go in) and the rendering will then adjust the label formatting, often removing labels as there is just not enough room without overlapping. In the end you may just have to put up with what you get.

A quick test using your settings against my own sensor showed that using offset +1h did indeed bring in the right hand label, but lost the left hand label. Changing the span to 169h as well then made everything work.

[besohome]

Wow! Thank you so much, you were fantastic! Finally, after dozens of tests and failed attempts, you found the perfect solution.
Now my graph is just how I wanted it.

So the solution is:

    graph_span: 169h
    span:
      offset: +1h
      end: day