diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index 66a488f0..7683d82d 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -297,7 +297,13 @@ var items = [
label
Object
no
-
A label object which will be displayed near to the item. A label object has one requirement - a content property. In addition you can set the xOffset, yOffset and className for further appearance customisations
+
A label object which will be displayed near to the item. A label object has one requirement - a content property. In addition you can set the xOffset, yOffset and className for further appearance customisations.
+
+
+
end
+
Date
+
no
+
A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property.
diff --git a/examples/graph2d/21_barsWithEnd.html b/examples/graph2d/21_barsWithEnd.html
new file mode 100644
index 00000000..c5d131ff
--- /dev/null
+++ b/examples/graph2d/21_barsWithEnd.html
@@ -0,0 +1,51 @@
+
+
+
+ Graph2d | Bar Graph Example
+
+
+
+
+
+
+
+
Graph2d | Bar Graph With End Example
+
+ This example shows how you can plot a bar chart and supply an end value to have it fill.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
index fa0934e2..ec797541 100644
--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@@ -487,6 +487,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) {
//Copy data (because of unmodifiable DataView input.
var extended = util.bridgeObject(item);
extended.x = util.convert(item.x, 'Date');
+ extended.end = util.convert(item.end, 'Date');
extended.orginalY = item.y; //real Y
extended.y = Number(item.y);
extended[fieldId] = item[fieldId];
@@ -908,10 +909,10 @@ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
// if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
if (options.stack === true && options.style === 'bar') {
if (options.yAxisOrientation === 'left') {
- combinedDataLeft = combinedDataLeft.concat(group.getItems());
+ combinedDataLeft = combinedDataLeft.concat(groupData);
}
else {
- combinedDataRight = combinedDataRight.concat(group.getItems());
+ combinedDataRight = combinedDataRight.concat(groupData);
}
}
else {
@@ -1064,6 +1065,12 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) {
for (var i = 0; i < datapoints.length; i++) {
datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width;
datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations
+ if (datapoints[i].end != undefined) {
+ datapoints[i].screen_end = toScreen(datapoints[i].end) + this.props.width;
+ }
+ else {
+ datapoints[i].screen_end = undefined;
+ }
}
};
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index 32b3d36e..a8db2e24 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -62,8 +62,10 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
combinedData.push({
screen_x: processedGroupData[groupIds[i]][j].screen_x,
+ screen_end: processedGroupData[groupIds[i]][j].screen_end,
screen_y: processedGroupData[groupIds[i]][j].screen_y,
x: processedGroupData[groupIds[i]][j].x,
+ end: processedGroupData[groupIds[i]][j].end,
y: processedGroupData[groupIds[i]][j].y,
groupId: groupIds[i],
label: processedGroupData[groupIds[i]][j].label
@@ -128,7 +130,21 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1));
}
}
- 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);
+
+ let dataWidth = drawData.width;
+ let start = combinedData[i].screen_x;
+
+ // are we drawing explicit boxes? (we supplied an end value)
+ if (combinedData[i].screen_end != undefined){
+ dataWidth = combinedData[i].screen_end - combinedData[i].screen_x;
+ start += (dataWidth * 0.5);
+ }
+ else {
+ start += drawData.offset
+ }
+
+ DOMutil.drawBar(start, combinedData[i].screen_y - heightOffset, dataWidth, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
+
// draw points
if (group.options.drawPoints.enabled === true) {
let pointData = {