Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce the 'minBarLength' dataset property for bar scales (X or Y) #5741

Merged
merged 4 commits into from Oct 18, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/charts/bar.md
Expand Up @@ -97,6 +97,7 @@ The bar chart defines the following configuration options. These options are mer
| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
| `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
| `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels.
| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)

### barThickness
Expand Down
11 changes: 11 additions & 0 deletions src/controllers/controller.bar.js
Expand Up @@ -382,8 +382,10 @@ module.exports = function(Chart) {
var chart = me.chart;
var meta = me.getMeta();
var scale = me.getValueScale();
var isHorizontal = scale.isHorizontal();
var datasets = chart.data.datasets;
var value = scale.getRightValue(datasets[datasetIndex].data[index]);
var minBarLength = scale.options.minBarLength;
var stacked = scale.options.stacked;
var stack = meta.stack;
var start = 0;
Expand All @@ -410,6 +412,15 @@ module.exports = function(Chart) {
head = scale.getPixelForValue(start + value);
size = (head - base) / 2;

if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
size = minBarLength;
if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) {
head = base - minBarLength;
} else {
head = base + minBarLength;
}
}

return {
size: size,
base: base,
Expand Down
48 changes: 48 additions & 0 deletions test/specs/scale.linear.tests.js
Expand Up @@ -1046,4 +1046,52 @@ describe('Linear Scale', function() {

expect(chart.scales['x-axis-0'].max).toEqual(0);
});

it('minBarLength settings should be used on Y axis on bar chart', function() {
var minBarLength = 4;
var chart = window.acquireChart({
type: 'bar',
data: {
datasets: [{
data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
}]
},
options: {
scales: {
yAxes: [{
minBarLength: minBarLength
}]
}
}
});

var data = chart.getDatasetMeta(0).data;

expect(data[0]._model.base - minBarLength).toEqual(data[0]._model.y);
expect(data[1]._model.base + minBarLength).toEqual(data[1]._model.y);
});

it('minBarLength settings should be used on X axis on horizontalBar chart', function() {
var minBarLength = 4;
var chart = window.acquireChart({
type: 'horizontalBar',
data: {
datasets: [{
data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
}]
},
options: {
scales: {
xAxes: [{
minBarLength: minBarLength
}]
}
}
});

var data = chart.getDatasetMeta(0).data;

expect(data[0]._model.base + minBarLength).toEqual(data[0]._model.x);
expect(data[1]._model.base - minBarLength).toEqual(data[1]._model.x);
});
});