diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index 40a4866e..3a73847e 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -434,7 +434,7 @@ var options = {
barChart.sideBySide |
Boolean |
false |
- If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side.
+ | If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side, within the same width as a single bar..
See example 10 for more information.
When using groups, see example 11.
|
@@ -445,7 +445,12 @@ var options = {
50 |
The width of the bars. |
-
+
+ barChart.minWidth |
+ Number |
+ |
+ The minimum width of the bars in pixels: by default the bars get smaller while zooming out to prevent overlap, this value is the minimum width of the bar. Default behavior (when minWidth is not set) is 10% of the bar width. |
+
dataAxis |
Object |
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index dfa688a6..ac22a289 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -94,7 +94,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
// plot barchart
for (i = 0; i < combinedData.length; i++) {
group = framework.groups[combinedData[i].groupId];
- var minWidth = 0.1 * group.options.barChart.width;
+ var minWidth = group.options.barChart.minWidth != undefined ? group.options.barChart.minWidth : 0.1 * group.options.barChart.width;
key = combinedData[i].screen_x;
var heightOffset = 0;
@@ -102,9 +102,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
if (i + 1 < combinedData.length) {
coreDistance = Math.abs(combinedData[i + 1].screen_x - key);
}
- if (i > 0) {
- coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].screen_x - key));
- }
drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
}
else {
@@ -113,9 +110,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
if (nextKey < combinedData.length) {
coreDistance = Math.abs(combinedData[nextKey].screen_x - key);
}
- if (prevKey > 0) {
- coreDistance = Math.min(coreDistance, Math.abs(combinedData[prevKey].screen_x - key));
- }
drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
intersections[key].resolved += 1;
@@ -132,12 +126,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
else if (group.options.barChart.sideBySide === true) {
drawData.width = drawData.width / intersections[key].amount;
drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1));
- if (group.options.barChart.align === 'left') {
- drawData.offset -= 0.5 * drawData.width;
- }
- else if (group.options.barChart.align === 'right') {
- drawData.offset += 0.5 * drawData.width;
- }
}
}
DOMutil.drawBar(combinedData[i].screen_x + drawData.offset, combinedData[i].screen_y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
@@ -201,7 +189,7 @@ Bargraph._getDataIntersections = function (intersections, combinedData) {
Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
var width, offset;
if (coreDistance < group.options.barChart.width && coreDistance > 0) {
- width = coreDistance < minWidth ? minWidth : coreDistance;
+ width = coreDistance < minWidth ? minWidth : coreDistance
offset = 0; // recalculate offset with the new width;
if (group.options.barChart.align === 'left') {
diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js
index 978624a2..fb8e0455 100644
--- a/lib/timeline/optionsGraph2d.js
+++ b/lib/timeline/optionsGraph2d.js
@@ -40,6 +40,7 @@ let allOptions = {
style: {string:['line','bar','points']}, // line, bar
barChart: {
width: {number},
+ minWidth: {number},
sideBySide: {boolean},
align: {string:['left','center','right']},
__type__: {object}
@@ -179,6 +180,7 @@ let configureOptions = {
style: ['line','bar','points'], // line, bar
barChart: {
width: [50,5,100,5],
+ minWidth: [50,5,100,5],
sideBySide: false,
align: ['left','center','right'] // left, center, right
},