BUG: style.bar results in incorrect gradient

Author: sinhrks

doc/source/whatsnew/v0.18.0.txt

@@ -226,4 +226,7 @@ Bug Fixes
 - Bug in ``.loc`` result with duplicated key may have ``Index`` with incorrect dtype (:issue:`11497`)
 - Bug in ``pd.rolling_median`` where memory allocation failed even with sufficient memory (:issue:`11696`)
 
+- Bug in ``.style.bar`` may not rendered properly using specific browser (:issue:`11678`)
+
+
 - Bug in ``df.replace`` while replacing value in mixed dtype ``Dataframe`` (:issue:`11698`)

pandas/core/style.py

@@ -656,10 +656,10 @@ def set_properties(self, subset=None, **kwargs):
     @staticmethod
     def _bar(s, color, width):
         normed = width * (s - s.min()) / (s.max() - s.min())
-        attrs = 'width: 10em; height: 80%;'\
-            'background: linear-gradient(90deg,'\
-            '{c} {w}%, transparent 0%)'
-        return [attrs.format(c=color, w=x) for x in normed]
+
+        base = 'width: 10em; height: 80%;'
+        attrs = base + 'background: linear-gradient(90deg,{c} {w}%, transparent 0%)'
+        return [attrs.format(c=color, w=x) if x != 0 else base for x in normed]
 
     def bar(self, subset=None, axis=0, color='#d65f5f', width=100):
         """

pandas/tests/test_style.py

@@ -198,9 +198,7 @@ def test_bar(self):
         df = pd.DataFrame({'A': [0, 1, 2]})
         result = df.style.bar()._compute().ctx
         expected = {
-            (0, 0): ['width: 10em', ' height: 80%',
-                     'background: linear-gradient('
-                     '90deg,#d65f5f 0.0%, transparent 0%)'],
+            (0, 0): ['width: 10em', ' height: 80%'],
             (1, 0): ['width: 10em', ' height: 80%',
                      'background: linear-gradient('
                      '90deg,#d65f5f 50.0%, transparent 0%)'],
@@ -212,9 +210,7 @@ def test_bar(self):
 
         result = df.style.bar(color='red', width=50)._compute().ctx
         expected = {
-            (0, 0): ['width: 10em', ' height: 80%',
-                     'background: linear-gradient('
-                     '90deg,red 0.0%, transparent 0%)'],
+            (0, 0): ['width: 10em', ' height: 80%'],
             (1, 0): ['width: 10em', ' height: 80%',
                      'background: linear-gradient('
                      '90deg,red 25.0%, transparent 0%)'],
@@ -231,6 +227,44 @@ def test_bar(self):
         result = df.style.bar(color='red', width=50)._compute().ctx
         self.assertEqual(result, expected)
 
+    def test_bar_0points(self):
+        df = pd.DataFrame([[1, 2, 3], [4, 5, 6], [7, 8, 9]])
+        result = df.style.bar()._compute().ctx
+        expected = {(0, 0): ['width: 10em', ' height: 80%'],
+                    (0, 1): ['width: 10em', ' height: 80%'],
+                    (0, 2): ['width: 10em', ' height: 80%'],
+                    (1, 0): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (1, 1): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (1, 2): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (2, 0): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)'],
+                    (2, 1): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)'],
+                    (2, 2): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)']}
+        self.assertEqual(result, expected)
+
+        result = df.style.bar(axis=1)._compute().ctx
+        expected = {(0, 0): ['width: 10em', ' height: 80%'],
+                    (0, 1): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (0, 2): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)'],
+                    (1, 0): ['width: 10em', ' height: 80%'],
+                    (1, 1): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (1, 2): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)'],
+                    (2, 0): ['width: 10em', ' height: 80%'],
+                    (2, 1): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 50.0%, transparent 0%)'],
+                    (2, 2): ['width: 10em', ' height: 80%',
+                             'background: linear-gradient(90deg,#d65f5f 100.0%, transparent 0%)']}
+        self.assertEqual(result, expected)
+
     def test_highlight_null(self, null_color='red'):
         df = pd.DataFrame({'A': [0, np.nan]})
         result = df.style.highlight_null()._compute().ctx