How To Install a Javascript Card on Home Assistant
Apex Charts is a flexible graphing library that lets you make nice looking charts or graphs. The ApexCharts Card for Home Assistant (HA) lets you create these graphs / charts on a card within Home Assistant. This tutorial is to help beginners to HA add the card to Home Assistant Core. If you have the Home Assistant Community Store (HACS) working install it that way instead (link).
Home Assistant Core is typically installed on top of a Linux operating system. Add-ons and such need to be installed manually. Here’s how I installed Apex Charts on Home Assistant in April 2022.
This process work for any Javascript card on Home Assistant. Mini Graph Card is another similar tool that I find useful.
The following is typed into the Linux console. You should check Github to see if there’s a newer version available before you download v1.10.0
sudo su
cd /home/homeassistant/.homeassistant
mkdir www
cd www
wget https://github.com/RomRider/apexcharts-card/releases/download/v1.10.0/apexcharts-card.js
cd ..
chown -R homeassistant:homeassistant www
Next load the Home Assistant UI and enable advanced mode, which is required to add this card. Click on you user initial at the bottom left of the screen to go into your profile.
Next enable Advanced Mode if it’s not already enabled
Next click Configuration -> Dashboards -> Resources. Hit the + (plus) button, enter “/local/apexcharts-card.js” (without the speech marks), and click “JavaScript Module”.
It’s not necessary to restart Home Assistant, but here’s how you do it if you want to.
sudo systemctl restart home-assistant@homeassistantApexCharts is now installed. To use it go into a dashboard and choose edit from the top right. Choose “Add Card”. Scroll to the bottom of the available cards and find “Custom: ApexCharts Card”.
From there you can use the capabilities of ApexCharts in Home Assistant!