diff --git a/src/scss/point.scss b/src/scss/point.scss
index 532a644..0aa58a7 100644
--- a/src/scss/point.scss
+++ b/src/scss/point.scss
@@ -1,3 +1,6 @@
+.c3-circle {
+  fill: currentColor;
+}
 .c3-circle._expanded_ {
   stroke-width: 1px;
   stroke: white;
diff --git a/src/shape.line.js b/src/shape.line.js
index e9dcb8c..a32a228 100644
--- a/src/shape.line.js
+++ b/src/shape.line.js
@@ -307,7 +307,7 @@ c3_chart_internal_fn.updateCircle = function () {
     $$.mainCircle.enter().append("circle")
         .attr("class", $$.classCircle.bind($$))
         .attr("r", $$.pointR.bind($$))
-        .style("fill", $$.color);
+        .style("color", $$.color);
     $$.mainCircle
         .style("opacity", $$.initialOpacityForCircle.bind($$));
     $$.mainCircle.exit().remove();
@@ -317,7 +317,7 @@ c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
     return [
         (withTransition ? this.mainCircle.transition(Math.random().toString()) : this.mainCircle)
             .style('opacity', this.opacityForCircle.bind(this))
-            .style("fill", this.color)
+            .style("color", this.color)
             .attr("cx", cx)
             .attr("cy", cy),
         (withTransition ? selectedCircles.transition(Math.random().toString()) : selectedCircles)