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

Took a look at it.
Replacing getColorByIndex is not going to happen.
You can replace _generateData of state-history-chart-line with one that first runs the original, and then goes through this._chartData and replaces the colors one by one, though.

@backcountrymountains
Copy link

So, I'm not a programmer and I don't know how to compile .ts to make a .js that replaces _generateData.
Not really the place for this but:
Assuming I can figure out how to compile a card from source, would it make sense to just fork the charts from the HA frontend source, modify the 'colors.ts' file, and compile custom cards that I use instead of the stock chart cards? Is that a possible thing?

@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