c3js / c3js/c3

Stacking broken using area chart with null values and connectNull: true

Open
#2,115 2 comments 0 reactions 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

I have a chart over last year by month. But have null values for data for first few months.
I have implemented stacking/unstacking via a button. When displaying the stacked chart the data points float above the line where the line should be, but the lines are where the unstacked values would be. If we change connectNull from true to false it works.

![image](https://user-images.githubusercontent.com/1747428/28550170-077e5528-7094-11e7-877b-eb9f0046b646.png)

{"line":{"connectNull":true},"data":{"type":"area","columns":[["__xs_accounts_low",1483228800000,1485907200000,1488326400000,1491004800000,1493596800000,1496275200000,1498867200000],["__xs_accounts_mid",1483228800000,1485907200000,1488326400000,1491004800000,1493596800000,1496275200000,1498867200000],["__xs_accounts_high",1483228800000,1485907200000,1488326400000,1491004800000,1493596800000,1496275200000,1498867200000],["Accounts: high",null,null,null,21,20,17,13],["Accounts: mid",null,null,null,2,1,5,9],["Accounts: low",null,null,null,4,6,5,5]],"xs":{"Accounts: low":"__xs_accounts_low","Accounts: mid":"__xs_accounts_mid","Accounts: high":"__xs_accounts_high"},"groups":[["Accounts: high","Accounts: mid","Accounts: low"]],"colors":{"Accounts: high":"#7adbb8","Accounts: mid":"#e4c87c","Accounts: low":"#dc8181"},"names":{"Accounts: high":"High","Accounts: mid":"Mid","Accounts: low":"Low"}},"grid":{"y":{"show":true}},"axis":{"x":{"type":"timeseries","tick":{"format":"%b %Y"},"max":1498867200000,"min":1483228800000,"localtime":false,"label":{"text":"Date (UTC)","position":"outer-center"}},"y":{"min":0,"padding":{"bottom":0},"label":{"text":"Accounts","position":"outer-middle"}}},"point":{"show":true,"r":3,"focus":{"expand":{"r":4.5}}},"bindto":"#page_2_1_10 div.chartspace"}

Contributor guide

Open the contributing guide

Research direction

No source file, test, or entry point is named; begin by reproducing the supplied area-chart configuration with connectNull set to true and false. Trace the stacking and null-value handling, then add coverage showing that stacked points align with their stacked areas while unstacked behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3js, javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.