ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
20

Got it. Thanks.

21

I was using a line and a column - how can I change the width of the bars? I followed vdrainers post for the line width but the bars are too wide particularly on a mobile device…

22

You could try with:

        apex_config:
          plotOptions:
            bar:
              columnWidth: '70%' # 70% is the default value
3 Likes
23

Thanks. I did look in the apex docs but they are not that easy to navigate.

24

No they are not, but it still provides great insights. You’ll learn where to look while using it more :slight_smile:

1 Like
25

I got it working and even zooming works! That is what I always found lacking in Home Assistant lovelace graphs. The only thing I don’t know is how to zoom out. I think the ‘toolBar’ option (https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/) is not working yet?

26

toolbar works, it’s here:

apex_config:
  chart:
    toolbar:
      show: true
1 Like
27

Ok, really great, going to test now!

28 
          - type: custom:apexcharts-card
            graph_span: 24h
            header:
              show: true
              title: Media Management
            apex_config:
              stroke:
                width: 3
                curve: smooth
              chart:
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            series:

Doesn’t show any tools… did I miss something?

29

This works for me:

type: 'custom:apexcharts-card'
apex_config:
  chart:
    height: 450
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: false
    toolbar:
      show: true
      autoSelected: zoom
    xaxis.type: datetime
1 Like
30

Really nice card! I’m about to replace some of my mini-graph-card’s but because of a lot of datapoints, it’s a bit slow. Is there an equivalent of points_per_hour (mini-graph-card) on this card? Thanks!

31

Yes, you can use group_by in each series to reduce the nb of datapoints. It will aggregate the data the same way mini-graph-card does.
Check the doc on github, it explains how it works :slight_smile:

1 Like
32

Can you tell me what I did wrong with the chart zoom/pan options above?

33

You are missing the zoom part:

            apex_config:
              stroke:
                width: 3
                curve: smooth
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
1 Like
34

:tada::tada: New Release :tada::tada:

1.2.0 (2021-01-28)

Features

  • Define your own float precision for legend, tooltip and Y axis (7b0f30f)
  • cache: Invalidate cache on every new card version (#12) (b1799d9)
  • data_generator: Build your own data based on the last state and attributes of your entity (#14) (18284b5), closes #6
  • invert: Negates/Inverts the data for a serie (#13) (ab793c5)
  • span: Add end as an option to end the graph at the end of the day, minute, etc… (#11) (1d0aca8)
  • span: Display the graph from the start of the hour, day, month,… with an offset or not (#10) (bb6e88c)

Bug Fixes

  • xasis: Better handling of graph end time if everything is column and group_by is enabled (b5b85a6)
  • yaxis: apex_config.yaxis was not taken into account properly (ce04230)
  • Sometimes the graph was empty when changing tabs (9232044)
  • legend: undefined was displayed for a hidden serie (352c016)
  • Get rid of the initial load delay (69f151b)
  • colorize_states: Parameter was not applied (28bb2e2)
  • datalabels: Truncate floats to 1 digit after the decimal point (f5f744f)
3 Likes
35

Thanks again for the data_generator. I just played with it a bit, but am having a bit of trouble getting to the data I’d like to map. The data state attributes of my weather.openweathermap entity):

temperature: 5.8
humidity: 98
pressure: 1016
wind_bearing: 254
wind_speed: 1.62
attribution: Data provided by OpenWeatherMap
forecast:
  - datetime: '2021-01-28T11:00:00+00:00'
    precipitation: 21
    wind_speed: 7.75
    wind_bearing: 207
    condition: rainy
    temperature: 7.4
    templow: 3.6
  - datetime: '2021-01-29T11:00:00+00:00'
    precipitation: 28
    wind_speed: 6.53
    wind_bearing: 221
    condition: rainy
    temperature: 7.4
    templow: 4.7
  - datetime: '2021-01-30T11:00:00+00:00'
    precipitation: 28
    wind_speed: 3.18
    wind_bearing: 227
    condition: rainy
    temperature: 5.2
    templow: 2.6
  - datetime: '2021-01-31T11:00:00+00:00'
    precipitation: 3
    wind_speed: 1.5
    wind_bearing: 245
    condition: rainy
    temperature: 5.4
    templow: 2.4
  - datetime: '2021-02-01T11:00:00+00:00'
    precipitation: 29
    wind_speed: 6.2
    wind_bearing: 213
    condition: rainy
    temperature: 5.8
    templow: 3.7
  - datetime: '2021-02-02T11:00:00+00:00'
    precipitation: 4
    wind_speed: 3.71
    wind_bearing: 211
    condition: rainy
    temperature: 8.4
    templow: 5.3
  - datetime: '2021-02-03T11:00:00+00:00'
    precipitation: null
    wind_speed: 6.01
    wind_bearing: 231
    condition: cloudy
    temperature: 10.9
    templow: 6.4
  - datetime: '2021-02-04T11:00:00+00:00'
    precipitation: 7
    wind_speed: 1.74
    wind_bearing: 229
    condition: rainy
    temperature: 8.1
    templow: 4.2
friendly_name: OpenWeatherMap

My card config:

  - type: 'custom:apexcharts-card'
    graph_span: 8d
    span:
      start: hour
    series:
      - entity: weather.openweathermap
        data_generator: |
          return.entity.attributes.datetime.map((time, index) => {
            return [new Date(time), entity.attributes.precipitation[index]];
          });

This however, returns no data (showing loading on the graph). I suppose it has to do with the fact that datetime and precipitation are not attributes of the weather entity, but are contained in the forecast attribute. Haven’t found a way to get past this yet.

On another note: I tried to use a style attribute on the card (make it wider on my picture-elements card) but get an error value.style is extraneous. The config I tried:

  - type: 'custom:apexcharts-card'
    graph_span: 8d
    span:
      start: hour
    series:
      - entity: weather.openweathermap
        data_generator: |
          return.entity.attributes.datetime.map((time, index) => {
            return [new Date(time), entity.attributes.precipitation[index]];
          });
    style:
      left: 50%
      top: 65%
      width: 90%
36

Thy with this:

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

I’ll fix that, good catch :slight_smile: Would you mind opening an issue on github please?

37 
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.precipitation];
          });

This didn’t work, I’m afraid.

Going on Github now for the issue with style.

38

With this exact code:

      - type: custom:apexcharts-card
        graph_span: 8d
        span:
          start: hour
        apex_config:
          dataLabels:
            enabled: true
        header:
          show: true
          title: Precipitation Forecast
        series:
          - entity: weather.home
            type: column
            data_generator: |
              return entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime), entry.precipitation];
              });

I get the result you expect:
image

Edit: Also make sure you are running the last version (and that it is not cached by your browser). Check the console. If you don’t see 1.2.0, clear your cache

4 Likes
39

Ugh! I didn’t see that in the docs. Thanks.