feat: allow custom yRegion colors

src/js/objects/ChartComponents.js

@@ -220,7 +220,7 @@ let componentConfigs = {
 		makeElements(data) {
 			return data.map(r =>
 				yRegion(r.startPos, r.endPos, this.constants.width,
-					r.label, { labelPos: r.options.labelPos })
+					r.label, { labelPos: r.options.labelPos, stroke: r.options.stroke, fill: r.options.fill })
 			);
 		},
 		animateElements(newData) {

src/js/utils/draw.js

@@ -465,8 +465,8 @@ export function yRegion(y1, y2, width, label, options = {}) {
 	let rect = createSVG('rect', {
 		className: `bar mini`, // remove class
 		styles: {
-			fill: `rgba(228, 234, 239, 0.49)`,
-			stroke: BASE_LINE_COLOR,
+			fill: options.fill || `rgba(228, 234, 239, 0.49)`,
+			stroke: options.stroke || BASE_LINE_COLOR,
 			'stroke-dasharray': `${width}, ${height}`
 		},
 		// 'data-point-index': index,