ApexCharts card - A highly customizable graph card

Strange that I cna’t get it to work. Do you do it like this?

   div#header__title {
     font-size: 15px;
     font-weight: 900;
   }

Hi All,

I love this add-on so much !!! Really nice and lots of options.
Schermafbeelding 2021-02-18 om 08.50.06

Is it possible to move this part to upper right corner?
Now my graph is mixed with the buttons. Its a cosmetic thing …:

Schermafbeelding 2021-02-18 om 08.51.59

apex_config:
  chart:
    height: 300px
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true

And is there a way to get candlesticks graph?

You can use offsetX and offsetY, for example

toolbar:
  show: true
  offsetX: 0
  offsetY: -25
1 Like

I become every minute more and more happier :smiley:

Not yet, but I was thinking about adding it, I just need to find time to work on it :slight_smile:

1 Like

It does. Make sure cache is cleared is all I can think of. Using just this changes a title on my side. First picture is at 200 second at 900

              style: |
                div#header__title {
                  font-size: 15px;
                  font-weight: 900;
                  font-family: Segoe Ui Light;
                }  

Home_Assistant_-_2021-02-18_07.34.48 Home_Assistant_-_2021-02-18_07.35.34

Ah, so yes, I can get that to work but I was trying to get the header states to change (temperature at the very top). I’ll do some digging in the code to find that div, just assumed it was the same since the font_size changed.

if you inspect the page (control - shift - i), it looks like this is what you need to add under style

#state__value > #state {

1 Like

I tried the #state__value before and now also your code but not getting anything to work, even downloaded a new browser to make sure the cache was empty :slight_smile:

Never mind, sorry for taking your time and hijacking this thread.

Two questions that I haven’t been able to find answers to.

Is it possible to not show any decimaals in the header?

Can there be a line along the x-axis as I have drawn (the white line) and still have it very minimal at the bottom where the date/time is shown as in my example below?

Can a line/area/column be hidden if the value is zero, so that the line doesn’t end up as the orange line below?

Will it be possible to use attribute of a entity as sensor without creating a sensor that extract from a rest sensor:

sensor.bitladon_ada
state: 0.74905 

attributes
ticker: ADA 
name: Cardano 
buyfinal: 0.78274 
change24h: -0.91 
friendly_name: Bitladon ADA 
templates: icon_color: 'if (state === ''on'') return ''rgba(251,214,67,1)''; return ''rgba(71,116,157,1)'';' icon_color: rgba(71,116,157,1)

Now I use sensor.bitladon_ada to get the sell price
But want add a second sensor part:

sensor.bitladon_ada.attributes. buyfinal

to show them both in graph.

If not possible, will it a idea to support this so you can add attributes directly in graph

It’s already available, read the documentation on github :slight_smile:

1 Like

Yes, with float_precision: 0 in each serie

You can probably do something with annotations

You could use transform to remove data with a value of 0 (return x === 0 ? null : x;)

1 Like

I have a problem with a column chart, i have today 3 times the same values, but only the first bar is displayed en the other 2 not.
This is my config:

type: 'custom:apexcharts-card'
graph_span: 1d
span:
  end: day
header:
  show: true
  title: Verbuik gas per uur m3
apex_config:
  chart:
    height: 250
  stroke:
    width: 4
series:
  - entity: sensor.hourly_gas_consumption
    float_precision: 3
    type: column
    group_by:
      duration: 1h

2021-02-19_16h17_22

how can i solve this?

With group_by, if there is no state change (in the history) during that period of time, it will report null as a value giving you that result.

Mini graph cart does show them so there are points

And if i remove group by its the same, there is only one value reported an hour so its not needed

I didn’t see that in your configuration initially, but group_by requires a func else it doesn’t do anything. If you want the same as mini-graph-card’s default, use func: avg.
If you want raw data, don’t use group_by.

1 Like

if i add func: avg then it it’s working.

another question, if i use

graph_span: 1d
span:
  end: day

Then my data is not right
2021-02-19_17h49_49
in this example there is 7 hours a value of 0 but it must be 8
2021-02-19_17h49_04
data is comming in every hour +39min, maybe here goes it wrong?

Hi All, How can I change the header font size in this “Highly Customizable Graph Card” ?