A History Graph-Like Horizontal Bar Status Graph (configurable for multiple rows)

[CharlesCage]

Hey everyone! Long time listener, first time caller. I REALLY appreciate all the work on this custom card, and I get LOTS of helpful information from the show & tell and similar conversations. I bring in Google Pollen API information for my partner who is very sensitive to pollen, and I wanted to create something similar to the history graph to show one row for each pollen type and a sideways bar graph showing different colors for each value--you know, so it'd be easy for her to see what's in the air and also to scroll back and see how it changed over previous weeks.

Here's what it looks like:

Problem: Like others, I tried various solutions of horizontal stacked bar graphs, but ran into problems with repeating values (pollen can be 4 then 5 then 4 again) and the inability to pro grammatically generate entities, etc. I tried using a standard line graph, but I constantly had problems with lines overlapping each other, like a 4 that becomes a 5 and then a 4 again showing up as just 4.

My crazy solution:

• Use a scatter plot with dots turned off and lines turned on.
• Use one yaxis for each row and one entity for each VALUE that can show up in the graph
• Process the data so that each possible value gets set to the name I want to show up on the left, has data points at the start and stop of each section of data, has all the missing sections filled in, and doesn't have the stupid gaps that show up because of the necessary nulls to separate the sections.
• Set the width of the line to really big so it looks like a bar
• For multiple bars, create each one as a subplot and then push them together so they look like one graph

Yeah, it's cheesy, but it works? 😆

I noticed that others were trying to do similar things, so I tried my best to modularize and document my code so others can use it without too much trouble. BUT, understand that it's a hacky solution... that's also hacked together. So if you find problems I apologize in advance. Here's a two bar example:

type: custom:plotly-graph
hours_to_show: 240
refresh_interval: 10
grid_options:
  columns: full
  rows: auto
fn: |-
  $ex { 
    /**
     * The history graph-like sideways status bar graph.
     *
     * How to use:
     *    1. Fill out the configuration section, specifically the rowConfigurations and rowValueColor sections.
     *       There are specific instructions for each one. (You can come back and tweak the appearance stuff
     *       at the top of the configuration section once you get things working.)
     *
     *    2. Scroll down to the entities section and follow the instructions there to build the necessary entities.
     *
     *    3. Scroll down to the yaxis section and follow the instructions there to build the necessary yaxis entries.
     *
     *    4. Troubleshoot if necessary. The most common problems are likely:
     *
     *        - You do not have the right number or combination of row and row data entities in the yaml.
     *        - You do not have the right number of yaxis entries or you accidentally misnumbered them.
     *        - Your rowConfigurations are set incorrectly (a sensor is misspelled or the data from it
     *          is not what you think it is).
     *        - You used hex colors.
     *        - You bumped a key and the world has fallen apart. (Hey, happened to me a lot.)
     *
     *    5. Tweak the top of the configuration section to get the look you want.
     *
     *    6. ...
     *    
     *    7. Profit!
     *
     *    Tip: If you're working in the yaml editor in hass, copy and paste your work regularly into a text editor
     *    to make sure you don't lose all your work if things crash. 
     *
     */

    /**
     * ---=== Configuration section ===---
     *
     */
      vars.rowHeight = 30; // Height of each row in px
      vars.topMargin = 30; // Overall graph top margin in px (null for auto)
      vars.bottomMargin = 60; // Overall graph bottom margin in px (null for auto)
      vars.leftMargin = 90; // Overall graph left margin in px (null for auto)
      vars.rightMargin = 20;// Overall graph right margin in px (null for auto)
      vars.rowFillPercentage = 1; // How much of each row's vertical height the row will use
      vars.barWidth = vars.rowHeight * .6; // The width (vertically) of each bar in % of row height
      vars.xAxisLineWidth = 4; // Width of x axis line in px
      vars.yAxisLineWidth = 4; // Width of y axis line in px
      vars.yGrid = true; // true = show y grid, false, no y grid

      // This should contain one item (starting with 1) for each row of the graph.
      // Sensor is where the data will come from and displayName is what will show on the
      // left of the row.
      vars.rowConfiigurations = {
        1: {
          'sensor': 'sensor.google_pollen_plant_juniper',
          'displayName': 'Juniper',
        },
        2: {
          'sensor': 'sensor.google_pollen_plant_ash',
          'displayName': 'Ash',
        },
      }

    /**
     * Returns a color string (rgba) based on a categorical value.
     *
     * This function maps integer categorical values to specific rgb or rgba color strings.
     * You can easily change this to whatever set of values that will appear in your graph.
     * NOTE: Hex values (12ab34 or #12ab34) will NOT work here.
     *
     * @param {number} cv - The categorical value to determine the color.
     * @returns {string|undefined} An rgba color string, or undefined if the categorical value is not matched.
     */
      vars.rowValueColor = function(cv) {
        switch (cv) {
          case 1:
            return 'rgba(29, 62, 145, .6)';
          case 2:
            return 'rgba(61, 130, 255, .6)';
          case 3:
            return 'rgba(204, 50, 255, .6)';
          case 4:
            return 'rgba(248, 149, 64, .6)';
          case 5:
            return 'rgba(255, 0, 0, .6)';
        }
      };

    /**
     * ---=== End Configuration ===---
     *
     */

      // Initialize vars
      vars.row = 0; // Row counter
      vars.yVisibility = {}; // Holds visibility of each value in each row

  /**
   * Fills interval gaps in a time-series dataset with hourly intervals.
   *
   * This function takes a dataset of time-value pairs and fills any gaps between
   * consecutive entries with hourly intervals. The value used to fill the gap
   * is either the previous value, or the `displayName` from the row configuration
   * if the previous value was the `displayName` and the current value is null.
   *
   * @param {Array<Array<number|string>>} dataset - The time-series dataset to process.
   * Each entry is an array where the first element is a timestamp (milliseconds)
   * and the second element is a value (number or string).
   * @param {Object} rowConfiigurations - An object containing configurations for each row.
   * @param {number} row - The index of the current row being processed.
   * @returns {Array<Array<number|string>>} The processed dataset with filled intervals.
   *
   */
    vars.fillIntervalGaps = function (dataset, rowConfiigurations, row) {
      const displayName = rowConfiigurations[row].displayName;
      const sixtyMinutes = 60 * 60 * 1000;
      const xy = [];
    
      for (let i = 0; i < dataset.length; i++) {
        const currentEntry = dataset[i];
        const currentDate = new Date(currentEntry[0]);
    
        xy.push([currentEntry[0], currentEntry[1]]); // Add the current entry
    
        if (i < dataset.length - 1) {
          const nextEntry = dataset[i + 1];
          const nextDate = new Date(nextEntry[0]);
    
          let step = new Date(currentDate.getTime() + sixtyMinutes);
    
          while (step.getTime() < nextDate.getTime()) {
            if (currentEntry[1] === null && i > 0 && dataset[i - 1][1] === displayName) {
              xy.push([step, displayName]);
            } else {
              xy.push([step, currentEntry[1]]);
            }
            step = new Date(step.getTime() + sixtyMinutes);
          }
        }
      }
      return xy;
    }
      
    /**
     * Removes specific gaps between data points in a time-series dataset.
     *
     * This function examines a time-series dataset (`xy`) for patterns of consecutive null values
     * surrounded by a specific `displayName`. It modifies the dataset in-place to remove
     * these gaps, aiming to smooth out transitions in the data.
     *
     * The function specifically looks for two patterns:
     * 1.  `displayName, null, null, null` - It replaces the first two nulls with `displayName`.
     * 2.  `null, null, null, displayName` - It replaces the first two nulls with null, and the last two with `displayName`.
     *
     * @param {Array<Array<number|string>>} xy - The time-series dataset to process. Each entry
     * is an array where the first element is a timestamp (milliseconds) and the
     * second element is a value (number or string).
     * @param {Object} rowConfiigurations - An object containing configurations for each row.
     * @param {number} row - The index of the current row being processed.
     */
      vars.removeGaps = function (xy, rowConfiigurations, row) {
        const displayName = rowConfiigurations[row].displayName;
        const windowSize = 4;
      
        for (let index = 0; index <= xy.length - windowSize; index++) {
          const window = xy.slice(index, index + windowSize);
          const [w0, w1, w2, w3] = window.map(item => item[1]);
      
          if (w0 === displayName && w1 === null && w2 === null && w3 === null) {
            xy[index][1] = displayName;
            xy[index + 1][1] = displayName;
            xy[index + 2][1] = null;
            xy[index + 3][1] = null;
            index += windowSize - 1; // Adjust index to skip processed elements
          } else if (w0 === null && w1 === null && w2 === null && w3 === displayName) {
            xy[index][1] = null;
            xy[index + 1][1] = null;
            xy[index + 2][1] = displayName;
            xy[index + 3][1] = displayName;
            index += windowSize - 1; // Adjust index to skip processed elements
          }
        }
      }

    /**
     * Extends a time-series dataset to the current time, filling missing future data points.
     *
     * This function ensures that a time-series dataset (`xy`) extends up to the present moment.
     * If the last timestamp in the dataset (`xs`) is earlier than the current time, it appends
     * hourly data points to the dataset, using the last known value (`displayName` or null).
     * This is useful for preventing empty graphs when real-time data is not yet available.
     *
     * @param {Array<number>} xs - An array of timestamps (milliseconds).
     * @param {Array<Array<number|string>>} dataset - The original time-series dataset.
     * Each entry is an array where the first element is a timestamp (milliseconds)
     * and the second element is a value (number or string).
     * @param {Object} rowConfiigurations - An object containing configurations for each row.
     * @param {number} row - The index of the current row being processed.
     * @param {Array<Array<number|string>>} xy - The dataset to extend, which will be modified in-place.
     */
      vars.fillToPresent = function (xs, dataset, rowConfiigurations, row, xy) {
        const lastX = xs[xs.length - 1];
        const lastDataset = dataset[dataset.length - 1];
        const displayName = rowConfiigurations[row].displayName;
        const now = Date.now();
        const sixtyMinutes = 60 * 60 * 1000; // 60 minutes in milliseconds
      
        if (lastX < now) {
          let step = new Date(lastDataset[0]);
      
          while (step.getTime() <= now) {
            xy.push([lastX, lastDataset === null ? null : displayName]);
            step = new Date(step.getTime() + sixtyMinutes);
          }
        }
      }

    /**
     * Processes raw data to create a formatted dataset for charting.
     *
     * This function takes raw x and y value arrays, filters the y values based on a given
     * `rowValueIndex`, and then prepares the data for charting by filling interval gaps
     * and removing unwanted gaps.
     *
     * @param {Array<number>} xs - An array of x-axis values (timestamps).
     * @param {Array<number|string>} ys - An array of y-axis values.
     * @param {number} row - The index of the current row being processed.
     * @param {Object} rowConfiigurations - An object containing configurations for each row,
     * including the `displayName` for the current row.
     * @param {number} rowValueIndex - The index value used to filter the `ys` array.
     * Values in `ys` that do not match this index are set to null.
     *
     * @returns {Object} An object containing the processed x and y arrays, ready for charting.
     */    
      vars.buildData = function (xs, ys, row, rowConfiigurations, rowValueIndex) {

        // Set everything not equal to our rowValueIndex to null
        ys = ys.map((y) => (y !== rowValueIndex) ? null : rowConfiigurations[row]['displayName']);

        // Zip up an array of [xs,ys]
        dataset = xs.map(
            function (x, i) {
                return [x, ys[i]];
            }
        );

        xy = vars.fillIntervalGaps(dataset, rowConfiigurations, row);
        vars.removeGaps(xy, rowConfiigurations, row);
        vars.fillToPresent(xs, dataset, rowConfiigurations, row, xy);

        return {
          xs: xy.map(item => item[0]),
          ys: xy.map(item => item[1])
        }
      }
      
    /**
     * Calculates the layout domain (range of Y-axis values) for a given item.
     *
     * @param {number} layoutY - The layout position of the item (1 for the first, row for the last).
     * @param {number} row - The total number of items in the layout.
     * @param {number} yIncrement - The increment value for calculating the domain.
     * @param {number} rowFillPercentage - The size of each row in the layout.
     * @returns {number[]} An array containing the start and end values of the Y-axis domain [start, end].
     *
     * @example
     * const firstDomain = calculateYDomain(1, 5, 0.2, 0.8); // Returns [0.36, 1]
     */
      vars.calculateYDomain = function ( layouty, row, yincrement ) {
        if (layouty == 1) { 
          // First item
          return [
            1 - yincrement * vars.rowFillPercentage, 
            1
          ];    
        } else if (layouty == row) {
          // Last item
          return [
            0, 
            yincrement * vars.rowFillPercentage
          ];    
        } else {
          // Middle item
          return [
            1 - (layouty * yincrement), 
            1 - ((layouty - 1) * (yincrement * vars.rowFillPercentage))
          ];
        }
      }

    /**
     * ---=== Entities section ===---
     *
     * Ok, this part is a pain in the ass. Because it is not possible to
     * programmatically generate some yaml components (*cough cough* ENTITIES),
     * you have to manually assemble the entities yaml.
     *
     * However, I've tried to make it as simple as possible. All you have to do is:
     *
     *  1. Start below the entities: yaml.
     *
     *  2. Build one set of entities for the first "row" of your graph. It should contain:
     *       - A copy of the row entity (the one that starts with - entity: "" and includes the
     *         big ROW START comment)
     *       - A copy of the row value entity (the one that starts with - entity: $ex vars. rowConfig...)
     *         for EACH VALUE the the rows may contain.
     *
     *     For example, if your graph can contain values 1, 2, 3, 4, or 5, you'll have one row entity and
     *     FIVE row data entities.
     *
     *  3. If your graph will have more than one row, you'll need to copy the entire row set (including
     *     the row entity and all row data entities for that row) and paste a copy of it for each row.
     *
     *     For example, if your graph has three sensors and four possible values, the entities section will
     *     look like this:
     *
     *        - row entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *        - row entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *        - row entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *        - row data entity
     *
     * Keep in mind that if things don't display, this is most likely the problem. And yes, I know at this
     * point we should really be building custom cards and learning true hass development. I'll get on that
     * at some point.
     */
    }
entities:
  - entity: ""
    internal: true
    fn: |-
      $fn ({ vars }) => {
        //////////////////////////////////////////////////////////////////
        // ------======:ROW START:======------
        //////////////////////////////////////////////////////////////////
        vars.row++;
        vars.rowValueIndex = 0;
        vars.valueToPush = {};
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        vars.yVisibility[vars.row] = vars.valueToPush;
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: ""
    internal: true
    fn: |-
      $fn ({ vars }) => {
        //////////////////////////////////////////////////////////////////
        // ------======:ROW START:======------
        //////////////////////////////////////////////////////////////////
        vars.row++;
        vars.rowValueIndex = 0;
        vars.valueToPush = {};
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
  - entity: $ex vars.rowConfiigurations[vars.row]['sensor']
    fn: |-
      $fn ({ vars }) => {
        vars.rowValueIndex++;
      }
    name: $ex vars.rowValueIndex
    type: scatter
    xaxis: x
    yaxis: $ex `y${ vars.row }`
    period: hour
    mode: lines
    showlegend: $ex vars.row == 1
    line:
      width: $ex vars.barWidth
      color: $ex vars.rowValueColor(vars.rowValueIndex)
    filters:
      - fn: |-
          ({xs, ys, vars}) => {
            return vars.buildData(xs, ys, vars.row, vars.rowConfiigurations, vars.rowValueIndex);
          }
      - fn: |-
          ({xs, ys, vars}) => {
            vars.valueToPush[vars.rowValueIndex] = ys.includes(vars.rowConfiigurations[vars.row].displayName) ? true : false
          }
    visible: |-
      $fn ({ ys, vars }) => { 
        vars.yVisibility[vars.row] = vars.valueToPush;
        return ys.includes(vars.rowConfiigurations[vars.row].displayName);
      }
defaults:
  yaxes:
    fixedrange: true
    side: left
    showline: true
    linewidth: $ex vars.yAxisLineWidth
    showgrid: $ex vars.yGrid
    overlaying: false
layout:
  fn: |
    $fn({ vars }) => {
      /**
       * Calculates and sets row visibility, increment, and domain based on yVisibility.
       *
       * @param {object} vars - The variables object containing yVisibility, etc.
       */
        vars.rowConfiigurationsVisible = 0;
        vars.rowVisibility = Object.keys(vars.yVisibility).map(key => {
          const visible = Object.values(vars.yVisibility[key]).some(val => val);
          if (visible) {
            vars.rowConfiigurationsVisible++;
          }
          return visible;
        });
      
        vars.yincrement = 1 / vars.rowConfiigurationsVisible;
        vars.rowDomain = vars.rowVisibility.map((rowVisible, index) => {
          return rowVisible ? vars.calculateYDomain(
            vars.rowVisibility.slice(0, index + 1).filter(Boolean).length,
            vars.rowConfiigurationsVisible,
            vars.yincrement
          ) : null;
        });
      };  
  margin:
    t: $ex vars.topMargin
    b: $ex vars.bottomMargin
    l: $ex vars.leftMargin
    r: $ex vars.rightMargin
  height: >-
    $ex (vars.rowHeight * vars.rowConfiigurationsVisible) + vars.topMargin +
    vars.bottomMargin
  grid:
    rows: $ex vars.rowConfiigurationsVisible + 1
    columns: 1
    roworder: top to bottom
    pattern: coupled
  xaxis:
    showline: true
    linewidth: $ex vars.xAxisLineWidth
  yaxis:
    fn: |
      $fn ({ vars }) => {
        vars.layouty = 0;
        vars.layouty++;
        
        /**
           * ---=== yAxis Section ===---
           *
           * Pain in the ass, part deux. Again, we cannot programmatically create yaxis yaml
           * entries, so you need to assemble your own here. If you only have one row in your
           * graph, this yaxis entry is all you need. You should remove any additional yaxis
           * entries (yaxis2, yaxis3, etc.) below.
           *
           * If you have additional rows, you need to assure there is a yaxis entry for each row.
           * Do this by copying the yaxis2 entry, pasting it in, and incrementing the number for 
           * each row (yaxis3, yaxis4, etc.). No changes beyond the row number are required.
           *
           * For example, if you have five rows, you should have:
           *    - The yaxis yaml, unchanged.
           *    - The yaxis2 yaml, unchanged.
           *    - A copy of yaxis2 changed to read yaxis3 (no addl changes required)
           *    - A copy of yaxis2 changed to read yaxis4 (no addl changes required)
           *    - A copy of yaxis2 changed to read yaxis5 (no addl changes required)
           *
           */
      }
    domain: $ex vars.rowDomain[vars.layouty - 1]
    visible: $ex vars.rowVisibility[vars.layouty - 1]
  yaxis2:
    fn: |
      $fn ({ vars }) => {
        vars.layouty++;
      }
    domain: $ex vars.rowDomain[vars.layouty - 1]
    visible: $ex vars.rowVisibility[vars.layouty - 1]

Note that it can easily be adapted to a single bar:

Or, of course, a kjillion like the one at the top.

Anyway, thanks everyone for all the help you've provided me, and I hope this might prove useful to some of you (and that my documentation makes it as easy as possible).

[dbuezas]

Wow, that looks amazing!
I wonder if this could be made a preset somehow: https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#presets

[CharlesCage]

That's a great idea! I missed the preset in the documentation. On it and will post back here with results.