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

Hi Thomas!
I have added the file chart-colors.js in my HA resources: /local/chart-colors.js
I have created the file chart-colors.js and put it inside "/config/www/"where HA gets the files in "local".
I have restarted HA but I still don't see the colour of these charts changing

image

Is there any way to be able to change that graph line to another colour?

Thank you very much for your help!

@thomasloven
Copy link
Author

As noted above, this doesn't work since 2021.7.0

@laccio85
Copy link

Thank you Thomas for your quick reply.
Would you happen to know how to change the colour of that graph line directly by entering a string in the HA theme?
Thanks again for your help!

@berkavil
Copy link

berkavil commented Nov 4, 2022

Hallo, is this issue solved/closed somehow? Did someone find any clue?
Still need to find some way to custiomize horizontal history bar graph colors.
Thank you.
W.

@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