svelte-plots-basic 1.0.2 → 1.0.5

package/dist/index.js

@@ -136,6 +136,10 @@
     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);
@@ -161,6 +165,11 @@
     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) {
@@ -174,6 +183,20 @@
     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);
     }
@@ -478,8 +501,8 @@
 
     /* src/Axes.svelte generated by Svelte v3.46.3 */
 
-    function add_css$2(target) {
-    	append_styles(target, "svelte-vuzab", ".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{grid-area:axes;position:relative;box-sizing:border-box;display:flex;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}");
+    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}");
     }
 
     const get_box_slot_changes = dirty => ({});
@@ -489,7 +512,7 @@
     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;
 
@@ -510,7 +533,7 @@
     	};
     }
 
-    // (314:3) {#if yLabel !== ""}
+    // (339:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -534,7 +557,7 @@
     	};
     }
 
-    // (315:3) {#if xLabel !== ""}
+    // (340:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -558,7 +581,7 @@
     	};
     }
 
-    // (343:3) {#if !$isOk}
+    // (368:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -598,17 +621,19 @@
     	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 {
@@ -632,6 +657,7 @@
     			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]);
@@ -640,8 +666,8 @@
     			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[8] + ")");
     			attr(svg, "preserveAspectRatio", "none");
     			attr(svg, "class", "axes");
-    			attr(div0, "class", "axes-wrapper");
-    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]));
+    			attr(div0, "class", "axes-wrapper svelte-n80kcc");
+    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc");
     			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
     		},
     		m(target, anchor) {
@@ -676,10 +702,15 @@
     				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] !== "") {
@@ -738,60 +769,60 @@
     			}
 
     			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
     					);
     				}
@@ -808,7 +839,7 @@
     				if_block3 = null;
     			}
 
-    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]))) {
+    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc")) {
     				attr(div1, "class", div1_class_value);
     			}
 
@@ -840,8 +871,10 @@
     			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();
     		}
     	};
     }
@@ -889,7 +922,9 @@
     	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 };
 
@@ -917,13 +952,13 @@
     	/* 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
@@ -931,18 +966,18 @@
 
     	/** 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)
@@ -1105,6 +1140,31 @@
     		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;
@@ -1113,42 +1173,42 @@
     	}
 
     	$$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]);
     		}
     	};
@@ -1169,6 +1229,7 @@
     		yLim,
     		scale,
     		isOk,
+    		handleClick,
     		limX,
     		limY,
     		multiSeries,
@@ -1195,14 +1256,14 @@
     			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]
     		);
     	}
@@ -1992,14 +2053,15 @@
 
     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}
+    // (53: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 = [];
 
@@ -2009,21 +2071,25 @@
 
     	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[7]);
     		},
     		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*/ 121) {
     				each_value = /*left*/ ctx[0];
     				let i;
 
@@ -2035,7 +2101,7 @@
     					} 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);
     					}
     				}
 
@@ -2045,15 +2111,23 @@
 
     				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]);
+    			}
     		},
     		d(detaching) {
+    			if (detaching) detach(g);
     			destroy_each(each_blocks, detaching);
-    			if (detaching) detach(each_1_anchor);
     		}
     	};
     }
 
-    // (52:3) {#each left as v, i}
+    // (55:3) {#each left as v, i}
     function create_each_block$3(ctx) {
     	let rect;
     	let rect_x_value;
@@ -2064,29 +2138,28 @@
     	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[6][/*i*/ ctx[27]]);
