Changing the image dynamically

[jn3va]

I'm using a Apex radial chart to display some weather data. In the center of the chart I want to display an image indicating the current weather (e.g. sunny, cloudy etc.). I can successfully display the image using plotOptions (yaml below), but can't find a way to change this image when the conditions change using a variable? i.e. if the weather changes to sunny I want apex to stop showing rain.png and instead show /local/images/sunny.png

  apex_config:  

    plotOptions:  

      radialBar:  

        hollow:

          margin: 2

          image: /local/images/rain.png

          imageWidth: 140

          imageHeight: 140

I tried unsuccessfully embedding Apex in a custom-button card with the path stored in an input_text helper but could not get custom-button to read the helper's value. e.g. in the dashboard.yaml

    variables:

      weather_icon: "input_text.weather_icon_path"

In custom_card_apexcharts.yaml

          plotOptions:

            radialBar:

              hollow:

                margin: 2

                image: "[[[ return variables.weather_icon.value ]]]"

custom_card_apexcharts:
  variables:
    weather_icon:
      value: "[[[ return entity.value ]]]"

If I put the static path in the weather_icon variable ( i.e. weather_icon: "/local/images/rain.png" ) it works, but this won't allow me to change it via an automation.

Any ideas?

Also it seems that once Apex has rendered the image the first time, it does not redraw it and will only update the graph dynamically. Is there a setting to have it refresh/redraw the whole chart? If not it might be moot to try and pass the icon as a variable.

[jn3va]

I've solved this using the custom-button card and setting the triggers-update to all.

In the custom card template I use

        type: custom:apexcharts-card
        apex_config:
          plotOptions:
            radialBar:
              hollow:
                margin: 2
                image: "[[[ return states[variables.weather_icon_path].state ]]]"
                imageWidth: 140
                imageHeight: 140
                imageClipped: false

In the dashboard yaml

    variables:
      weather_icon_path: "input_text.weather_icon_path"

Once I added in the custom button
triggers_update: all
The input_text contains a path like:

/local/images/sunny/png

When I change the value of the input_text to have something new (e.g. /local/images/rain.png) the apex chart redraws with the new icon.

[RomRider]

You could have used also the config-template-card. There's no support for templates in apexcharts-card.