ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
383

for the life of me, I cannot get the whole card to show, nor can I get it in the correct position and lose the background.

image
image1768×916 38.8 KB

I’ve got this in a picture elements card:

cards:
  - type: picture-elements    
    image: /local/ui/floorplan/background.png
    style: |
      ha-card {
        background: rgba(42, 46, 48, 1)
      }
    elements:
      - type: 'custom:apexcharts-card'
        apex_config:
          stroke:
            width: 6
            curve: smooth
        graph_span: 7d
        span:
          start: day
        header:
          show: true
          title: Likelyhood of Rain
        series:
          - entity: weather.dark_sky_home
            type: line
            fill_raw: last
            extend_to_end: false
            color: '54C0EF'
            data_generator: |
              return entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime).getTime(), entry.precipitation];
              });
        style: |
          :host {
            left: 50%;
            top:  55%;
            width: 95%;
            overflow: hidden;
            height: 55%;
            background: none !important;
            box-shadow: none !important;
          ha-card {
            height: 100%;
            background: none  !important;
            box-shadow: none !important;
            border-radius: 1vw;
            font-size: 1.2vw !important;
          }

      - type: 'custom:weather-card'
        current: true
        details: true
        entity: weather.dark_sky_home
        forecast: true
        name: Weather
        style: |
          :host {
            left: 50%;
            top:  30%;
            width: 95%;
            overflow: hidden;
            height: 63%;
            background: none !important;
            box-shadow: none !important;
          }
          .current {
            margin-bottom: 7vw;
          }
          .variations {
            margin-bottom: 4vw;
          }
          ha-card {
            height: 100%;
            background: none  !important;
            box-shadow: none !important;
            border-radius: 1vw;
            font-size: 1.2vw !important;
          }
          .forecast{
            padding: 0 2.5%;
            width: 95%;
          }
          .forecast .day:first-child{
            border-left: 0.1em solid #d9d9d9;
          }
          .forecast .day:last-child{
            border-right: 0.1em solid #d9d9d9;
          }
        tap_action:
          action: none
384

What about trying this:

apex_config:
  chart:
    height: 200px #or another value which works for you

For the background, you are missing a } at the end of the :host style block :slight_smile: and it might even fix the position! And you might not even need the above block either.

385

Great. Thank you. The only issue left to resolve is the missing data and defining the scale on the left.

image
image1799×385 12.7 KB

386

I guess the missing data is null in the state?
if yes, this will fill them with 0:

data_generator: |
  return entity.attributes.forecast.map((entry) => {
    return [new Date(entry.datetime).getTime(), entry.precipitation || 0];
  });

Scale:

apex_config:
  yaxis:
    - min: 0
      max: 20 # or anything else that works for you
      decimalsInFloat: 1
387

Perfect thank you

388

Sorry one more question, how do i remove the grid lines from the y axis? Just been looking over the documentation, but i can’t see it.

389 
apex_config:
  grid:
    show: false
390

FYI
Don’t have my finger on it yet, but v1.6.0 does seem to be noticeably sluggish vs. v1.5.0.

391

Unless you activate the experimental features, nothing changed in the options/data passed to the chart. So it’s probably just an impression :slightly_smiling_face:

392

Maybe a false alarm by me, I dups some charts on a new page and way trying with some of the ‘config_templates’ things. But of course now I can’t duplicate it, Will explore some more. It was kind of acting like the charts were constantly refreshing, not obeying ‘update_interval’.

393

for column chart the opacity doesn’t work neither way.
For line/area type, old way (set in apex config) doesn’t work in v1.6 (not sure it’s intentional). New way works.

394

I am not sure if this has been addressed through one of the features in the card.

I have got a sensor with the following attribute:

data: [0.082,0.077,0.072,0.085,0.076,0.074,0.082,0.074,0.073,0.081,0.075,0.072,0.057,0.011,0.201,0.004,0,0.153,0.012,0,0,0,0,0,0,0.07,0.2,0.23,0,0.001,0,0,0,0,0.044,0.001,0.962,0.549,0.194,0.167,0.146,0.115,0.117,0.13,0.163,0.122,0.09,0.073]

I would like to plot these values in a graph with the x-axis showing the time in 30 min intervals, which means that there are always 48 in the data attribute.

Hoping someone can guide me.

395

Anything which is available in the default card config is not working as part of the apex_config. It’s too complex to maintain both at the same time. But I provide feature parity.

That should work, I’ll have a look.

Yes, that is possible using data_generator, but I’ll need more info to help you:

  • Should the first data in the list (0.082) be displayed now and the last data be displayed 48*30min in the past
  • Or should the last data in the list (0.073) be displayed now and the first data be displayed 48*30min in the past?
  • Or is the first data considered as now and everything else is in the future?
1 Like
396

I take a closer look at this again… and it seems it work for colour fill, but not for column border. btw the same applies for other type of graphs, effectively turning area into line graph when opacity is near zero.
Is it possible to make opacity affecting border too?
image

397

No, that’s not possible unfortunately it’s a limitation of the ApexCharts library

398

Kunne du delt koden? :slight_smile:

399

Is it possible then to disable the border? on apex chart original pages, I can see examples without border (or maybe border is the same as the fill). But I found no options to style those… I’m just started to seek for,

400

link? :slight_smile:

401

Any example I think: https://apexcharts.com/javascript-chart-demos/mixed-charts/line-column/

IN docs: https://apexcharts.com/docs/colors/ I can see they use colors and fillColors. Stil trying to find out something about styling borders

402

Right, that’s because of:

        stroke:
          width: [0, 4]

Try with stroke_width: 0 for the column one. It should remove the border.

1 Like