Group bars and text for nice css effect

pygal/bar.css

@@ -1,12 +1,21 @@
+.bar .dataPointLabel {
+    fill-opacity: 0;
+    -webkit-transition: 250ms;
+}
+.bar:hover .dataPointLabel {
+    fill-opacity: 0.9;
+    fill: #000000;
+}
+
 .key, .fill {
     fill-opacity: 0.5;
     stroke: none;
     stroke-width: 1px;
+    -webkit-transition: 250ms;
 }
 
 .fill:hover{
     fill-opacity: 0.25;
-    -webkit-transition: 250ms;
 }
 
 .key1,.fill1{

pygal/bar.py

@@ -185,7 +185,9 @@ class VerticalBar(Bar):
                 if self.stack == 'side':
                     left += bar_width * dataset_count
 
-                rect = etree.SubElement(self.graph, 'rect', {
+                rect_group = etree.SubElement(self.graph, "g",
+                                              {'class': 'bar'})
+                etree.SubElement(rect_group, 'rect', {
                     'x': str(left),
                     'y': str(top),
                     'width': str(bar_width),
@@ -194,7 +196,7 @@ class VerticalBar(Bar):
                 })
 
                 self.make_datapoint_text(
-                    left + bar_width / 2.0, top - 6, value)
+                    rect_group, left + bar_width / 2.0, top - 6, value)
 
 
 class HorizontalBar(Bar):
@@ -249,7 +251,7 @@ class HorizontalBar(Bar):
                     'y': str(top),
                     'width': str(length),
                     'height': str(bar_height),
-                    'class': 'fill%s' % (dataset_count + 1),
+                    'class': 'fill fill%s' % (dataset_count + 1),
                 })
 
                 self.make_datapoint_text(

pygal/graph.css

@@ -72,17 +72,12 @@ Base styles for pygal.Graph
 }
 
 .dataPointLabel{
-  fill: transparent;
   text-anchor:middle;
   font-size: 10px;
   font-family: "Arial", sans-serif;
   font-weight: normal;
 }
 
-.dataPointLabel:hover{
-  fill: #000000;
-}
-
 .staggerGuideLine{
   fill: none;
   stroke: #000000;

pygal/graph.py

@@ -337,24 +337,14 @@ class Graph(object):
         # consider width/2 for centering the labels
         return 0
 
-    def make_datapoint_text(self, x, y, value, style=None):
+    def make_datapoint_text(self, group, x, y, value, style=None):
         """
         Add text for a datapoint
         """
         if not self.show_data_values:
-            # do nothing
             return
-        # first lay down the text in a wide white stroke to
+
-        #  differentiate it from the background
+        e = etree.SubElement(group, 'text', {
-        e = etree.SubElement(self.foreground, 'text', {
-            'x': str(x),
-            'y': str(y),
-            'class': 'dataPointLabel',
-            'style': '%(style)s stroke: #fff; stroke-width: 2;' % vars(),
-        })
-        e.text = str(value)
-        # then lay down the text in the specified style
-        e = etree.SubElement(self.foreground, 'text', {
             'x': str(x),
             'y': str(y),
             'class': 'dataPointLabel'})