Skip to content

Instantly share code, notes, and snippets.

@thomasloven
Last active May 29, 2023 03:09
Show Gist options
  • Save thomasloven/5ee36708908569c8e168419557cefd08 to your computer and use it in GitHub Desktop.
Save thomasloven/5ee36708908569c8e168419557cefd08 to your computer and use it in GitHub Desktop.
Replace history graph colors in lovelace
// Add this to your lovelace resources as
// url: /local/chart-colors.js
// type: module
customElements.whenDefined('ha-chart-base').then(() => {
// Find the HaChartBase class
const HaChartBase = customElements.get('ha-chart-base');
// Write a new color list generator
function getColorList(cnt) {
let retval = [];
// This one just makes a list of all magenta
while(cnt--)
retval.push(Color().rgb(255,0,255));
return retval;
}
// Replace the color list generator in the base class
HaChartBase.getColorList = getColorList;
// Force lovelace to redraw everything
const ev = new Event("ll-rebuild", {
bubbles: true,
cancelable: false,
composed: true,
});
var root = document.querySelector("home-assistant");
root = root && root.shadowRoot;
root = root && root.querySelector("home-assistant-main");
root = root && root.shadowRoot;
root = root && root.querySelector("app-drawer-layout partial-panel-resolver");
root = root && root.shadowRoot || root;
root = root && root.querySelector("ha-panel-lovelace");
root = root && root.shadowRoot;
root = root && root.querySelector("hui-root");
root = root && root.shadowRoot;
root = root && root.querySelector("ha-app-layout #view");
root = root && root.firstElementChild;
if (root) root.dispatchEvent(ev);
});
@backcountrymountains
Copy link

Yes! Posting for all the lost souls that see this in the future:

You just have to make or add to a theme. Make a theme.yaml file and use graph-color-1:, graph-color-2:, etc., to change the colors of the line graphs.
Like this:

#
My Theme:
  graph-color-1: "#c6dbef"
  graph-color-2: "#9ecae1"
  graph-color-3: "#6baed6"
  graph-color-4: "#4292c6"
  graph-color-5: "#2171b5"
  graph-color-6: "#08519c"
  graph-color-7: "#08306b"

For the horizontal history graphs you can use a theme to change:

state-on-color:
state-off-color:
state-home-color:
state-not_home-color:
state-unavailable-color:
state-unknown-color:
state-idle-color:

It's great!

@berkavil
Copy link

berkavil commented Nov 5, 2022

....
For the horizontal history graphs you can use a theme to change:

hi, thanks for a pretty fast answer, and thank you for this partial work-arround - I will definitely implement this...
is there plz also a way to make custom colors for other states than just for basic ones in the horizontal history graph?

(e.g.: instead of the state "off" there is also "offline", "down", "closed" etc., for some entities...)
I can't imagine mapping all those entities to some virtual helpers with "off" state, since there are hundreds oh these... the best would be imho, if there is just some user predefined 'color-states-array' used in the Theme.yaml in the same way as you wrote.
thx.

@AD-Wright
Copy link

@backcountrymountains - I found this additional documentation: https://www.home-assistant.io/integrations/frontend/#state-color It looks like those options are just for "binary" sensors, have you come across a way to set the color for other states (like those for a sensor, where there might be 3 or more states)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment