[Feat]: 1 legend for multiple charts

[non-bin]

Problem

I have a core utilization chart for each of my 4 CPU cores. Having 4 legends wastes space, but I don't remember what the colors mean.

Examples

All

One

None

Description

A way to group charts under a legend, or have an external legend tag linked to multiple charts

(photoshopped)

Importance

nice to have

Value proposition

makes things a bit nicer

Proposed implementation

I think reference the charts with a class something like this:

<div data-netdata="cpu.cpu0" data-legend="no" class="cpuCores">
<div data-netdata="legend" data-references="cpuCores">

Not sure how data-colors would be handled, maybe prioritise legend, then first or last chart

Here's how I'd imagine implementing my case:

<div class="row">
  <div class="col-6">
    <!-- row 1 -->
    <div data-netdata="cpu.cpu0"
         data-legend="no"
         data-width="49%"
         class="cpuCores">
    </div>

    <div data-netdata="cpu.cpu1"
         data-legend="no"
         data-width="49%"
         class="cpuCores">
    </div>
    <br>

    <!-- row 2 -->
    <div data-netdata="cpu.cpu2"
         data-legend="no"
         data-width="49%"
         class="cpuCores">
    </div>

    <div data-netdata="cpu.cpu3"
         data-legend="no"
         data-width="49%"
         class="cpuCores">
    </div>
  </div>
  
  <!-- legend -->
  <div class="col-1">
    <div data-netdata="legend"
         data-references="cpuCores">
    </div>
</div>