svelte-plots-basic 1.0.3 → 1.0.6

package/dist/index.mjs

@@ -130,6 +130,10 @@ function space() {
 function empty() {
     return text('');
 }
+function listen(node, event, handler, options) {
+    node.addEventListener(event, handler, options);
+    return () => node.removeEventListener(event, handler, options);
+}
 function attr(node, attribute, value) {
     if (value == null)
         node.removeAttribute(attribute);
@@ -155,6 +159,11 @@ function set_style(node, key, value, important) {
 function toggle_class(element, name, toggle) {
     element.classList[toggle ? 'add' : 'remove'](name);
 }
+function custom_event(type, detail, bubbles = false) {
+    const e = document.createEvent('CustomEvent');
+    e.initCustomEvent(type, bubbles, false, detail);
+    return e;
+}
 
 let current_component;
 function set_current_component(component) {
@@ -168,6 +177,20 @@ function get_current_component() {
 function onMount(fn) {
     get_current_component().$$.on_mount.push(fn);
 }
+function createEventDispatcher() {
+    const component = get_current_component();
+    return (type, detail) => {
+        const callbacks = component.$$.callbacks[type];
+        if (callbacks) {
+            // TODO are there situations where events could be dispatched
+            // in a server (non-DOM) environment?
+            const event = custom_event(type, detail);
+            callbacks.slice().forEach(fn => {
+                fn.call(component, event);
+            });
+        }
+    };
+}
 function setContext(key, context) {
     get_current_component().$$.context.set(key, context);
 }
@@ -472,7 +495,7 @@ function writable(value, start = noop) {
 
 /* src/Axes.svelte generated by Svelte v3.46.3 */
 
-function add_css$2(target) {
+function add_css$3(target) {
 	append_styles(target, "svelte-n80kcc", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n         \"ylab axes\"\n         \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-n80kcc{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
 }
 
@@ -483,7 +506,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (313:3) {#if title !== ""}
+// (338:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -504,7 +527,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (314:3) {#if yLabel !== ""}
+// (339:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -528,7 +551,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (315:3) {#if xLabel !== ""}
+// (340:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -552,7 +575,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (343:3) {#if !$isOk}
+// (368:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -592,17 +615,19 @@ function create_fragment$b(ctx) {
 	let t3;
 	let div1_class_value;
 	let current;
+	let mounted;
+	let dispose;
 	let if_block0 = /*title*/ ctx[0] !== "" && create_if_block_3(ctx);
 	let if_block1 = /*yLabel*/ ctx[2] !== "" && create_if_block_2(ctx);
 	let if_block2 = /*xLabel*/ ctx[1] !== "" && create_if_block_1(ctx);
-	const xaxis_slot_template = /*#slots*/ ctx[25].xaxis;
-	const xaxis_slot = create_slot(xaxis_slot_template, ctx, /*$$scope*/ ctx[24], get_xaxis_slot_context);
-	const yaxis_slot_template = /*#slots*/ ctx[25].yaxis;
-	const yaxis_slot = create_slot(yaxis_slot_template, ctx, /*$$scope*/ ctx[24], get_yaxis_slot_context);
-	const default_slot_template = /*#slots*/ ctx[25].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
-	const box_slot_template = /*#slots*/ ctx[25].box;
-	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[24], get_box_slot_context);
+	const xaxis_slot_template = /*#slots*/ ctx[26].xaxis;
+	const xaxis_slot = create_slot(xaxis_slot_template, ctx, /*$$scope*/ ctx[25], get_xaxis_slot_context);
+	const yaxis_slot_template = /*#slots*/ ctx[26].yaxis;
+	const yaxis_slot = create_slot(yaxis_slot_template, ctx, /*$$scope*/ ctx[25], get_yaxis_slot_context);
+	const default_slot_template = /*#slots*/ ctx[26].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
+	const box_slot_template = /*#slots*/ ctx[26].box;
+	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[25], get_box_slot_context);
 	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
 
 	return {
@@ -626,6 +651,7 @@ function create_fragment$b(ctx) {
 			if (box_slot) box_slot.c();
 			t3 = space();
 			if (if_block3) if_block3.c();
+			set_style(rect, "pointer-events", "none");
 			attr(rect, "x", rect_x_value = /*cpx*/ ctx[7][0]);
 			attr(rect, "y", rect_y_value = /*cpy*/ ctx[6][1]);
 			attr(rect, "width", rect_width_value = /*cpx*/ ctx[7][1] - /*cpx*/ ctx[7][0]);
@@ -670,10 +696,15 @@ function create_fragment$b(ctx) {
 				box_slot.m(svg, null);
 			}
 
-			/*div0_binding*/ ctx[26](div0);
+			/*div0_binding*/ ctx[27](div0);
 			append(div1, t3);
 			if (if_block3) if_block3.m(div1, null);
 			current = true;
+
+			if (!mounted) {
+				dispose = listen(svg, "click", /*handleClick*/ ctx[15]);
+				mounted = true;
+			}
 		},
 		p(ctx, dirty) {
 			if (/*title*/ ctx[0] !== "") {
@@ -732,60 +763,60 @@ function create_fragment$b(ctx) {
 			}
 
 			if (xaxis_slot) {
-				if (xaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 16777216)) {
+				if (xaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
 					update_slot_base(
 						xaxis_slot,
 						xaxis_slot_template,
 						ctx,
-						/*$$scope*/ ctx[24],
+						/*$$scope*/ ctx[25],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
-						: get_slot_changes(xaxis_slot_template, /*$$scope*/ ctx[24], dirty, get_xaxis_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+						: get_slot_changes(xaxis_slot_template, /*$$scope*/ ctx[25], dirty, get_xaxis_slot_changes),
 						get_xaxis_slot_context
 					);
 				}
 			}
 
 			if (yaxis_slot) {
-				if (yaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 16777216)) {
+				if (yaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
 					update_slot_base(
 						yaxis_slot,
 						yaxis_slot_template,
 						ctx,
-						/*$$scope*/ ctx[24],
+						/*$$scope*/ ctx[25],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
-						: get_slot_changes(yaxis_slot_template, /*$$scope*/ ctx[24], dirty, get_yaxis_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+						: get_slot_changes(yaxis_slot_template, /*$$scope*/ ctx[25], dirty, get_yaxis_slot_changes),
 						get_yaxis_slot_context
 					);
 				}
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 16777216)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[24],
+						/*$$scope*/ ctx[25],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
 						null
 					);
 				}
 			}
 
 			if (box_slot) {
-				if (box_slot.p && (!current || dirty[0] & /*$$scope*/ 16777216)) {
+				if (box_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
 					update_slot_base(
 						box_slot,
 						box_slot_template,
 						ctx,
-						/*$$scope*/ ctx[24],
+						/*$$scope*/ ctx[25],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
-						: get_slot_changes(box_slot_template, /*$$scope*/ ctx[24], dirty, get_box_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+						: get_slot_changes(box_slot_template, /*$$scope*/ ctx[25], dirty, get_box_slot_changes),
 						get_box_slot_context
 					);
 				}
@@ -834,8 +865,10 @@ function create_fragment$b(ctx) {
 			if (yaxis_slot) yaxis_slot.d(detaching);
 			if (default_slot) default_slot.d(detaching);
 			if (box_slot) box_slot.d(detaching);
-			/*div0_binding*/ ctx[26](null);
+			/*div0_binding*/ ctx[27](null);
 			if (if_block3) if_block3.d();
+			mounted = false;
+			dispose();
 		}
 	};
 }
@@ -883,7 +916,9 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { yLabel = "" } = $$props;
 	let { multiSeries = true } = $$props;
 
-	/* constants for internal use */
+	// event dispatcher
+	const dispatch = createEventDispatcher();
+
 	// how big are margins (number of pixels in unit margin value) between axis and plot area if axis are shown
 	const AXES_MARGIN_FACTORS = { "small": 30, "medium": 40, "large": 50 };
 
@@ -911,13 +946,13 @@ function instance$b($$self, $$props, $$invalidate) {
 	/* reactive parameters to be shared with children via context */
 	const width = writable(100); // actual width of plotting area in pixels
 
-	component_subscribe($$self, width, value => $$invalidate(22, $width = value));
+	component_subscribe($$self, width, value => $$invalidate(23, $width = value));
 	const height = writable(100); // actual height of plotting area in pixels
-	component_subscribe($$self, height, value => $$invalidate(20, $height = value));
+	component_subscribe($$self, height, value => $$invalidate(21, $height = value));
 	const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
-	component_subscribe($$self, xLim, value => $$invalidate(23, $xLim = value));
+	component_subscribe($$self, xLim, value => $$invalidate(24, $xLim = value));
 	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
-	component_subscribe($$self, yLim, value => $$invalidate(21, $yLim = value));
+	component_subscribe($$self, yLim, value => $$invalidate(22, $yLim = value));
 	const scale = writable("medium"); // scale factor (how big the shown plot is)
 	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
 	const isOk = writable(false); // are axes ready for drawing
@@ -925,18 +960,18 @@ function instance$b($$self, $$props, $$invalidate) {
 
 	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
 	const addXAxisMargins = function () {
-		$$invalidate(18, axesMargins[0] = 1, axesMargins);
-		$$invalidate(18, axesMargins[2] = 0.5, axesMargins);
-		$$invalidate(18, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
-		$$invalidate(18, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
+		$$invalidate(19, axesMargins[0] = 1, axesMargins);
+		$$invalidate(19, axesMargins[2] = 0.5, axesMargins);
+		$$invalidate(19, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+		$$invalidate(19, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
 	};
 
 	/** Adds margins for y-axis (e.g. when y-axis must be shown) */
 	const addYAxisMargins = function () {
-		$$invalidate(18, axesMargins[1] = 1, axesMargins);
-		$$invalidate(18, axesMargins[3] = 0.5, axesMargins);
-		$$invalidate(18, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
-		$$invalidate(18, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
+		$$invalidate(19, axesMargins[1] = 1, axesMargins);
+		$$invalidate(19, axesMargins[3] = 0.5, axesMargins);
+		$$invalidate(19, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+		$$invalidate(19, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
 	};
 
 	/** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1099,6 +1134,31 @@ function instance$b($$self, $$props, $$invalidate) {
 		ro.observe(axesWrapper);
 	});
 
+	// handle click on plot elements and dispatch manual events
+	function dispatchClickEvent(eventName, el) {
+		dispatch(eventName, {
+			seriesTitle: el.parentNode.getAttribute('title'),
+			elementID: el.dataset.id
+		});
+	}
+
+	function handleClick(e) {
+		// scatter plot markers
+		if (e.target.tagName === "text" && e.target.parentNode.classList.contains("series_scatter")) {
+			dispatchClickEvent("markerclick", e.target);
+			return;
+		}
+
+		// bar plot bars
+		if (e.target.tagName === "rect" && e.target.parentNode.classList.contains("series_bar")) {
+			dispatchClickEvent("barclick", e.target);
+			return;
+		}
+
+		// outside any plot element
+		dispatch("axesclick");
+	}
+
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			axesWrapper = $$value;
@@ -1107,42 +1167,42 @@ function instance$b($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('limX' in $$props) $$invalidate(15, limX = $$props.limX);
-		if ('limY' in $$props) $$invalidate(16, limY = $$props.limY);
+		if ('limX' in $$props) $$invalidate(16, limX = $$props.limX);
+		if ('limY' in $$props) $$invalidate(17, limY = $$props.limY);
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
 		if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
 		if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
-		if ('multiSeries' in $$props) $$invalidate(17, multiSeries = $$props.multiSeries);
-		if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
+		if ('multiSeries' in $$props) $$invalidate(18, multiSeries = $$props.multiSeries);
+		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*limX*/ 32768) {
+		if ($$self.$$.dirty[0] & /*limX*/ 65536) {
 			// this is reactive in case if limX and limY are interactively changed by parent script
 			if (!limX.some(v => v === undefined)) xLim.update(v => limX);
 		}
 
-		if ($$self.$$.dirty[0] & /*limY*/ 65536) {
+		if ($$self.$$.dirty[0] & /*limY*/ 131072) {
 			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
 		}
 
-		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 262160) {
+		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 524304) {
 			// computes real margins in pixels based on current scale
-			$$invalidate(19, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+			$$invalidate(20, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
 		}
 
-		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 16252928) {
+		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 32505856) {
 			// computes status which tells that axes limits look fine and it is safe to draw
 			// the status is based on the axis limits validity
 			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0] && $width > margins[1] + margins[3] && $height > margins[0] + margins[2]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 12582920) {
+		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 25165832) {
 			// computes coordinates for clip path box
 			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 3145736) {
+		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 6291464) {
 			$$invalidate(6, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
 		}
 	};
@@ -1163,6 +1223,7 @@ function instance$b($$self, $$props, $$invalidate) {
 		yLim,
 		scale,
 		isOk,
+		handleClick,
 		limX,
 		limY,
 		multiSeries,
@@ -1189,14 +1250,14 @@ class Axes extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				limX: 15,
-				limY: 16,
+				limX: 16,
+				limY: 17,
 				title: 0,
 				xLabel: 1,
 				yLabel: 2,
-				multiSeries: 17
+				multiSeries: 18
 			},
-			add_css$2,
+			add_css$3,
 			[-1, -1]
 		);
 	}
@@ -1986,14 +2047,15 @@ class YAxis extends SvelteComponent {
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[23] = list[i];
-	child_ctx[25] = i;
+	child_ctx[25] = list[i];
+	child_ctx[27] = i;
 	return child_ctx;
 }
 
-// (51:0) {#if rx !== undefined && ry !== undefined}
+// (55:0) {#if rx !== undefined && ry !== undefined}
 function create_if_block$6(ctx) {
-	let each_1_anchor;
+	let g;
+	let g_class_value;
 	let each_value = /*left*/ ctx[0];
 	let each_blocks = [];
 
@@ -2003,21 +2065,25 @@ function create_if_block$6(ctx) {
 
 	return {
 		c() {
+			g = svg_element("g");
+
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			each_1_anchor = empty();
+			attr(g, "class", g_class_value = "series " + /*style*/ ctx[2]);
+			attr(g, "title", /*title*/ ctx[1]);
+			attr(g, "style", /*barsStyleStr*/ ctx[3]);
 		},
 		m(target, anchor) {
+			insert(target, g, anchor);
+
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				each_blocks[i].m(g, null);
 			}
-
-			insert(target, each_1_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*rx, ry, rw, rh, barsStyleStr, left*/ 63) {
+			if (dirty & /*rx, ry, rw, rh, left*/ 241) {
 				each_value = /*left*/ ctx[0];
 				let i;
 
@@ -2029,7 +2095,7 @@ function create_if_block$6(ctx) {
 					} else {
 						each_blocks[i] = create_each_block$3(child_ctx);
 						each_blocks[i].c();
-						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+						each_blocks[i].m(g, null);
 					}
 				}
 
@@ -2039,15 +2105,27 @@ function create_if_block$6(ctx) {
 
 				each_blocks.length = each_value.length;
 			}
+
+			if (dirty & /*style*/ 4 && g_class_value !== (g_class_value = "series " + /*style*/ ctx[2])) {
+				attr(g, "class", g_class_value);
+			}
+
+			if (dirty & /*title*/ 2) {
+				attr(g, "title", /*title*/ ctx[1]);
+			}
+
+			if (dirty & /*barsStyleStr*/ 8) {
+				attr(g, "style", /*barsStyleStr*/ ctx[3]);
+			}
 		},
 		d(detaching) {
+			if (detaching) detach(g);
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(each_1_anchor);
 		}
 	};
 }
 
-// (52:3) {#each left as v, i}
+// (57:3) {#each left as v, i}
 function create_each_block$3(ctx) {
 	let rect;
 	let rect_x_value;
@@ -2058,29 +2136,28 @@ function create_each_block$3(ctx) {
 	return {
 		c() {
 			rect = svg_element("rect");
-			attr(rect, "x", rect_x_value = /*rx*/ ctx[4][/*i*/ ctx[25]]);
-			attr(rect, "y", rect_y_value = /*ry*/ ctx[3][/*i*/ ctx[25]]);
-			attr(rect, "width", rect_width_value = /*rw*/ ctx[2][/*i*/ ctx[25]]);
-			attr(rect, "height", rect_height_value = /*rh*/ ctx[1][/*i*/ ctx[25]]);
-			attr(rect, "style", /*barsStyleStr*/ ctx[5]);
+			attr(rect, "x", rect_x_value = /*rx*/ ctx[7][/*i*/ ctx[27]]);
+			attr(rect, "y", rect_y_value = /*ry*/ ctx[6][/*i*/ ctx[27]]);
+			attr(rect, "width", rect_width_value = /*rw*/ ctx[5][/*i*/ ctx[27]]);
+			attr(rect, "height", rect_height_value = /*rh*/ ctx[4][/*i*/ ctx[27]]);
 		},
 		m(target, anchor) {
 			insert(target, rect, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*rx*/ 16 && rect_x_value !== (rect_x_value = /*rx*/ ctx[4][/*i*/ ctx[25]])) {
+			if (dirty & /*rx*/ 128 && rect_x_value !== (rect_x_value = /*rx*/ ctx[7][/*i*/ ctx[27]])) {
 				attr(rect, "x", rect_x_value);
 			}
 
-			if (dirty & /*ry*/ 8 && rect_y_value !== (rect_y_value = /*ry*/ ctx[3][/*i*/ ctx[25]])) {
+			if (dirty & /*ry*/ 64 && rect_y_value !== (rect_y_value = /*ry*/ ctx[6][/*i*/ ctx[27]])) {
 				attr(rect, "y", rect_y_value);
 			}
 
-			if (dirty & /*rw*/ 4 && rect_width_value !== (rect_width_value = /*rw*/ ctx[2][/*i*/ ctx[25]])) {
+			if (dirty & /*rw*/ 32 && rect_width_value !== (rect_width_value = /*rw*/ ctx[5][/*i*/ ctx[27]])) {
 				attr(rect, "width", rect_width_value);
 			}
 
-			if (dirty & /*rh*/ 2 && rect_height_value !== (rect_height_value = /*rh*/ ctx[1][/*i*/ ctx[25]])) {
+			if (dirty & /*rh*/ 16 && rect_height_value !== (rect_height_value = /*rh*/ ctx[4][/*i*/ ctx[27]])) {
 				attr(rect, "height", rect_height_value);
 			}
 		},
@@ -2092,7 +2169,7 @@ function create_each_block$3(ctx) {
 
 function create_fragment$8(ctx) {
 	let if_block_anchor;
-	let if_block = /*rx*/ ctx[4] !== undefined && /*ry*/ ctx[3] !== undefined && create_if_block$6(ctx);
+	let if_block = /*rx*/ ctx[7] !== undefined && /*ry*/ ctx[6] !== undefined && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -2104,7 +2181,7 @@ function create_fragment$8(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*rx*/ ctx[4] !== undefined && /*ry*/ ctx[3] !== undefined) {
+			if (/*rx*/ ctx[7] !== undefined && /*ry*/ ctx[6] !== undefined) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2131,6 +2208,7 @@ function instance$8($$self, $$props, $$invalidate) {
 	let ry;
 	let rw;
 	let rh;
+	let barsStyleStr;
 	let $axesHeight;
 	let $yLim;
 	let $axesWidth;
@@ -2143,9 +2221,8 @@ function instance$8($$self, $$props, $$invalidate) {
 	let { faceColor = Colors.PRIMARY } = $$props;
 	let { borderColor = faceColor } = $$props;
 	let { lineWidth = 1 } = $$props;
-
-	// styles for bars and labels
-	const barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
+	let { title = "" } = $$props;
+	let { style = "series_rect" } = $$props;
 
 	// multiply width and height values if needed
 	if (!Array.isArray(left) || !Array.isArray(top) || left.length < 1 || left.length != top.length) {
@@ -2171,51 +2248,60 @@ function instance$8($$self, $$props, $$invalidate) {
 	const axes = getContext('axes');
 
 	const xLim = axes.xLim;
-	component_subscribe($$self, xLim, value => $$invalidate(20, $xLim = value));
+	component_subscribe($$self, xLim, value => $$invalidate(22, $xLim = value));
 	const yLim = axes.yLim;
-	component_subscribe($$self, yLim, value => $$invalidate(18, $yLim = value));
+	component_subscribe($$self, yLim, value => $$invalidate(20, $yLim = value));
 	const axesWidth = axes.width;
-	component_subscribe($$self, axesWidth, value => $$invalidate(19, $axesWidth = value));
+	component_subscribe($$self, axesWidth, value => $$invalidate(21, $axesWidth = value));
 	const axesHeight = axes.height;
-	component_subscribe($$self, axesHeight, value => $$invalidate(17, $axesHeight = value));
+	component_subscribe($$self, axesHeight, value => $$invalidate(19, $axesHeight = value));
 
 	$$self.$$set = $$props => {
 		if ('left' in $$props) $$invalidate(0, left = $$props.left);
-		if ('top' in $$props) $$invalidate(12, top = $$props.top);
-		if ('width' in $$props) $$invalidate(10, width = $$props.width);
-		if ('height' in $$props) $$invalidate(11, height = $$props.height);
-		if ('labels' in $$props) $$invalidate(13, labels = $$props.labels);
-		if ('faceColor' in $$props) $$invalidate(14, faceColor = $$props.faceColor);
-		if ('borderColor' in $$props) $$invalidate(15, borderColor = $$props.borderColor);
-		if ('lineWidth' in $$props) $$invalidate(16, lineWidth = $$props.lineWidth);
+		if ('top' in $$props) $$invalidate(14, top = $$props.top);
+		if ('width' in $$props) $$invalidate(12, width = $$props.width);
+		if ('height' in $$props) $$invalidate(13, height = $$props.height);
+		if ('labels' in $$props) $$invalidate(15, labels = $$props.labels);
+		if ('faceColor' in $$props) $$invalidate(16, faceColor = $$props.faceColor);
+		if ('borderColor' in $$props) $$invalidate(17, borderColor = $$props.borderColor);
+		if ('lineWidth' in $$props) $$invalidate(18, lineWidth = $$props.lineWidth);
+		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+		if ('style' in $$props) $$invalidate(2, style = $$props.style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*left, $xLim, $axesWidth*/ 1572865) {
+		if ($$self.$$.dirty & /*left, $xLim, $axesWidth*/ 6291457) {
 			// reactive variables for coordinates of data points in pixels
-			$$invalidate(4, rx = axes.scaleX(left, $xLim, $axesWidth));
+			$$invalidate(7, rx = axes.scaleX(left, $xLim, $axesWidth));
 		}
 
-		if ($$self.$$.dirty & /*top, $yLim, $axesHeight*/ 397312) {
-			$$invalidate(3, ry = axes.scaleY(top, $yLim, $axesHeight));
+		if ($$self.$$.dirty & /*top, $yLim, $axesHeight*/ 1589248) {
+			$$invalidate(6, ry = axes.scaleY(top, $yLim, $axesHeight));
 		}
 
-		if ($$self.$$.dirty & /*width, $xLim, $axesWidth*/ 1573888) {
-			$$invalidate(2, rw = axes.scaleX(width, $xLim, $axesWidth, true));
+		if ($$self.$$.dirty & /*width, $xLim, $axesWidth*/ 6295552) {
+			$$invalidate(5, rw = axes.scaleX(width, $xLim, $axesWidth, true));
 		}
 
-		if ($$self.$$.dirty & /*height, $yLim, $axesHeight*/ 395264) {
-			$$invalidate(1, rh = axes.scaleY(height, $yLim, $axesHeight, true));
+		if ($$self.$$.dirty & /*height, $yLim, $axesHeight*/ 1581056) {
+			$$invalidate(4, rh = axes.scaleY(height, $yLim, $axesHeight, true));
+		}
+
+		if ($$self.$$.dirty & /*faceColor, borderColor, lineWidth*/ 458752) {
+			// styles for bars and labels
+			$$invalidate(3, barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`);
 		}
 	};
 
 	return [
 		left,
+		title,
+		style,
+		barsStyleStr,
 		rh,
 		rw,
 		ry,
 		rx,
-		barsStyleStr,
 		xLim,
 		yLim,
 		axesWidth,
@@ -2240,13 +2326,15 @@ class Rectangles extends SvelteComponent {
 
 		init(this, options, instance$8, create_fragment$8, safe_not_equal, {
 			left: 0,
-			top: 12,
-			width: 10,
-			height: 11,
-			labels: 13,
-			faceColor: 14,
-			borderColor: 15,
-			lineWidth: 16
+			top: 14,
+			width: 12,
+			height: 13,
+			labels: 15,
+			faceColor: 16,
+			borderColor: 17,
+			lineWidth: 18,
+			title: 1,
+			style: 2
 		});
 	}
 }
@@ -2273,6 +2361,7 @@ function create_if_block$5(ctx) {
 		c() {
 			g = svg_element("g");
 			create_component(rectangles.$$.fragment);
+			set_style(g, "pointer-events", "none");
 			attr(g, "class", "mdaplot__axes-box");
 		},
 		m(target, anchor) {
@@ -2686,17 +2775,22 @@ class Segments extends SvelteComponent {
 
 /* src/TextLabels.svelte generated by Svelte v3.46.3 */
 
+function add_css$2(target) {
+	append_styles(target, "svelte-1szep8i", "text.svelte-1szep8i{dominant-baseline:middle}");
+}
+
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[25] = list[i];
-	child_ctx[27] = i;
+	child_ctx[27] = list[i];
+	child_ctx[29] = i;
 	return child_ctx;
 }
 
-// (56:0) {#if x !== undefined && y !== undefined}
+// (66:0) {#if x !== undefined && y !== undefined}
 function create_if_block$3(ctx) {
-	let each_1_anchor;
-	let each_value = /*x*/ ctx[6];
+	let g;
+	let g_class_value;
+	let each_value = /*x*/ ctx[7];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -2705,22 +2799,26 @@ function create_if_block$3(ctx) {
 
 	return {
 		c() {
+			g = svg_element("g");
+
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			each_1_anchor = empty();
+			attr(g, "class", g_class_value = "series " + /*style*/ ctx[1]);
+			attr(g, "title", /*title*/ ctx[2]);
+			attr(g, "style", /*textStyleStr*/ ctx[3]);
 		},
 		m(target, anchor) {
+			insert(target, g, anchor);
+
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				each_blocks[i].m(g, null);
 			}
-
-			insert(target, each_1_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*textStyleStr, x, y, dx, dy, textAnchors, pos, labels*/ 255) {
-				each_value = /*x*/ ctx[6];
+			if (dirty & /*x, y, dx, dy, labels*/ 241) {
+				each_value = /*x*/ ctx[7];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -2731,7 +2829,7 @@ function create_if_block$3(ctx) {
 					} else {
 						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
-						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+						each_blocks[i].m(g, null);
 					}
 				}
 
@@ -2741,61 +2839,64 @@ function create_if_block$3(ctx) {
 
 				each_blocks.length = each_value.length;
 			}
+
+			if (dirty & /*style*/ 2 && g_class_value !== (g_class_value = "series " + /*style*/ ctx[1])) {
+				attr(g, "class", g_class_value);
+			}
+
+			if (dirty & /*title*/ 4) {
+				attr(g, "title", /*title*/ ctx[2]);
+			}
+
+			if (dirty & /*textStyleStr*/ 8) {
+				attr(g, "style", /*textStyleStr*/ ctx[3]);
+			}
 		},
 		d(detaching) {
+			if (detaching) detach(g);
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(each_1_anchor);
 		}
 	};
 }
 
-// (57:3) {#each x as v, i}
+// (68:3) {#each x as v, i}
 function create_each_block$1(ctx) {
 	let text_1;
-	let raw_value = /*labels*/ ctx[0][/*i*/ ctx[27]] + "";
+	let raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "";
+	let text_1_data_id_value;
 	let text_1_x_value;
 	let text_1_y_value;
-	let text_1_text_anchor_value;
 
 	return {
 		c() {
 			text_1 = svg_element("text");
-			attr(text_1, "style", /*textStyleStr*/ ctx[2]);
-			attr(text_1, "x", text_1_x_value = /*x*/ ctx[6][/*i*/ ctx[27]]);
-			attr(text_1, "y", text_1_y_value = /*y*/ ctx[5][/*i*/ ctx[27]]);
-			attr(text_1, "dx", /*dx*/ ctx[4]);
-			attr(text_1, "dy", /*dy*/ ctx[3]);
-			attr(text_1, "dominant-baseline", "middle");
-			attr(text_1, "text-anchor", text_1_text_anchor_value = /*textAnchors*/ ctx[7][/*pos*/ ctx[1]]);
+			attr(text_1, "data-id", text_1_data_id_value = /*i*/ ctx[29]);
+			attr(text_1, "x", text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]]);
+			attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
+			attr(text_1, "dx", /*dx*/ ctx[5]);
+			attr(text_1, "dy", /*dy*/ ctx[4]);
+			attr(text_1, "class", "svelte-1szep8i");
 		},
 		m(target, anchor) {
 			insert(target, text_1, anchor);
 			text_1.innerHTML = raw_value;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*labels*/ 1 && raw_value !== (raw_value = /*labels*/ ctx[0][/*i*/ ctx[27]] + "")) text_1.innerHTML = raw_value;
-			if (dirty & /*textStyleStr*/ 4) {
-				attr(text_1, "style", /*textStyleStr*/ ctx[2]);
-			}
-
-			if (dirty & /*x*/ 64 && text_1_x_value !== (text_1_x_value = /*x*/ ctx[6][/*i*/ ctx[27]])) {
+			if (dirty & /*labels*/ 1 && raw_value !== (raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "")) text_1.innerHTML = raw_value;
+			if (dirty & /*x*/ 128 && text_1_x_value !== (text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]])) {
 				attr(text_1, "x", text_1_x_value);
 			}
 
-			if (dirty & /*y*/ 32 && text_1_y_value !== (text_1_y_value = /*y*/ ctx[5][/*i*/ ctx[27]])) {
+			if (dirty & /*y*/ 64 && text_1_y_value !== (text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]])) {
 				attr(text_1, "y", text_1_y_value);
 			}
 
-			if (dirty & /*dx*/ 16) {
-				attr(text_1, "dx", /*dx*/ ctx[4]);
-			}
-
-			if (dirty & /*dy*/ 8) {
-				attr(text_1, "dy", /*dy*/ ctx[3]);
+			if (dirty & /*dx*/ 32) {
+				attr(text_1, "dx", /*dx*/ ctx[5]);
 			}
 
-			if (dirty & /*pos*/ 2 && text_1_text_anchor_value !== (text_1_text_anchor_value = /*textAnchors*/ ctx[7][/*pos*/ ctx[1]])) {
-				attr(text_1, "text-anchor", text_1_text_anchor_value);
+			if (dirty & /*dy*/ 16) {
+				attr(text_1, "dy", /*dy*/ ctx[4]);
 			}
 		},
 		d(detaching) {
@@ -2806,7 +2907,7 @@ function create_each_block$1(ctx) {
 
 function create_fragment$5(ctx) {
 	let if_block_anchor;
-	let if_block = /*x*/ ctx[6] !== undefined && /*y*/ ctx[5] !== undefined && create_if_block$3(ctx);
+	let if_block = /*x*/ ctx[7] !== undefined && /*y*/ ctx[6] !== undefined && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -2818,7 +2919,7 @@ function create_fragment$5(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*x*/ ctx[6] !== undefined && /*y*/ ctx[5] !== undefined) {
+			if (/*x*/ ctx[7] !== undefined && /*y*/ ctx[6] !== undefined) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2859,11 +2960,13 @@ function instance$5($$self, $$props, $$invalidate) {
 	let { borderColor = "transparent" } = $$props;
 	let { borderWidth = 0 } = $$props;
 	let { textSize = 1 } = $$props;
+	let { style = "" } = $$props;
+	let { title = "series_text" } = $$props;
 
 	// text-anchor values depending on position
 	const textAnchors = ["middle", "middle", "start", "middle", "end"];
 
-	/* sanity check for input parameters */
+	// sanity check for input parameters
 	if (!Array.isArray(xValues) || !Array.isArray(yValues) || xValues.length !== yValues.length) {
 		throw "TextLabels: parameters 'xValues' and 'yValues' must be vectors of the same length.";
 	}
@@ -2872,30 +2975,32 @@ function instance$5($$self, $$props, $$invalidate) {
 	const axes = getContext('axes');
 
 	const xLim = axes.xLim;
-	component_subscribe($$self, xLim, value => $$invalidate(23, $xLim = value));
+	component_subscribe($$self, xLim, value => $$invalidate(24, $xLim = value));
 	const yLim = axes.yLim;
-	component_subscribe($$self, yLim, value => $$invalidate(21, $yLim = value));
+	component_subscribe($$self, yLim, value => $$invalidate(22, $yLim = value));
 	const axesWidth = axes.width;
-	component_subscribe($$self, axesWidth, value => $$invalidate(22, $axesWidth = value));
+	component_subscribe($$self, axesWidth, value => $$invalidate(23, $axesWidth = value));
 	const axesHeight = axes.height;
-	component_subscribe($$self, axesHeight, value => $$invalidate(20, $axesHeight = value));
+	component_subscribe($$self, axesHeight, value => $$invalidate(21, $axesHeight = value));
 	const scale = axes.scale;
-	component_subscribe($$self, scale, value => $$invalidate(19, $scale = value));
+	component_subscribe($$self, scale, value => $$invalidate(20, $scale = value));
 
 	$$self.$$set = $$props => {
 		if ('xValues' in $$props) $$invalidate(13, xValues = $$props.xValues);
 		if ('yValues' in $$props) $$invalidate(14, yValues = $$props.yValues);
 		if ('labels' in $$props) $$invalidate(0, labels = $$props.labels);
-		if ('pos' in $$props) $$invalidate(1, pos = $$props.pos);
-		if ('faceColor' in $$props) $$invalidate(15, faceColor = $$props.faceColor);
-		if ('borderColor' in $$props) $$invalidate(16, borderColor = $$props.borderColor);
-		if ('borderWidth' in $$props) $$invalidate(17, borderWidth = $$props.borderWidth);
-		if ('textSize' in $$props) $$invalidate(18, textSize = $$props.textSize);
+		if ('pos' in $$props) $$invalidate(15, pos = $$props.pos);
+		if ('faceColor' in $$props) $$invalidate(16, faceColor = $$props.faceColor);
+		if ('borderColor' in $$props) $$invalidate(17, borderColor = $$props.borderColor);
+		if ('borderWidth' in $$props) $$invalidate(18, borderWidth = $$props.borderWidth);
+		if ('textSize' in $$props) $$invalidate(19, textSize = $$props.textSize);
+		if ('style' in $$props) $$invalidate(1, style = $$props.style);
+		if ('title' in $$props) $$invalidate(2, title = $$props.title);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*xValues, labels*/ 8193) {
-			// multiply labels values if needed
+			// multiply label values if needed
 			{
 				const n = xValues.length;
 				if (!Array.isArray(labels)) $$invalidate(0, labels = Array(n).fill(labels));
@@ -2911,38 +3016,39 @@ function instance$5($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*xValues, $xLim, $axesWidth*/ 12591104) {
+		if ($$self.$$.dirty & /*xValues, $xLim, $axesWidth*/ 25174016) {
 			// reactive variables for coordinates of data points in pixels
-			$$invalidate(6, x = axes.scaleX(xValues, $xLim, $axesWidth));
+			$$invalidate(7, x = axes.scaleX(xValues, $xLim, $axesWidth));
 		}
 
-		if ($$self.$$.dirty & /*yValues, $yLim, $axesHeight*/ 3162112) {
-			$$invalidate(5, y = axes.scaleY(yValues, $yLim, $axesHeight));
+		if ($$self.$$.dirty & /*yValues, $yLim, $axesHeight*/ 6307840) {
+			$$invalidate(6, y = axes.scaleY(yValues, $yLim, $axesHeight));
 		}
 
-		if ($$self.$$.dirty & /*pos, $scale*/ 524290) {
-			$$invalidate(4, dx = [0, 0, 1, 0, -1][pos] * axes.LABELS_MARGIN[$scale]);
+		if ($$self.$$.dirty & /*pos, $scale*/ 1081344) {
+			$$invalidate(5, dx = [0, 0, 1, 0, -1][pos] * axes.LABELS_MARGIN[$scale]);
 		}
 
-		if ($$self.$$.dirty & /*pos, $scale*/ 524290) {
-			$$invalidate(3, dy = [0, 1, 0, -1, 0][pos] * axes.LABELS_MARGIN[$scale]);
+		if ($$self.$$.dirty & /*pos, $scale*/ 1081344) {
+			$$invalidate(4, dy = [0, 1, 0, -1, 0][pos] * axes.LABELS_MARGIN[$scale]);
 		}
 
-		if ($$self.$$.dirty & /*faceColor, borderWidth, borderColor, textSize*/ 491520) {
-			// styles for bars and labels
-			$$invalidate(2, textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};font-size:${textSize}em;`);
+		if ($$self.$$.dirty & /*faceColor, borderWidth, borderColor, textSize, pos*/ 1015808) {
+			// styles for the elements
+			$$invalidate(3, textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
+      font-size:${textSize}em; text-anchor:${textAnchors[pos]};`);
 		}
 	};
 
 	return [
 		labels,
-		pos,
+		style,
+		title,
 		textStyleStr,
 		dy,
 		dx,
 		y,
 		x,
-		textAnchors,
 		xLim,
 		yLim,
 		axesWidth,
@@ -2950,6 +3056,7 @@ function instance$5($$self, $$props, $$invalidate) {
 		scale,
 		xValues,
 		yValues,
+		pos,
 		faceColor,
 		borderColor,
 		borderWidth,
@@ -2966,16 +3073,26 @@ class TextLabels extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, {
-			xValues: 13,
-			yValues: 14,
-			labels: 0,
-			pos: 1,
-			faceColor: 15,
-			borderColor: 16,
-			borderWidth: 17,
-			textSize: 18
-		});
+		init(
+			this,
+			options,
+			instance$5,
+			create_fragment$5,
+			safe_not_equal,
+			{
+				xValues: 13,
+				yValues: 14,
+				labels: 0,
+				pos: 15,
+				faceColor: 16,
+				borderColor: 17,
+				borderWidth: 18,
+				textSize: 19,
+				style: 1,
+				title: 2
+			},
+			add_css$2
+		);
 	}
 }
 
@@ -3310,31 +3427,28 @@ function add_css$1(target) {
 }
 
 function create_fragment$3(ctx) {
-	let g;
 	let rectangles;
 	let current;
 
 	rectangles = new Rectangles({
 			props: {
+				style: "series_bar",
 				left: /*left*/ ctx[4],
 				top: /*top*/ ctx[5],
 				width: /*width*/ ctx[3],
 				height: /*height*/ ctx[6],
 				borderColor: /*borderColor*/ ctx[2],
-				faceColor: /*faceColor*/ ctx[1]
+				faceColor: /*faceColor*/ ctx[1],
+				title: /*title*/ ctx[0]
 			}
 		});
 
 	return {
 		c() {
-			g = svg_element("g");
 			create_component(rectangles.$$.fragment);
-			attr(g, "class", "series series_bar");
-			attr(g, "title", /*title*/ ctx[0]);
 		},
 		m(target, anchor) {
-			insert(target, g, anchor);
-			mount_component(rectangles, g, null);
+			mount_component(rectangles, target, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -3345,11 +3459,8 @@ function create_fragment$3(ctx) {
 			if (dirty & /*height*/ 64) rectangles_changes.height = /*height*/ ctx[6];
 			if (dirty & /*borderColor*/ 4) rectangles_changes.borderColor = /*borderColor*/ ctx[2];
 			if (dirty & /*faceColor*/ 2) rectangles_changes.faceColor = /*faceColor*/ ctx[1];
+			if (dirty & /*title*/ 1) rectangles_changes.title = /*title*/ ctx[0];
 			rectangles.$set(rectangles_changes);
-
-			if (!current || dirty & /*title*/ 1) {
-				attr(g, "title", /*title*/ ctx[0]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -3361,8 +3472,7 @@ function create_fragment$3(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(g);
-			destroy_component(rectangles);
+			destroy_component(rectangles, detaching);
 		}
 	};
 }
@@ -3481,11 +3591,10 @@ class BarSeries extends SvelteComponent {
 /* src/ScatterSeries.svelte generated by Svelte v3.46.3 */
 
 function add_css(target) {
-	append_styles(target, "svelte-11a4d2d", ".marker{font-size:1em;cursor:default}.marker:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
+	append_styles(target, "svelte-byxua3", ".series_scatter > text{font-size:1em;cursor:default}.series_scatter > text:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
 }
 
 function create_fragment$2(ctx) {
-	let g;
 	let textlabels;
 	let current;
 
@@ -3493,40 +3602,35 @@ function create_fragment$2(ctx) {
 			props: {
 				xValues: /*xValues*/ ctx[0],
 				yValues: /*yValues*/ ctx[1],
-				labels: /*markerSymbol*/ ctx[7],
-				textSize: /*markerSize*/ ctx[6],
 				faceColor: /*faceColor*/ ctx[3],
 				borderColor: /*borderColor*/ ctx[4],
-				borderWidth: /*borderWidth*/ ctx[5]
+				borderWidth: /*borderWidth*/ ctx[5],
+				title: /*title*/ ctx[2],
+				style: "series_scatter",
+				labels: /*markerSymbol*/ ctx[7],
+				textSize: /*markerSize*/ ctx[6]
 			}
 		});
 
 	return {
 		c() {
-			g = svg_element("g");
 			create_component(textlabels.$$.fragment);
-			attr(g, "class", "series series_scatter");
-			attr(g, "title", /*title*/ ctx[2]);
 		},
 		m(target, anchor) {
-			insert(target, g, anchor);
-			mount_component(textlabels, g, null);
+			mount_component(textlabels, target, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
 			const textlabels_changes = {};
 			if (dirty & /*xValues*/ 1) textlabels_changes.xValues = /*xValues*/ ctx[0];
 			if (dirty & /*yValues*/ 2) textlabels_changes.yValues = /*yValues*/ ctx[1];
-			if (dirty & /*markerSymbol*/ 128) textlabels_changes.labels = /*markerSymbol*/ ctx[7];
-			if (dirty & /*markerSize*/ 64) textlabels_changes.textSize = /*markerSize*/ ctx[6];
 			if (dirty & /*faceColor*/ 8) textlabels_changes.faceColor = /*faceColor*/ ctx[3];
 			if (dirty & /*borderColor*/ 16) textlabels_changes.borderColor = /*borderColor*/ ctx[4];
 			if (dirty & /*borderWidth*/ 32) textlabels_changes.borderWidth = /*borderWidth*/ ctx[5];
+			if (dirty & /*title*/ 4) textlabels_changes.title = /*title*/ ctx[2];
+			if (dirty & /*markerSymbol*/ 128) textlabels_changes.labels = /*markerSymbol*/ ctx[7];
+			if (dirty & /*markerSize*/ 64) textlabels_changes.textSize = /*markerSize*/ ctx[6];
 			textlabels.$set(textlabels_changes);
-
-			if (!current || dirty & /*title*/ 4) {
-				attr(g, "title", /*title*/ ctx[2]);
-			}
 		},
 		i(local) {
 			if (current) return;
@@ -3538,8 +3642,7 @@ function create_fragment$2(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(g);
-			destroy_component(textlabels);
+			destroy_component(textlabels, detaching);
 		}
 	};
 }
@@ -3557,6 +3660,7 @@ function instance$2($$self, $$props, $$invalidate) {
 	// TODO: implement later
 	//export let labels = yValues;
 	//export let showLabels = "no"; // can be "no", "hover", "always"
+	/* constants for internal use */
 	const markers = ["●", "◼", "▲", "▼", "⬥", "+", "*", "⨯"];
 
 	let markerSymbol;
@@ -3663,7 +3767,7 @@ function create_if_block$1(ctx) {
 			polyline = svg_element("polyline");
 			attr(polyline, "class", "line");
 			attr(polyline, "points", /*p*/ ctx[2]);
-			attr(g, "class", "series lineseries");
+			attr(g, "class", "series series_line");
 			attr(g, "style", /*lineStyleStr*/ ctx[1]);
 			attr(g, "title", /*title*/ ctx[0]);
 		},
@@ -3798,7 +3902,8 @@ function instance$1($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*lineColor, lineWidth, $scale, lineType*/ 39936) {
-			$$invalidate(1, lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType - 1]}`);
+			$$invalidate(1, lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px;
+      stroke-dasharray:${axes.LINE_STYLES[$scale][lineType - 1]}`);
 		}
 	};