[SUPPORT] How to draw between grid lines based on time scale?

Chartjs 2.5

I want each weekend (Saturday, Sunday) to be visibly distinguishable from the rest of the week. Here a background with a specific color (Vertical bar) should be applied / displayed. The background should go from eg. 03.06.2017 00:00 to 05.06.2017 00:00 (Thus stretching over the whole weekend)

My current solution is based on looping the data labels, however this is not getting me where I want, as sometimes I don’t have enough data entries to find the beginning and end draw position of each weekend.

Here my current code:

var weekendPlugin = {
	getLinePosition: function (chart, pointIndex) {
		var meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
		return meta.data[pointIndex]._model.x;
	},
	renderWeekendBackground: function (chartInstance, fromIndex, toIndex) {
		var y_scale = chartInstance.scales['y-axis-0'];
		var context = chartInstance.chart.ctx;
		var	x1 = chartInstance.chartArea.left;

		var outsideOfGraph = (this.getLinePosition(chartInstance, fromIndex) < x1);

		var xPosition = outsideOfGraph ? x1 : this.getLinePosition(chartInstance, fromIndex);
		var width = this.getLinePosition(chartInstance, toIndex) - this.getLinePosition(chartInstance, fromIndex);
		if (outsideOfGraph) {
			 width = width - (x1 - this.getLinePosition(chartInstance, fromIndex));

			 if (width < 0) {
				width = 0;
			 }
		}

		context.save();

		context.globalCompositeOperation = 'destination-over';
		context.beginPath();
		context.rect(xPosition, y_scale.top, width, y_scale.bottom - y_scale.top);
		context.clip();
		context.fillStyle = "#fed426";
		context.fill();

		context.restore();

	},
	afterDatasetsDraw: function (chartInstance, easing) {
		var self = this;

		var fromId, toId;
		
		for (var idx in chartInstance.config.data.labels) {
			var date = chartInstance.config.data.labels[idx];
			
			var dateObj = moment(date, "YYYY/MM/DD,HH:mm:ss");
			if (dateObj.isoWeekday() === 6 || dateObj.isoWeekday() === 7) {
				if (!fromId) {
					fromId = idx;
				} else {
					toId = idx;
				}
			} else {
				if (fromId)) {
					self.renderWeekendBackground(chartInstance, fromId, toId ? toId : idx);
					fromId = undefined;
					toId = undefined;
				}
			}
		}
	}
};

Chart.plugins.register(weekendPlugin);

How could I approach this? How can I find out at which pixel each weekend in the current chart view begins and ends independently of the dataset?

[etimberg]

@SesioN right, but wouldn’t you know the dates of the weekends in advance and could pass those as the value to draw the box to in the annotation plugin? Or do you not necessarily know the range of the data?

[etimberg]

Awesome, hope it works out. 😄