Visual component for displaying difference between two values

I'm building a component that should receive two values and display the "difference" between them visually.

It's basically a bar, which should be exactly in the middle when the two values "break even", and all the way to one side if one value is double the other one.

So I'm trying to create an equation/function that will receive those 2 values and outputs:

1. 100 if one is double the other.
2. 50 if they are equal.
3. 0 if the other is double the first one.
4. The rest of ratio cases should split evenly as percentages. for example, if one is 20% bigger than the other the output should be 70.

be aware - the values could also be 0 which is problematic in division.

Hope I was clear enough. I want to receive the final value like so for me to easily display the difference using % in height or width of a component. I am open to suggestions about better ways of doing it.

EDIT: I wrote this, which kind of works:

const fill = () => {
    const quotient = totalIncome / totalExpense;

    if (quotient <= 0.5) {
      return 0;
    }
    return quotient * 50;
  };

The main problem is a case where totalExpense is 0 and than it divides by zero, and also I'm convinced there might be a better way of writing it.