c3js / c3js/c3

Toggling off bar series, then loading data with unload: true, shows bar series again

Open
#2,618 0 comments 1 reaction 0 assignees View on GitHub
C-bug
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

* **C3 version**: 0.6.3 (or whatever the sample documentation uses)
* **D3 version**: v5
* **Browser**: Chrome 74
* **OS**: MacOS

I'm having an issue where if you have a bar chart with two series, and toggle one of the series to be hidden, and then load more data, the hidden series comes back, appearing on top of/or behind the other series.

You can reproduce the issue with this snippet of code I modified from one of the samples
```
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
],
type: "bar"
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});

setTimeout(function () {
chart.load({
unload: true,
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['data1', 130, 300, 200, 300, 150, 250],
['data2', 130, 240, 300, 400, 250, 350]
]
});
}, 5000);
```

If you copy paste this into https://c3js.org/samples/timeseries.html

After you paste the code in, hide `data1` series by clicking it in the legend.

Wait until the load happens, and you see that the blue bar comes back.

Is this the intended behaviour?

If you remove the `unload: true` from the second code block, it doesn't happen.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the timeseries sample using the provided c3.generate and chart.load calls, first hiding data1 and then loading with unload: true. Trace how the chart handles hidden series during that load. Done means the hidden bar series stays hidden after new data is loaded, while the existing behavior without unload: true remains unaffected.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3, javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.