ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
141

I’ve just build a mock chart to validate the theory:
data is [1, 2, null, 2, 1]. As you can see between 2 and null there’s no line (the red line is the one I added manually :D). HA would have drawn the red line there, ApexCharts doesn’t

image
image697×410 5.48 KB

142

yeah… hmm. The issue I have is they read the fuel price via an API and it randomly assigns sensor names when there is more than one in the same area so I can test for that v=crap with a template sensor to fix it all up. I can maybe use a different sensor name but filling in the null with a line would work too…

143

I had planned to add that feature anyway, so I’m gonna work on it next :slight_smile:
Right now you can only fill when using group_by which is not covering all the use cases (like the one you have)!

1 Like
145

Please check the latest beta (1.5.0-dev.1), you’ll want to add fill_raw: last to all the entries in the series. :wink:

1 Like
146

huh?

            series:
              - entity: sensor.syd17310
                  fill_raw: last
              - entity: sensor.syd18253
                  fill_raw: last
              - entity: sensor.syd18424
                  fill_raw: last
              - entity: sensor.syd2436
                  fill_raw: last
              - entity: sensor.syd643
                  fill_raw: last
              - entity: sensor.syd663
                  fill_raw: last

??

147

Like that:

            series:
              - entity: sensor.syd17310
                fill_raw: last
              - entity: sensor.syd18253
                fill_raw: last
              - entity: sensor.syd18424
                fill_raw: last
              - entity: sensor.syd2436
                fill_raw: last
              - entity: sensor.syd643
                fill_raw: last
              - entity: sensor.syd663
                fill_raw: last
1 Like
148

bingo!!
image

149

Great :tada:

1 Like
150

Hey folks, little ask :slight_smile:
Could you please review this PR: https://github.com/hacs/default/pull/790

And approve it if you can (it’s not about merging, but just approving), it will help get it by default into HACS :slight_smile: Thanks :pray:

1 Like
151

Is it possible to get this gauge with this card?

image

ref: https://github.com/apexcharts/apexcharts.js

3 Likes
152

Thanks for a great card. I am already using it to show energy price now and the next day. Showing data into the future has always been difficult with HA, but it was easy with this new card.

A question: Is it possible to use group_by together with radialbar, pie and donut?

153

Yes, check the code below the image, you’ll have the settings required to be put in apex_config to achieve this.

Yes, it works with group_by :slight_smile: It will group_by and just display the last state of the last group.

154

Thanks for your reply to me and also everyone else here asking for tips/help.

I have 0 experience in editing card config files. So i have some beginner questions.
Do i add this to the config or replace the code? And do i replace the whole code or just the part wich is under the picture?

If i replace, does that mean i mess up other diffrent charts?

Also, the apex_config is not in the www folder, is it placed somewhere else?

Edit: I think i found out, Apex_comfig in the card code right? /facepalm

155

You don’t need to edit anything in the code nor add folders on the disk. This is config to put in the card config (in the yaml) in the apex_config section

156

Yeah, i just figured it out haha :stuck_out_tongue:

But 1 more thing. i see alot of ppl here who post code have this “- type:” format with a few spaces in the beginning, But in my card yaml its always “type:” at the very beginning. That makes it hard to copy code, why is it diffrent? Are some users using older version of HA or something? Do you know any “coverter” from old yaml to new? It makes it a little hard to copy code as im not so good at coding yam, but i do understad the code, but the challenge is undertanding how many spaces to put infornt of every line. :stuck_out_tongue:

Sorry for my english and questions lol

157

Something lilke this (didn’t test):

type: custom:apexcharts-card
series:
  - entity: sensor.xyz
  - entity: sensor.xyz
apex_charts:
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: 0
      endAngle: 270
      hollow:
        margin: 5,
        size: '30%',
        background: 'transparent',
        image: undefined,
      dataLabels:
        name:
          show: false
        value:
          show: false
  legend:
    show: true
    floating: true
    fontSize: '16px'
    position: 'left'
    offsetX: 160
    offsetY: 15
    labels:
      useSeriesColors: true
    markers:
      size: 0
    itemMargin:
      vertical: 3
158

image
image1202×744 36.1 KB

That happened

159

Maybe you should then first learn yaml before doing any crazy stuff. It’s not new vs old yaml, it’s all yaml extracted from a specific context.
I’d suggest you read that and learn yaml: https://learnxinyminutes.com/docs/yaml/

160

I had a typo, updated the initial post:
see the first line: type: custom:apexchart-card

161

Yeah, im in the process of learning, but i learn best by doing and failing, while asking for pointers on the way.

Ill read up on what you posted, thanks. :smiley: