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);
});
@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