Replace history graph colors in lovelace

chart-colors.js

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

This seems to be exactly what I want, but how do I change the colors of the individual chart lines (they now all turn magenta, obviously) ?

getColorList returns a list of cnt colors that will be applied to the lines in that order.

Thank you for making this! I see I can change the line colors of the sensor's history graph, but the switch history graph is still red and green.

is it possible to replace the red-green stripes in history?

I installed this. All of the lines are magenta now for all of the entities in the same graph. How do I get it to make the lines different colors for multiple entities in the same graph?

getColorList returns a list of cnt colors that will be applied to the lines in that order.

getColorList returns a list of cnt colors that will be applied to the lines in that order.

I'm completely lost. Is there a way to see that list or to modify the list? Am I supposed to replace 'cnt' or insert a color under or various colors under 'cnt'?

You are supposed to change getColorList such that its return value is a list of colors at least cnt items long.
In the example, this is done by adding the same color to the end of the list cnt times. How you want to do it depends on what colors you'd like.

I'm still confused. I edited the following and I still just get magenta.

  // Write a new color list generator
  function getColorList(8) {
    let retval = ['#d53e4f','#f46d43','#fdae61','#fee08b','#e6f598','#abdda4','#66c2a5','#3288bd'];
    return retval;
  }

I get the same with rgb

  // Write a new color list generator
  function getColorList(8) {
    let retval = ['rgb(213,62,79)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,139)','rgb(230,245,152)','rgb(171,221,164)','rgb(102,194,165)','rgb(50,136,189)'];
    return retval;
  }

I also tried the following:

  // Write a new color list generator
  function getColorList(cnt) {
    let retval = [8];
    while(cnt--)
      retval.push(Color().rgb(255, 255, 102));
    return retval;
  }

I've also tried function getColorList(cnt=8)

In case anyone is still curious about this, you could generate colors like this:

function getColorList(cnt) {
    let retval = [
      Color().rgb(153,255,51), // green
      Color().rgb(255,153,51), // orange
      Color().rgb(51,153,255), // blue
    ];
    
    return retval.slice(0, cnt);
  }

This generates a maximum of 3 colors: green, orange and blue respectively.
If the cnt parameter is specified (I think HA sets it depending on how many colors it needs for the graph, it's not something you use yourself) then the function slices the top cnt part of retval and returns only that.

For instance, if HA asks for 2 colors, the above function will return only the "green" and "orange" values.
If you need more than 3 colors, you should add to the list (otherwise, I suspect colors 4,5,6 etc will be either all blue or replaced with default colors?)

You should end up with something like this:

Now if I could only figure out how to change the red/green colors of the "bar" history graph...

Now if I could only figure out how to change the red/green colors of the "bar" history graph...

Did you ever figure this out? Device class 'sound' is still red when 'clear' and green when 'detected'. :/

That should be reported as a frontend bug: https://github.com/home-assistant/frontend/issues

Looks like this doesn't work anymore in 2021.7?

Probably correct. There's been a lot of changes to the graphs.

The frontend has changed.

Looking at frontend/src/components/chart/ I can see that the state-history-chart-line.ts uses getColorByIndex(colorIndex):

const addDataSet = (
        nameY: string,
        step = false,
        fill = false,
        color?: string
      ) => {
        if (!color) {
          color = getColorByIndex(colorIndex);
          colorIndex++;
        }

Which is imported from frontend/src/common/color/colors.ts
Which is just a hex list of HIDEOUS COLORS (to me, no offence)

So we need to find a way to replace the color list in colors.ts or replace the whole getColorByIndex(index) function.

When I say we, I mean someone smarter than me.

@thomasloven :)

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.

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?

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

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

Thank you very much for your help!

As noted above, this doesn't work since 2021.7.0

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!

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.

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!

....
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.

@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)?