ApexCharts card - A highly customizable graph card

Still the same issue

type: custom:apexcharts-card
chart_type: radialBar
series:
  - entity: sensor.humidity
  - entity: sensor.temperature
apex_config:
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: 0
      endAngle: 270
      hollow:
        margin: 5,
        size: '30%'
        background: 'transparent'
      dataLabels:
        name:
          show: false
        value:
          show: false
  legend:
    show: true
    floating: true
    fontSize: '16px'
    position: 'left'
    offsetX: 0 # change this to move the legend left of right
    offsetY: 15 # change this to move the legend up or down
    labels:
      useSeriesColors: true
    markers:
      size: 0
    itemMargin:
      vertical: 3

Also this type of chart only works well with percentages, the idea is not to display a temperature or anything else.

Then i get this: value.chart_type is extraneous

You are not using the last version then.

Using 1.4.0

I can tell you you’re not :slight_smile: Clear your browser cache.

It does work if you can get thru the version problem solved and make your your indenting is correct, YAML is not very forgiving. Good hunting!

2 Likes

Cleared browser cache, reinstalled card and choose 1.4.0, cleared again, did the same thing with 1.5.0 dev, didnt help either.

But dproffer kinda comfirmed it working so the problem is at my end. Ill keep checking. Thank you so much. :smiley:

“The biggest /facepalm”

I installed this card manually yesterday, and trough hacs today. I forgot to remove the manual resource from lovelace settings :stuck_out_tongue: So i actually had 2 version installed. :stuck_out_tongue:

Keep up the good work. :smiley:

post your yaml code, put it inbetween two lines with three back ticks on each line, this will format it properly. For example here is yaml that created above:

- type: custom:apexcharts-card
  chart_type: radialBar
  series:
    - entity: sensor.freezer_govee_humidity
    - entity: sensor.freezer_govee_temperature
  apex_config:
    plotOptions:
      radialBar:
        offsetY: 0
        startAngle: 0
        endAngle: 270
        hollow:
          margin: 15,
          size: '30%'
          background: 'transparent'
        dataLabels:
          name:
            show: false
          value:
            show: false
    legend:
      show: true
      floating: true
      fontSize: '16px'

      position: 'left'
      offsetX: 0 # change this to move the legend left of right
      offsetY: -20 # change this to move the legend up or down
      labels:
        useSeriesColors: true
      markers:
        size: 0
      itemMargin:
        vertical: 3
    

1 Like

Thanks alot. :slight_smile:

Glad to hear you got it work. Lots of useful visualization possibilities with this card and Home Assistant!

Yeah, when i figure out how to import the codes from https://apexcharts.com/javascript-chart-demos/radialbar-charts/multiple-radialbars/ to HA card :smiley: Some makes sense some dont, i guess im learning alot now. :smiley:

How can I add the state of a switch entity as a bar thats either 1 or 0 ? I would like to overlay the status of a heater switch with the current temperature in the room. I can easily plot the temp, and was hoping that the switch state would plot the same just enumerating to 0 or 1… but is doesnt and just shows as ‘n/a’. Is there a specific approach I need to take ?

Non numerical sensors are not supported at the moment.
In the meantime, you could create a sensor template (1 = on, 0 = off) based on your switch state.

ok - thanks - I’ll need to work out how to do that…

Is the forceNiceScale implemented and I just don’t know how to use it properly or isn’t it an option?

The y-axis numbering/scale is a bit irregular :slight_smile:

Everything which is available in ApexCharts is available in the card through the apex_config object.
So for that to happen add this to your card config:

apex_config:
  yaxis:
    forceNiceScale: true

Also it’s not irregular, it’s just truncated, if you increase the y_axis_precision: 2 you’ll see more decimals

1 Like

Thanks for the fast reply! That code didn’t give any effect but it was due to me having “tickAmount” in the code. Looks beautiful now!

One more question: Is there a way to solve when there are missing values? For some reason my data is not complete (I guess ebcause of restarts or bad connection). In this graph there are missing data, can it be smoothened out or extrapolated in any way to atleast make it look less broken?