ApexCharts card - A highly customizable graph card

You can use apexcharts-card with statistics also. For that you simply specify the statistics option per series.

e.g.

type: custom:apexcharts-card
header:
  show: true
  title: Statistics Test Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.sony_kd_75xf9005_naim_audio_av_energy_power_0
    stroke_width: 2
    statistics:
      type: max
      period: 5minute
      align: middle
    curve: stepline
  - entity: sensor.sony_kd_75xf9005_naim_audio_av_energy_power_0
    curve: stepline
    stroke_width: 2

In that example one line is the data from the “normal” database and one line is plotted from the statistics data.

I am working on a way to have the chart select which to use. The code itself is simple, but I have not yet found out how to “disable” statistics because it does not accept [] or null.

Anyway, no need to switch cards, you just need to specify the use of statistics (I recommend to plot both lines like I did and then play with the values for type, period and align to see which gives the most accurate representation.

I think the problem with your monthly value is that the monthly value is written to the database with a given date. So for HA this value is one single value in time.
But if you plot that value and e.g. plot 3 months, you should see 3 bars, each one month wide.
Problem, however, could be the date that value is stored.
So if your system writes the monthly value every month on the 9th, then you are golden. If it writes that value every month on e.g. the 15th, then your chart will need to be plotted 15 to 15, other wise you will have a value change/step/bar in between.

Are you plotting a chart_type: line or bar or what? I would think that a line/area with curve: stepline and might look more like what you are looking for.

I hope you understand what I mean.

curve: stepline
type: area       #or line
chart_type: line

Careful, those are not the same indentation when you use them. I am just listing them.