Allow adding markers after creating chart. Fixes #11182

c3.js

@@ -1257,6 +1257,7 @@
             line_connectNull: false,
             line_step_type: 'step',
             marker_types: undefined,
+            allMarkersTypes: [],
             // bar
             bar_width: undefined,
             bar_width_ratio: 0.6,
@@ -3181,6 +3182,7 @@
 
     c3_chart_internal_fn.updateCircle = function () {
         var $$ = this;
+
         $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle).remove();
         $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
             .data($$.lineOrScatterData.bind($$));
@@ -3378,6 +3380,31 @@
         };
     })();
 
+    c3_chart_internal_fn.setMarker = function(id, type){
+        var $$ = this;
+
+        if($$.currentMarkerTypeId === undefined){
+            var length = 0;
+
+            for(var _ in $$.config.marker_types){
+                length++;
+            }
+
+            $$.currentMarkerTypeId = length % $$.config.allMarkersTypes.length;
+        }
+
+        if(type === undefined){
+            type = $$.config.allMarkersTypes[$$.currentMarkerTypeId];
+
+            $$.currentMarkerTypeId++;
+            $$.currentMarkerTypeId %= $$.config.allMarkersTypes.length;
+        }
+
+
+        $$.config.point_show[id] = true;
+        $$.config.marker_types[id] = type;
+    }
+
     c3_chart_internal_fn.getMarker = function(d, i){
         var $$ = this;
 

src/config.js

@@ -152,6 +152,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         line_connectNull: false,
         line_step_type: 'step',
         marker_types: undefined,
+        allMarkersTypes: [],
         // bar
         bar_width: undefined,
         bar_width_ratio: 0.6,

src/marker.js

@@ -111,6 +111,31 @@ var marker_fn = (function() {
     };
 })();
 
+c3_chart_internal_fn.setMarker = function(id, type){
+    var $$ = this;
+
+    if($$.currentMarkerTypeId === undefined){
+        var length = 0;
+
+        for(var _ in $$.config.marker_types){
+            length++;
+        }
+
+        $$.currentMarkerTypeId = length % $$.config.allMarkersTypes.length;
+    }
+
+    if(type === undefined){
+        type = $$.config.allMarkersTypes[$$.currentMarkerTypeId];
+
+        $$.currentMarkerTypeId++;
+        $$.currentMarkerTypeId %= $$.config.allMarkersTypes.length;
+    }
+
+
+    $$.config.point_show[id] = true;
+    $$.config.marker_types[id] = type;
+}
+
 c3_chart_internal_fn.getMarker = function(d, i){
     var $$ = this;
 

src/shape.line.js

@@ -292,6 +292,7 @@ c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { //
 
 c3_chart_internal_fn.updateCircle = function () {
     var $$ = this;
+
     $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle).remove();
     $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
         .data($$.lineOrScatterData.bind($$));