How do you compare two trends on the same chart when one metric higher = positive, second metric higher = negative?

Question

So we have two metrics that could potentially go on the same chart because they are semi-related and the user will want to compare them. However, when the first metric has a higher percentage, it is positive. If the second metric has a higher percentage it is negative.

We were originally going to use separate line charts, but I am leaning more towards combining them into one chart. My only concern is that having these both as a line graph on the same chart might be misleading or confusing for the user to tell if the trend is positive or negative overall.

Have you seen or created a chart with a similar scenario to this?

Answer 1

You could create a line chart with two axes where you place one metric each. Then you invert one axis, so values go from highest to lowest. Similar to a temperature humidity chart (see below) which is only missing the inverted axis.

Answer 2

Sounds like a job for green and red (positive and negative, respectively).

Just make the lines green and red. You could also make them different textures to indicate that they're to be interpreted differently, e.g. the green line could be solid and the red one dashed.

Finally, you could highlight the areas between the lines to indicate interpretation: Where the positive exceeds negative, highlight the portion between in (light, unobtrusive) green, and where negative exceeds positive, highlight the portion between them in red.

A caveat: Highlighting the portion between them only makes sense, however, if the two pieces of data are in the same units (i.e. subtractable) (ex: "Points my kid scored" vs "Points your kid scored") and are drawn on the same scale (e.g. both ranging from 10 - 200 or something). If it isn't an apples-to-apples comparison between the two metrics (example: "Number of satellites in LEO" vs "Stock price of SpaceX") then the area-between-the-curves method will just be confusing.