-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Description
Problem
The series chart (which is a composite mixin) draws all stack mixin children (typically line charts) incorrectly when elasticY
is set to true. I would expect the highest value to be at the top of the chart and the lowest value to be at the bottom, flush with the axis.
Here is a screen of the issue:
Because the series chart (composite mixin) will add multiple child charts, the stack mixin is effectively only rendering n number of single group stacks (where the data point has value {y: value, y0: 0}
. The issue arises when accumulating the y-axis min, in the child's yAxisMin
function of stack-mixin.js
:
_chart.yAxisMin = function () {
var min = d3.min(flattenStack(), function (p) {
// Because y is typically greater than y0
// (which in our case is 0), this returns 0.
return (p.y + p.y0 < p.y0) ? (p.y + p.y0) : p.y0;
});
return dc.utils.subtract(min, _chart.yAxisPadding());
};
Workaround
A workaround is changing the series-chart's _chartFunction
to properly return the min value for the group, using the chart
method:
var chart = new dc.seriesChart("#chart1", "group1")
.chart(function (c) {
var child = dc.lineChart(c);
dc.override(child, 'yAxisMin', function () {
var min = d3.min(child.data(), function (layer) {
return d3.min(layer.values, function (p) {
return p.y + p.y0;
});
});
return dc.utils.subtract(min, child.yAxisPadding());
});
return child;
});
Thoughts
The more I think about it, the less I like the fact that series is a chart type... It really only applies to line charts. It would be better if the stackMixin handled these cases, such as:
- a
seriesAccessor
function - lines (stacked, series) & bars (stacked, grouped)
- the animation between these seems to be a big missing feature
The list of bugs around stack & series has been growing for a while, so they definitely deserve some attention and it would be nice to provide an all in one true stack/series/group mixin.