Proposal: Adjusting Chart Color Display Order

[homelab-alpha]

Which part of the application does your idea belong to?

Charts

Description

Hi @alexjustesen,

Before submitting a PR, I’d like to get your feedback on an idea I’ve been considering.

For my own setup, I’ve created custom widgets, and I was wondering if you'd be interested in adjusting the display order of chart colors. Specifically, I'm referring to the order in which the colors are shown, not the colors themselves.

Motivation

Reversing the order of the chart colors could improve the accuracy of data representation across charts. For example:

• A ping of 300 ms is quite high, but using green to represent this value can be misleading, as green typically signals that everything is fine. I believe purple, which typically represents a neutral value, would be more fitting here.

• In the Down and Upload Latency charts, green is used for the average, and purple is used for “low.” However, since low latency is good, I think low latency should be represented by green, with purple reserved for average (neutral) values.

Below, I’ve included a screenshot to illustrate what I mean.

I’d love to hear your thoughts on these suggestions before moving forward with the PR!

Dark Mode

Before	After

Light Mode

Before	After

[alexjustesen]

Thanks for opening a discussion first!

Charts and the metrics dashboard I'm planning on completely overhauling come Q1 2026 so I wouldn't open a PR.

Colors are better visual representations are on my list.

[homelab-alpha]

Colors are better visual representations are on my list.

Yes, I was experimenting with that as well. I had kept the following points in mind for myself.
Perhaps you can use these for the new, future charts.

1. High contrast ratio Ensure clear readability on both light and dark backgrounds.
2. Color-blind friendly Avoid critical combinations that are difficult to distinguish, such as pure red/green.
3. Limited color palette Use a maximum of 5–6 main colors to keep the charts clean and easy to interpret.
4. Consistent accent colors Use accent colors for averages, highlights, and exceptions, and apply them consistently throughout.
5. Fixed transparency for fill colors Use a standard transparency (20%) so lines and backgrounds do not visually interfere with each other.

[alexjustesen]

@homelab-alpha working through some chart examples, below are three variants I'm toying with. Let me know your thoughts...

• Points are hidden be default and show when you hover over a data point in the set.
• Points now show when the result breached a benchmark KPI, the point is yellow and has a "ringing" animation.
• I'm also comparing 3 different "data sections":
  • First, combines download and upload speed metrics into a single dual axis chart.
  • Second, combines download speed and download latency (iqm) into a single dial axis chart. This is good because you can easily see when a high ping and a slow speed corelate. Section also includes more stats.
  • Third, closer to how the charts are currently laid out just with the stats moved.
• I also removed the usage of red/green to be more color-blind compliant.

Dark	Light

[homelab-alpha]

Hi @alexjustesen,

These widgets look fantastic! You can instantly see what's going on.

The Point “ringing” animation is a nice touch. My suggestion: make it possible to toggle this animation on or off via the settings or environment configuration.

Regarding the chart colors: it's still challenging to find the right balance. The download and upload speed chart looks great in dark mode but less so in light mode. You might want to try the following colors:

Download (Mbps): SteelBlue

Full color

• HEX: #4682B4FF
• RGBA: rgba(70, 130, 180, 1)

Fill color (20%)

• HEX: #4682B433
• RGBA: rgba(70, 130, 180, 0.2)

Upload (Mbps): CadetBlue

Full color

• HEX: #5F9EA0FF
• RGBA: rgba(95, 158, 160, 1)

Fill color (20%)

• HEX: #5F9EA033
• RGBA: rgba(95, 158, 160, 0.2)

If the Ping chart, if it comes back, gray could be a good option. However, I noticed that this is a tricky color to keep visible in dark mode.

For the Download and Upload Latency charts, you might want to consider using the same colors for down/upload as you use for the Download and Upload (Mbps) charts. I assume that the "Latency (ms)" in the Download Latency chart refers to the "Average Latency". If that's the case, you could try the following color for the "Avg. Latency (ms)":

Average Latency (ms): SlateBlue

Full color

• HEX: #6A5ACDFF
• RGBA: rgba(106, 90, 205, 1)

Fill color (20%)

• HEX: #6A5ACD33
• RGBA: rgba(106, 90, 205, 0.2)

Let me know what you think of my suggestions!

[alexjustesen]

Taking a look at color parings some more, I'm going to lean more towards higher contrast colors. Thinking this is a better way to have them stand out in dark and light modes. Also removing the fill and making lines bolder seems to be in line with best practices as well.

Ref: https://www.webability.io/blog/colors-to-avoid-for-color-blindness

[homelab-alpha]

I read the article you referred to. It contained several good tips, especially in the “Color Pairings” table. The video was also very helpful.

From now on, I will no longer use shades of grey in my charts, even though I personally find grey a pleasant color to use as a neutral color.

[homelab-alpha]

Question About Timestamp Format

What are your thoughts on the timestamp format? Currently, the application uses the 12-hour format (AM/PM). Would you be open to switching to the 24-hour format?

From my perspective, the 24-hour format is easier to read and less ambiguous. This may partly be because I’m not a native English speaker; in many parts of Europe, including the Netherlands, the 24-hour format is the standard, so it feels more natural and intuitive.

File: app/Livewire/MetricsDashboard.php

Current: 12-hour format (AM/PM)

$labelFormat = match ($this->dateRange) {

    'today' => 'g:i A',       // 3:45 PM
    'week'  => 'D g:i A',     // Mon 3:45 PM
    'month' => 'M j g:i A',   // Dec 15 3:45 PM
    default => 'M j g:i A',   // Dec 15 3:45 PM

};

Proposed: 24-hour format

$labelFormat = match ($this->dateRange) {

    'today'   => 'H:i',            // 15:45
    'week'    => 'D H:i',          // Mon 15:45
    'month'   => 'M jS, H:i'       // Dec 15th 15:45
    default   => 'M jS, Y, H:i',   // Dec 15th, 2025, 15:45

};

I believe this change would improve clarity and better align with international conventions, but I’m happy to hear your thoughts.

[alexjustesen]

I like this idea, generally it depends on where in the world you are for the preference. Let me think about this a little...

[labrown]

Date formatting in the user interface should be changeable by the user. We can default to one, but I think it's OK to accommodate user preference for 12 or 24 hour formatting.
Dates in data files, exports, databases, etc. should be strictly standardized.