diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
index f6b341bb647..dfa48efdf40 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
@@ -38,20 +38,24 @@ export const getOpacity = (
   minOpacity = MIN_OPACITY_BOUNDED,
   maxOpacity = MAX_OPACITY,
 ) => {
-  if (
-    extremeValue === cutoffPoint ||
-    typeof cutoffPoint !== 'number' ||
-    typeof extremeValue !== 'number' ||
-    typeof value !== 'number'
-  ) {
+  if (extremeValue === cutoffPoint || typeof value !== 'number') {
     return maxOpacity;
   }
+  const numCutoffPoint =
+    typeof cutoffPoint === 'string' ? parseFloat(cutoffPoint) : cutoffPoint;
+  const numExtremeValue =
+    typeof extremeValue === 'string' ? parseFloat(extremeValue) : extremeValue;
+
+  if (isNaN(numCutoffPoint) || isNaN(numExtremeValue)) {
+    return maxOpacity;
+  }
+
   return Math.min(
     maxOpacity,
     round(
       Math.abs(
-        ((maxOpacity - minOpacity) / (extremeValue - cutoffPoint)) *
-          (value - cutoffPoint),
+        ((maxOpacity - minOpacity) / (numExtremeValue - numCutoffPoint)) *
+          (value - numCutoffPoint),
       ) + minOpacity,
       2,
     ),
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
index 1c6e574d3fc..c7d6c99b2cf 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
@@ -35,487 +35,500 @@ const countValues = mockData.map(row => row.count);
 const strData = [{ name: 'Brian' }, { name: 'Carlos' }, { name: 'Diana' }];
 const strValues = strData.map(row => row.name);
 
-describe('round', () => {
-  it('round', () => {
-    expect(round(1)).toEqual(1);
-    expect(round(1, 2)).toEqual(1);
-    expect(round(0.6)).toEqual(1);
-    expect(round(0.6, 1)).toEqual(0.6);
-    expect(round(0.64999, 2)).toEqual(0.65);
-  });
+test('round', () => {
+  expect(round(1)).toEqual(1);
+  expect(round(1, 2)).toEqual(1);
+  expect(round(0.6)).toEqual(1);
+  expect(round(0.6, 1)).toEqual(0.6);
+  expect(round(0.64999, 2)).toEqual(0.65);
 });
 
-describe('getOpacity', () => {
-  it('getOpacity', () => {
-    expect(getOpacity(100, 100, 100)).toEqual(1);
-    expect(getOpacity(75, 50, 100)).toEqual(0.53);
-    expect(getOpacity(75, 100, 50)).toEqual(0.53);
-    expect(getOpacity(100, 100, 50)).toEqual(0.05);
-    expect(getOpacity(100, 100, 100, 0, 0.8)).toEqual(0.8);
-    expect(getOpacity(100, 100, 50, 0, 1)).toEqual(0);
-    expect(getOpacity(999, 100, 50, 0, 1)).toEqual(1);
-    expect(getOpacity(100, 100, 50, 0.99, 1)).toEqual(0.99);
-    expect(getOpacity(99, 100, 50, 0, 1)).toEqual(0.02);
-  });
+test('getOpacity', () => {
+  expect(getOpacity(100, 100, 100)).toEqual(1);
+  expect(getOpacity(75, 50, 100)).toEqual(0.53);
+  expect(getOpacity(75, 100, 50)).toEqual(0.53);
+  expect(getOpacity(100, 100, 50)).toEqual(0.05);
+  expect(getOpacity(100, 100, 100, 0, 0.8)).toEqual(0.8);
+  expect(getOpacity(100, 100, 50, 0, 1)).toEqual(0);
+  expect(getOpacity(999, 100, 50, 0, 1)).toEqual(1);
+  expect(getOpacity(100, 100, 50, 0.99, 1)).toEqual(0.99);
+  expect(getOpacity(99, 100, 50, 0, 1)).toEqual(0.02);
+
+  expect(getOpacity('100', 100, 100)).toEqual(1);
+  expect(getOpacity('75', 50, 100)).toEqual(1);
+  expect(getOpacity('50', '100', '100')).toEqual(1);
+  expect(getOpacity('50', '75', '100')).toEqual(1);
+  expect(getOpacity('50', NaN, '100')).toEqual(1);
+  expect(getOpacity('50', '75', NaN)).toEqual(1);
+  expect(getOpacity('50', NaN, 100)).toEqual(1);
+  expect(getOpacity('50', '75', NaN)).toEqual(1);
+  expect(getOpacity('50', NaN, NaN)).toEqual(1);
+
+  expect(getOpacity(75, 50, 100)).toEqual(0.53);
+  expect(getOpacity(100, 50, 100)).toEqual(1);
+  expect(getOpacity(75, '50', 100)).toEqual(0.53);
+  expect(getOpacity(75, 50, '100')).toEqual(0.53);
+  expect(getOpacity(75, '50', '100')).toEqual(0.53);
+  expect(getOpacity(50, NaN, NaN)).toEqual(1);
+  expect(getOpacity(50, NaN, 100)).toEqual(1);
+  expect(getOpacity(50, NaN, '100')).toEqual(1);
+  expect(getOpacity(50, '75', NaN)).toEqual(1);
+  expect(getOpacity(50, 75, NaN)).toEqual(1);
 });
 
-describe('getColorFunction()', () => {
-  it('getColorFunction GREATER_THAN', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.GreaterThan,
-        targetValue: 50,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction LESS_THAN', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.LessThan,
-        targetValue: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(100)).toBeUndefined();
-    expect(colorFunction(50)).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction GREATER_OR_EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.GreaterOrEqual,
-        targetValue: 50,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toEqual('#FF00000D');
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-    expect(colorFunction(0)).toBeUndefined();
-  });
-
-  it('getColorFunction LESS_OR_EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.LessOrEqual,
-        targetValue: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toEqual('#FF0000FF');
-    expect(colorFunction(100)).toEqual('#FF00000D');
-    expect(colorFunction(150)).toBeUndefined();
-  });
-
-  it('getColorFunction EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Equal,
-        targetValue: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction NOT_EQUAL', () => {
-    let colorFunction = getColorFunction(
-      {
-        operator: Comparator.NotEqual,
-        targetValue: 60,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(60)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-    expect(colorFunction(50)).toEqual('#FF00004A');
-
-    colorFunction = getColorFunction(
-      {
-        operator: Comparator.NotEqual,
-        targetValue: 90,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(90)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF00004A');
-    expect(colorFunction(50)).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction BETWEEN', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Between,
-        targetValueLeft: 75,
-        targetValueRight: 125,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF000087');
-  });
-
-  it('getColorFunction BETWEEN_OR_EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.BetweenOrEqual,
-        targetValueLeft: 50,
-        targetValueRight: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toEqual('#FF00000D');
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-    expect(colorFunction(150)).toBeUndefined();
-  });
-
-  it('getColorFunction BETWEEN_OR_EQUAL without opacity', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.BetweenOrEqual,
-        targetValueLeft: 50,
-        targetValueRight: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-      false,
-    );
-    expect(colorFunction(25)).toBeUndefined();
-    expect(colorFunction(50)).toEqual('#FF0000');
-    expect(colorFunction(75)).toEqual('#FF0000');
-    expect(colorFunction(100)).toEqual('#FF0000');
-    expect(colorFunction(125)).toBeUndefined();
-  });
-
-  it('getColorFunction BETWEEN_OR_LEFT_EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.BetweenOrLeftEqual,
-        targetValueLeft: 50,
-        targetValueRight: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toEqual('#FF00000D');
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction BETWEEN_OR_RIGHT_EQUAL', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.BetweenOrRightEqual,
-        targetValueLeft: 50,
-        targetValueRight: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction GREATER_THAN with target value undefined', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.GreaterThan,
-        targetValue: undefined,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction BETWEEN with target value left undefined', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Between,
-        targetValueLeft: undefined,
-        targetValueRight: 100,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction BETWEEN with target value right undefined', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Between,
-        targetValueLeft: 50,
-        targetValueRight: undefined,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction unsupported operator', () => {
-    const colorFunction = getColorFunction(
-      {
-        // @ts-ignore
-        operator: 'unsupported operator',
-        targetValue: 50,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction with operator None', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.None,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(20)).toEqual(undefined);
-    expect(colorFunction(50)).toEqual('#FF000000');
-    expect(colorFunction(75)).toEqual('#FF000080');
-    expect(colorFunction(100)).toEqual('#FF0000FF');
-    expect(colorFunction(120)).toEqual(undefined);
-  });
-
-  it('getColorFunction with operator undefined', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: undefined,
-        targetValue: 150,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction with colorScheme undefined', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.GreaterThan,
-        targetValue: 150,
-        colorScheme: undefined,
-        column: 'count',
-      },
-      countValues,
-    );
-    expect(colorFunction(50)).toBeUndefined();
-    expect(colorFunction(100)).toBeUndefined();
-  });
-
-  it('getColorFunction BeginsWith', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.BeginsWith,
-        targetValue: 'C',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Brian')).toBeUndefined();
-    expect(colorFunction('Carlos')).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction EndsWith', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.EndsWith,
-        targetValue: 'n',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Carlos')).toBeUndefined();
-    expect(colorFunction('Brian')).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction Containing', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Containing,
-        targetValue: 'o',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Diana')).toBeUndefined();
-    expect(colorFunction('Carlos')).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction NotContaining', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.NotContaining,
-        targetValue: 'i',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Diana')).toBeUndefined();
-    expect(colorFunction('Carlos')).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction Equal', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.Equal,
-        targetValue: 'Diana',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Carlos')).toBeUndefined();
-    expect(colorFunction('Diana')).toEqual('#FF0000FF');
-  });
-
-  it('getColorFunction None', () => {
-    const colorFunction = getColorFunction(
-      {
-        operator: Comparator.None,
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      strValues,
-    );
-    expect(colorFunction('Diana')).toEqual('#FF0000FF');
-    expect(colorFunction('Carlos')).toEqual('#FF0000FF');
-    expect(colorFunction('Brian')).toEqual('#FF0000FF');
-  });
+test('getColorFunction GREATER_THAN', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.GreaterThan,
+      targetValue: 50,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF0000FF');
 });
 
-describe('getColorFormatters()', () => {
-  it('correct column config', () => {
-    const columnConfig = [
-      {
-        operator: Comparator.GreaterThan,
-        targetValue: 50,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      {
-        operator: Comparator.LessThan,
-        targetValue: 300,
-        colorScheme: '#FF0000',
-        column: 'sum',
-      },
-      {
-        operator: Comparator.Between,
-        targetValueLeft: 75,
-        targetValueRight: 125,
-        colorScheme: '#FF0000',
-        column: 'count',
-      },
-      {
-        operator: Comparator.GreaterThan,
-        targetValue: 150,
-        colorScheme: '#FF0000',
-        column: undefined,
-      },
-    ];
-    const colorFormatters = getColorFormatters(columnConfig, mockData);
-    expect(colorFormatters.length).toEqual(3);
-
-    expect(colorFormatters[0].column).toEqual('count');
-    expect(colorFormatters[0].getColorFromValue(100)).toEqual('#FF0000FF');
-
-    expect(colorFormatters[1].column).toEqual('sum');
-    expect(colorFormatters[1].getColorFromValue(200)).toEqual('#FF0000FF');
-    expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined();
-
-    expect(colorFormatters[2].column).toEqual('count');
-    expect(colorFormatters[2].getColorFromValue(100)).toEqual('#FF000087');
-  });
-
-  it('undefined column config', () => {
-    const colorFormatters = getColorFormatters(undefined, mockData);
-    expect(colorFormatters.length).toEqual(0);
-  });
-
-  it('correct column string config', () => {
-    const columnConfigString = [
-      {
-        operator: Comparator.BeginsWith,
-        targetValue: 'D',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      {
-        operator: Comparator.EndsWith,
-        targetValue: 'n',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      {
-        operator: Comparator.Containing,
-        targetValue: 'o',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-      {
-        operator: Comparator.NotContaining,
-        targetValue: 'i',
-        colorScheme: '#FF0000',
-        column: 'name',
-      },
-    ];
-    const colorFormatters = getColorFormatters(columnConfigString, strData);
-    expect(colorFormatters.length).toEqual(4);
-
-    expect(colorFormatters[0].column).toEqual('name');
-    expect(colorFormatters[0].getColorFromValue('Diana')).toEqual('#FF0000FF');
-
-    expect(colorFormatters[1].column).toEqual('name');
-    expect(colorFormatters[1].getColorFromValue('Brian')).toEqual('#FF0000FF');
-
-    expect(colorFormatters[2].column).toEqual('name');
-    expect(colorFormatters[2].getColorFromValue('Carlos')).toEqual('#FF0000FF');
-
-    expect(colorFormatters[3].column).toEqual('name');
-    expect(colorFormatters[3].getColorFromValue('Carlos')).toEqual('#FF0000FF');
-  });
+test('getColorFunction LESS_THAN', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.LessThan,
+      targetValue: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(100)).toBeUndefined();
+  expect(colorFunction(50)).toEqual('#FF0000FF');
+});
+
+test('getColorFunction GREATER_OR_EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.GreaterOrEqual,
+      targetValue: 50,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toEqual('#FF00000D');
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+  expect(colorFunction(0)).toBeUndefined();
+});
+
+test('getColorFunction LESS_OR_EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.LessOrEqual,
+      targetValue: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toEqual('#FF0000FF');
+  expect(colorFunction(100)).toEqual('#FF00000D');
+  expect(colorFunction(150)).toBeUndefined();
+});
+
+test('getColorFunction EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Equal,
+      targetValue: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+});
+
+test('getColorFunction NOT_EQUAL', () => {
+  let colorFunction = getColorFunction(
+    {
+      operator: Comparator.NotEqual,
+      targetValue: 60,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(60)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+  expect(colorFunction(50)).toEqual('#FF00004A');
+
+  colorFunction = getColorFunction(
+    {
+      operator: Comparator.NotEqual,
+      targetValue: 90,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(90)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF00004A');
+  expect(colorFunction(50)).toEqual('#FF0000FF');
+});
+
+test('getColorFunction BETWEEN', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Between,
+      targetValueLeft: 75,
+      targetValueRight: 125,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF000087');
+});
+
+test('getColorFunction BETWEEN_OR_EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.BetweenOrEqual,
+      targetValueLeft: 50,
+      targetValueRight: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toEqual('#FF00000D');
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+  expect(colorFunction(150)).toBeUndefined();
+});
+
+test('getColorFunction BETWEEN_OR_EQUAL without opacity', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.BetweenOrEqual,
+      targetValueLeft: 50,
+      targetValueRight: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+    false,
+  );
+  expect(colorFunction(25)).toBeUndefined();
+  expect(colorFunction(50)).toEqual('#FF0000');
+  expect(colorFunction(75)).toEqual('#FF0000');
+  expect(colorFunction(100)).toEqual('#FF0000');
+  expect(colorFunction(125)).toBeUndefined();
+});
+
+test('getColorFunction BETWEEN_OR_LEFT_EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.BetweenOrLeftEqual,
+      targetValueLeft: 50,
+      targetValueRight: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toEqual('#FF00000D');
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction BETWEEN_OR_RIGHT_EQUAL', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.BetweenOrRightEqual,
+      targetValueLeft: 50,
+      targetValueRight: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+});
+
+test('getColorFunction GREATER_THAN with target value undefined', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.GreaterThan,
+      targetValue: undefined,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction BETWEEN with target value left undefined', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Between,
+      targetValueLeft: undefined,
+      targetValueRight: 100,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction BETWEEN with target value right undefined', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Between,
+      targetValueLeft: 50,
+      targetValueRight: undefined,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction unsupported operator', () => {
+  const colorFunction = getColorFunction(
+    {
+      // @ts-ignore
+      operator: 'unsupported operator',
+      targetValue: 50,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction with operator None', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.None,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(20)).toEqual(undefined);
+  expect(colorFunction(50)).toEqual('#FF000000');
+  expect(colorFunction(75)).toEqual('#FF000080');
+  expect(colorFunction(100)).toEqual('#FF0000FF');
+  expect(colorFunction(120)).toEqual(undefined);
+});
+
+test('getColorFunction with operator undefined', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: undefined,
+      targetValue: 150,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction with colorScheme undefined', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.GreaterThan,
+      targetValue: 150,
+      colorScheme: undefined,
+      column: 'count',
+    },
+    countValues,
+  );
+  expect(colorFunction(50)).toBeUndefined();
+  expect(colorFunction(100)).toBeUndefined();
+});
+
+test('getColorFunction BeginsWith', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.BeginsWith,
+      targetValue: 'C',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Brian')).toBeUndefined();
+  expect(colorFunction('Carlos')).toEqual('#FF0000FF');
+});
+
+test('getColorFunction EndsWith', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.EndsWith,
+      targetValue: 'n',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Carlos')).toBeUndefined();
+  expect(colorFunction('Brian')).toEqual('#FF0000FF');
+});
+
+test('getColorFunction Containing', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Containing,
+      targetValue: 'o',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Diana')).toBeUndefined();
+  expect(colorFunction('Carlos')).toEqual('#FF0000FF');
+});
+
+test('getColorFunction NotContaining', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.NotContaining,
+      targetValue: 'i',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Diana')).toBeUndefined();
+  expect(colorFunction('Carlos')).toEqual('#FF0000FF');
+});
+
+test('getColorFunction Equal', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.Equal,
+      targetValue: 'Diana',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Carlos')).toBeUndefined();
+  expect(colorFunction('Diana')).toEqual('#FF0000FF');
+});
+
+test('getColorFunction None', () => {
+  const colorFunction = getColorFunction(
+    {
+      operator: Comparator.None,
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    strValues,
+  );
+  expect(colorFunction('Diana')).toEqual('#FF0000FF');
+  expect(colorFunction('Carlos')).toEqual('#FF0000FF');
+  expect(colorFunction('Brian')).toEqual('#FF0000FF');
+});
+
+test('correct column config', () => {
+  const columnConfig = [
+    {
+      operator: Comparator.GreaterThan,
+      targetValue: 50,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    {
+      operator: Comparator.LessThan,
+      targetValue: 300,
+      colorScheme: '#FF0000',
+      column: 'sum',
+    },
+    {
+      operator: Comparator.Between,
+      targetValueLeft: 75,
+      targetValueRight: 125,
+      colorScheme: '#FF0000',
+      column: 'count',
+    },
+    {
+      operator: Comparator.GreaterThan,
+      targetValue: 150,
+      colorScheme: '#FF0000',
+      column: undefined,
+    },
+  ];
+  const colorFormatters = getColorFormatters(columnConfig, mockData);
+  expect(colorFormatters.length).toEqual(3);
+
+  expect(colorFormatters[0].column).toEqual('count');
+  expect(colorFormatters[0].getColorFromValue(100)).toEqual('#FF0000FF');
+
+  expect(colorFormatters[1].column).toEqual('sum');
+  expect(colorFormatters[1].getColorFromValue(200)).toEqual('#FF0000FF');
+  expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined();
+
+  expect(colorFormatters[2].column).toEqual('count');
+  expect(colorFormatters[2].getColorFromValue(100)).toEqual('#FF000087');
+});
+
+test('undefined column config', () => {
+  const colorFormatters = getColorFormatters(undefined, mockData);
+  expect(colorFormatters.length).toEqual(0);
+});
+
+test('correct column string config', () => {
+  const columnConfigString = [
+    {
+      operator: Comparator.BeginsWith,
+      targetValue: 'D',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    {
+      operator: Comparator.EndsWith,
+      targetValue: 'n',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    {
+      operator: Comparator.Containing,
+      targetValue: 'o',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+    {
+      operator: Comparator.NotContaining,
+      targetValue: 'i',
+      colorScheme: '#FF0000',
+      column: 'name',
+    },
+  ];
+  const colorFormatters = getColorFormatters(columnConfigString, strData);
+  expect(colorFormatters.length).toEqual(4);
+
+  expect(colorFormatters[0].column).toEqual('name');
+  expect(colorFormatters[0].getColorFromValue('Diana')).toEqual('#FF0000FF');
+
+  expect(colorFormatters[1].column).toEqual('name');
+  expect(colorFormatters[1].getColorFromValue('Brian')).toEqual('#FF0000FF');
+
+  expect(colorFormatters[2].column).toEqual('name');
+  expect(colorFormatters[2].getColorFromValue('Carlos')).toEqual('#FF0000FF');
+
+  expect(colorFormatters[3].column).toEqual('name');
+  expect(colorFormatters[3].getColorFromValue('Carlos')).toEqual('#FF0000FF');
 });