Is there a way to replace regions in c3?

I'm setting up a chart that based on user input (of dates) regenerates with new data. When regions are added they do not replace or remove the previous regions which I need them to do.

Being run from PHPStorm. I have tried chart.regions.remove() but nothing is removed. chart.regions.add() works as expected.

chart.regions.remove(regionsArray);
resetRegions();
chart.regions.add(
    regionsArray
);

/*
Where chart is my chart, regionsArray is initially the array of current regions. resetRegions() assigns the correct wanted region values to regionsArray. After resetRegions() regionsArray only contains the wanted regions and not the old regions too.
*/

I expect the graph to only show the new regions but instead it shows both new and old regions.

Solution

You could do the following - First, let us call c3 to generate a chart with regions:

var chart = c3.generate({
   bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
    regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
   ];
});

Then we can replace the old regions by new regions using the following function (here in combination with a timeout for demonstration purpose):

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 2000);

I have created a fiddle for you to test this: http://jsfiddle.net/vbn4tquz/

Below the complete code and executable snippet:

var chart = c3.generate({
     bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
		regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
    ],
});

// This function replaces the old regions

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 3500);

.c3 svg {
  font: 10px sans-serif
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges
}

.c3-chart-arc path {
  stroke: #fff
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px
}

.c3-grid line {
  stroke: #aaa
}

.c3-grid text {
  fill: #aaa
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em
}

.c3-line {
  stroke-width: 1px
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px
}

.c3-bar {
  stroke-width: 0
}

.c3-bar._expanded_ {
  fill-opacity: .75
}

.c3-target.c3-focused {
  opacity: 1
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px
}

.c3-target.c3-defocused {
  opacity: .3!important
}

.c3-region {
  fill: #4682b4;
  fill-opacity: .1
}

.c3-brush .extent {
  fill-opacity: .1
}

.c3-legend-item {
  font-size: 12px
}

.c3-legend-item-hidden {
  opacity: .15
}

.c3-legend-background {
  opacity: .75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1
}

.c3-tooltip-container {
  z-index: 10
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: .9
}

.c3-tooltip tr {
  border: 1px solid #CCC
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999
}

.c3-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

.c3-tooltip td.value {
  text-align: right
}

.c3-area {
  stroke-width: 0;
  opacity: .2
}

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777
}

.c3-chart-arc .c3-gauge-value {
  fill: #000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js">
</script>

<body>
<br><br>

<div id="c3_chart" style="width: 95%; height: 250px"></div>
</body>