+    			attr(rect, "y", rect_y_value = /*ry*/ ctx[5][/*i*/ ctx[27]]);
+    			attr(rect, "width", rect_width_value = /*rw*/ ctx[4][/*i*/ ctx[27]]);
+    			attr(rect, "height", rect_height_value = /*rh*/ ctx[3][/*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*/ 64 && rect_x_value !== (rect_x_value = /*rx*/ ctx[6][/*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*/ 32 && rect_y_value !== (rect_y_value = /*ry*/ ctx[5][/*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*/ 16 && rect_width_value !== (rect_width_value = /*rw*/ ctx[4][/*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*/ 8 && rect_height_value !== (rect_height_value = /*rh*/ ctx[3][/*i*/ ctx[27]])) {
     				attr(rect, "height", rect_height_value);
     			}
     		},
@@ -2098,7 +2171,7 @@
 
     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[6] !== undefined && /*ry*/ ctx[5] !== undefined && create_if_block$6(ctx);
 
     	return {
     		c() {
@@ -2110,7 +2183,7 @@
     			insert(target, if_block_anchor, anchor);
     		},
     		p(ctx, [dirty]) {
-    			if (/*rx*/ ctx[4] !== undefined && /*ry*/ ctx[3] !== undefined) {
+    			if (/*rx*/ ctx[6] !== undefined && /*ry*/ ctx[5] !== undefined) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
@@ -2149,6 +2222,8 @@
     	let { faceColor = Colors.PRIMARY } = $$props;
     	let { borderColor = faceColor } = $$props;
     	let { lineWidth = 1 } = $$props;
+    	let { title = "" } = $$props;
+    	let { style = "series_rect" } = $$props;
 
     	// styles for bars and labels
     	const barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
@@ -2177,46 +2252,50 @@
     	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(6, 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(5, 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(4, 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(3, rh = axes.scaleY(height, $yLim, $axesHeight, true));
     		}
     	};
 
     	return [
     		left,
+    		title,
+    		style,
     		rh,
     		rw,
     		ry,
@@ -2246,13 +2325,15 @@
 
     		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
     		});
     	}
     }
@@ -2279,6 +2360,7 @@
     		c() {
     			g = svg_element("g");
     			create_component(rectangles.$$.fragment);
+    			set_style(g, "pointer-events", "none");
     			attr(g, "class", "mdaplot__axes-box");
     		},
     		m(target, anchor) {
@@ -2692,17 +2774,22 @@
 
     /* 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) {
@@ -2711,22 +2798,26 @@
 
     	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) {
@@ -2737,7 +2828,7 @@
     					} 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);
     					}
     				}
 
@@ -2747,61 +2838,64 @@
 
     				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) {
@@ -2812,7 +2906,7 @@
 
     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() {
@@ -2824,7 +2918,7 @@
     			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 {
@@ -2865,11 +2959,13 @@
     	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.";
     	}
@@ -2878,30 +2974,32 @@
     	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));
@@ -2917,38 +3015,39 @@
     			}
     		}
 
-    		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,
@@ -2956,6 +3055,7 @@
     		scale,
     		xValues,
     		yValues,
+    		pos,
     		faceColor,
     		borderColor,
     		borderWidth,
@@ -2972,16 +3072,26 @@
     	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
+    		);
     	}
     }
 
@@ -3316,31 +3426,28 @@
     }
 
     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]) {
@@ -3351,11 +3458,8 @@
     			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;
@@ -3367,8 +3471,7 @@
     			current = false;
     		},
     		d(detaching) {
-    			if (detaching) detach(g);
-    			destroy_component(rectangles);
+    			destroy_component(rectangles, detaching);
     		}
     	};
     }
@@ -3487,11 +3590,10 @@
     /* 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;
 
@@ -3499,40 +3601,35 @@
     			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;
@@ -3544,8 +3641,7 @@
     			current = false;
     		},
     		d(detaching) {
-    			if (detaching) detach(g);
-    			destroy_component(textlabels);
+    			destroy_component(textlabels, detaching);
     		}
     	};
     }
@@ -3563,6 +3659,7 @@
     	// TODO: implement later
     	//export let labels = yValues;
     	//export let showLabels = "no"; // can be "no", "hover", "always"
+    	/* constants for internal use */
     	const markers = ["●", "◼", "▲", "▼", "⬥", "+", "*", "⨯"];
 
     	let markerSymbol;
@@ -3669,7 +3766,7 @@
     			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]);
     		},
@@ -3804,7 +3901,8 @@
     		}
 
     		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]}`);
     		}
     	};