svelte-plots-basic 3.4.0 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 `svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for making simple responsive 2D and 3D plots/charts. The plots are created by generating [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) inside HTML document.
 
-One can think of this library as "Lego" bricks for plots. It has two groups of components: for 2D and for 3D plots. The 2D components are more developed while 3D components remain quite basic. In addition to `svelte`, the package has one direct dependence, [mdatools-js](https://github.com/svkucheryavski/mdatools-js) library, which is used for vector/matrix operations, statistics, and other manipulations with data values.
+One can think of this library as "Lego" bricks for plots. It has two groups of components: for 2D and for 3D plots. The 2D components are more developed while 3D components remain quite basic. In addition to `svelte`, the package requires the [mdatools-js](https://github.com/svkucheryavski/mdatools-js) library as a peer dependency. It is used for vector/matrix operations, statistics, and other manipulations with data values.
 
 
 ## Showcase
@@ -15,6 +15,14 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 4.0.0
+
+* Added horizontal legend layout and improved legend sizing and alignment.
+* Improved PNG/SVG export reliability, export-dialog accessibility, and clipboard handling.
+* Strengthened validation, automatic axis ticks, marker rendering, and component cleanup.
+* Made subscripts, superscripts, and tick-factor labels consistent across modern browsers.
+* Updated to `mdatools ^1.5.0`, now declared as a peer dependency to prevent incompatible duplicate instances.
+
 ### 3.4.0
 
 * Added the `plotActions` property to `Axes` for adding custom buttons to the download panel.
@@ -220,7 +228,7 @@ You can also define tick positions and corresponding labels manually. Tick posit
 
 ```svelte
 <Axes limX={[2019, 2026]} limY={[0, 60000]}>
-   <Xaxis ticks={[2023, 2024, 2025]} tickLabels={['Past', 'Present', 'Future']} />
+   <XAxis ticks={[2023, 2024, 2025]} tickLabels={['Past', 'Present', 'Future']} />
 </Axes>
 ```
 
@@ -620,7 +628,7 @@ Here is an example:
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Area } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Area } from 'svelte-plots-basic/2d';
 
    const xValues = [3, 2, 2.5, 4, 5.5, 6, 5];
    const yValues = [1, 3, 4, 5, 4, 3, 1];
@@ -677,7 +685,7 @@ Here is an example:
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Heatmap } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Heatmap } from 'svelte-plots-basic/2d';
    import { Matrix } from 'mdatools/arrays';
 
    // create 5 x 10 matrix filled with normally distributed random values
@@ -729,7 +737,7 @@ Colormap legend can be used together with `<Heatmap>` or any other color groupin
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Heatmap, ColormapLegend } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Heatmap, ColormapLegend } from 'svelte-plots-basic/2d';
    import { Matrix } from 'mdatools/arrays';
 
    // create 5 x 10 matrix filled with normally distributed random values
@@ -789,16 +797,16 @@ Here is an example:
    const y3 = x.apply(v => Math.pow(v, 4));
 
    // define properties of each series
-   line1Props = {lineType: 3, lineColor: 'red'};
-   line2Props = {lineColor: 'blue', lineType: 1};
-   point2Props = {lineColor: 'blue', faceColor: 'white'};
-   point3Props = {marker: 5, lineColor: 'green', faceColor: 'yellow'};
+   const line1Props = {lineType: 3, lineColor: 'red'};
+   const line2Props = {lineColor: 'blue', lineType: 1};
+   const point2Props = {lineColor: 'blue', faceColor: 'white'};
+   const point3Props = {marker: 5, lineColor: 'green', faceColor: 'yellow'};
 
    // legend items
-   items = [
-      {label: 'y=x^2', line: lines1Props },
-      {label: "y=x^3", line: lines2Props, point: points2Props },
-      {label: "y=x^4", point: points2Props },
+   const items = [
+      {label: 'y=x^2', line: line1Props },
+      {label: "y=x^3", line: line2Props, point: point2Props },
+      {label: "y=x^4", point: point3Props },
    ];
 </script>
 
@@ -812,7 +820,7 @@ Here is an example:
    <Points xValues={x} yValues={y2} {...point2Props} />
 
    <!-- series 3: markers in form of diamonds with green stroke and yellow fill -->
-   <Points xValues={x} yValues={y3} {...points3Props} />
+   <Points xValues={x} yValues={y3} {...point3Props} />
 
    <!-- legend with one JSON for each series -->
    <Legend position="right" {items} />
@@ -826,12 +834,21 @@ Check this example in Svelte REPL: [plots-legend](https://svelte.dev/playground/
 
 The `position` parameter can be one of the follows: `'topleft'`, `'top'`, `'topright'`, `'right'`, `'bottomright'` and so on.
 
+By default, legend items are arranged vertically. Set `orientation="horizontal"` to arrange them in a single row, which is especially useful with the `top` and `bottom` positions:
+
+```svelte
+<Legend position="top" orientation="horizontal" {items} />
+```
+
+The horizontal layout does not wrap items onto additional rows, so a large number of items or long labels may require more plot width.
+
 The component has also properties which changes it apearance, here is the full list:
 
  Property name | Default value | Description
 --|--|--
  `items` |  | array with JSON properties of legend items
  `position` | `'topleft'` | position of the legend element inside plotting area
+ `orientation` | `'vertical'` | arrangement of legend items: `'vertical'` or `'horizontal'`
  `lineColor` | `'#303030'` | color of the legend box line
  `lineWidth` | `1` | width (thickness) of the legend box line
  `faceColor` | `'#fff'` | background color of the legend box

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.4.0",
+   "version": "4.0.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,
@@ -20,14 +20,13 @@
       "./3d/*.svelte":  "./src/3d/*.svelte"
    },
    "devDependencies": {
-      "svelte": "^5.x.x"
+      "mdatools": "^1.5.0",
+      "svelte": "^5.56.8"
    },
    "peerDependencies": {
+      "mdatools": "^1.5.0",
       "svelte": "^5.0.0"
    },
-   "dependencies": {
-      "mdatools": "^1.x.x"
-   },
    "keywords": [
       "svelte",
       "plots",

package/src/2d/Area.svelte

@@ -2,12 +2,12 @@
 @component Adds a closed polygon (area).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the polygon's points.
-   - `yValues` - array of vector with y-coordinates of the polygon's points.
-   - `lineWidth` - width (thickness) of the polygon's line in pixels, defailt: `1`.
+   - `xValues` - array or vector with x-coordinates of the polygon's points.
+   - `yValues` - array or vector with y-coordinates of the polygon's points.
+   - `lineWidth` - width (thickness) of the polygon's line in pixels, default: `1`.
    - `lineColor` - line color, default: `Colors.PRIMARY`.
    - `lineType` -  type of line (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
-   - `facColor` - face (fill) color of the polygon, default: `'transparent'`.
+   - `faceColor` - face (fill) color of the polygon, default: `'transparent'`.
    - `opacity` - opacity of the face color, default: `1`.
    - `onclick` - function (callback) to be called when user clicks on a polygon.
 
@@ -29,7 +29,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick, transformCoords } from '../methods';
+   import { val2p, checkCoords, handleClick, transformCoords, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
@@ -38,7 +38,7 @@
       lineColor = Colors.PRIMARY,    // color of segment lines
       lineType = 1,                  // type of segment lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
       lineWidth = 1,                 // width (thickness) of segment lines
-      faceColor = 'transparent',     // color of segment lines
+      faceColor = 'transparent',     // face (fill) color of the polygon
       opacity = 1,                   // opacity of the area color
       onclick,                       // function to be called if onclick event fires
    } = $props();
@@ -46,6 +46,7 @@
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Area'));
    const yv = $derived(xv ? checkCoords(yValues, 'Area', xv.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Area'));
 
    // get axes context and compute coordinates of polyline
    const axes = getContext('axes');
@@ -55,7 +56,7 @@
    const xs = $derived(xv ? transformCoords(xv.subset(1), axes.tX()) : null);
    const pa = $derived(p && xs && ys ? xs + ',' + ys + ' ' + p + ' ' + xs + ',' + ys : null);
 
-   const areaStyleStr = $derived(`opacity:${opacity};fill:${faceColor};stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType - 1]}`);
+   const areaStyleStr = $derived(`opacity:${opacity};fill:${faceColor};stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if pa}

package/src/2d/Axes.svelte

@@ -5,7 +5,7 @@
    - `limX` - array with limits for x-axis (in plot units), default: `[0, 1]`.
    - `limY` - array with limits for y-axis (in plot units), default: `[0, 1]`.
    - `title` - title of the plot (string).
-   - `margins` - array with relative margins (bottom, left, top, right), default `[1.0, 0.85, 0.5, 0.5]`.
+   - `margins` - array with relative margins (bottom, left, top, right), default `[1.0, 1.1, 0.55, 0.60]`.
 
    Properties for downloading the plot as PNG or SVG file or copying it to clipboard:
    - `downloadLinks` - how to show download links panel (`'none'` - default, `'hover'`, `'fixed'`).
@@ -13,8 +13,8 @@
    - `pngWidth` - width of PNG image in cm, default `8`
    - `pngHeight` - height of PNG image in cm, default `8`.
    - `pngRes` - resolution of PNG image (pixels per inch), default `300`.
-   - `clipboardWidth` - width of plot image to copy to clipboard in pixels.
-   - `clipboardHeight` - height of plot image to copy to clipboard in pixels.Axes
+   - `clipboardWidth` - width of plot image to copy to clipboard in pixels, default `1200`.
+   - `clipboardHeight` - height of plot image to copy to clipboard in pixels, default `800`.
 
    Example:
 
@@ -23,7 +23,7 @@
       import {Axes} from 'svelte-plots-basic/2d';
    </script>
 
-   <Axes limX={[2000, 2050]} limY={[0, 100]} title="GDP of contries" >
+   <Axes limX={[2000, 2050]} limY={[0, 100]} title="GDP of countries" >
    </Axes>
    ```
 -->
@@ -101,7 +101,7 @@
 
    /* handler for mouse  events */
    function handleMouse(e, f) {
-      if (f && e.target.id == "axes-box") {
+      if (f && e.target.id === "axes-box") {
          const x = invTransformCoords([e.offsetX - left], tX)[0];
          const y = invTransformCoords([e.offsetY - top], tY)[0];
          f(x, y);
@@ -307,7 +307,7 @@
       <text {x} y={coords.ltop} dx="1.2em" dy="-0.25em" dominant-baseline="hanging"
          fill={params.labelColor}
          font-size="{params.fontSize}em"
-         text-anchor="end"
+         text-anchor="start"
       >{@html getTickFactorLabel(params.labelsFactor)}</text>
    {/if}
 {/snippet}
@@ -316,14 +316,16 @@
 {#snippet glgSnippet(params, coords)}
    {@const elw = coords.elw + 2 * coords.elp}
    {@const elp = coords.elp}
+   {@const elx = coords.elx}
    {@const elh = coords.elh}
    {@const ely = coords.ely}
+   {@const eliw = coords.eliw}
 
    <svg x={coords.lgl} y={coords.lgt} height={coords.lgh} width={coords.lgw}>
       <rect height="100%" width="100%" fill={params.faceColor} stroke={params.lineColor} stroke-width={params.lineWidth} />
 
       {#each params.items as item, i}
-      <svg x={0} y={ely[i]} width={coords.lgw} height={elh[i]}>
+      <svg x={elx[i]} y={ely[i]} width={eliw[i]} height={elh[i]}>
 
          <!-- line -->
          {#if item.line}
@@ -532,7 +534,7 @@
    </p>
    {:else}
    <div class="download-links">
-      <button type="button" onclick={handleClickSVG}>↓   svg</button>
+      <button type="button" onclick={handleClickSVG}>↓ svg</button>
       <button type="button" onclick={handleClickPNG}>↓ png</button>
       <button type="button" onclick={handleClickPNGAdvanced}>↓ png+</button>
       <button type="button" onclick={handleClickCopy}>⧉ copy</button>

package/src/2d/AxisLines.svelte

@@ -3,21 +3,19 @@
 
    Main properties:
    - `lineCoords` - coordinates of the line segments as 2D array.
-   - `lineColor` - color of the box line, default: `Colors.DARKGRAY`.
-   - `lineWidth` - width of box line in pixels, default: `1`.
+   - `lineColor` - color of the line segments, default: `Colors.DARKGRAY`.
+   - `lineWidth` - width of the line segments in pixels, default: `1`.
    - `lineType` - line type (`1` - solid (default), `2` - dashed, `3` - dotted, `4` - dashdot).
    - `className` - string with classname to be added to `<g></g>` tag wrapping the lines.
 
    **Description:**
 
-   The coordinates msut be provided in form of nested arrays. Each element of this array contains
+   The coordinates must be provided in form of nested arrays. Each element of this array contains
    `Vector` or `Array` with the coordinates in world (not screen) coordinate system:
    - `lineCoords[0][0]` - x-coordinates of start points of segments.
    - `lineCoords[1][0]` - x-coordinates of end points of segments.
    - `lineCoords[0][1]` - y-coordinates of start points of segments.
    - `lineCoords[1][1]` - y-coordinates of end points of segments.
-
-   ```
 -->
 <script>
    import { getContext } from 'svelte';
@@ -33,7 +31,7 @@
       className = ''                 // CSS class name for the component
    } = $props();
 
-   // get axes context and adjust x margins
+   // get axes context for coordinate transforms
    const axes = getContext('axes');
 
    // reactive variables for coordinates of axis lines

package/src/2d/AxisTickLabels.svelte

@@ -16,8 +16,6 @@
    - `tickCoords[1][0]` - x-coordinates of end points of tick segments.
    - `tickCoords[0][1]` - y-coordinates of start points of tick segments.
    - `tickCoords[1][1]` - y-coordinates of end points of tick segments.
-
-   ```
 -->
 <script>
 
@@ -57,7 +55,7 @@
    {/each}
    {:else if las === 2 && pos === 1}
    {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]} dx={-dy/2} dy={0} transform={`rotate(-90, ${x[i]}, ${y[i]})`} text-anchor={"end"}>{@html tickLabels[i]}</text>
+      <text data-id={i} x={x[i]} y={y[i]} dx={-dy/2} dy={0} transform={`rotate(-90, ${x[i]}, ${y[i]})`} text-anchor="end">{@html tickLabels[i]}</text>
    {/each}
    {:else}
    {#each x as v, i}

package/src/2d/Bars.svelte

@@ -45,25 +45,46 @@
       onclick
    } = $props();
 
+   function toNumber(value) {
+      const canConvert =
+         typeof value === 'number' ||
+         (typeof value === 'string' && value.trim() !== '');
+
+      return canConvert ? Number(value) : NaN;
+   }
+
    const bw = $derived.by(() => {
-      if (barWidth <= 0 || barWidth > 1) {
-         console.error('Bars: parameter "barWidth" should be between 0 and 1.');
+      const value = toNumber(barWidth);
+      if (!Number.isFinite(value) || value <= 0 || value > 1) {
+         console.error('Bars: parameter "barWidth" must be a finite number greater than 0 and no greater than 1.');
+         return null;
+      }
+      return value;
+   });
+
+   const exactWidth = $derived.by(() => {
+      if (barWidthExact == null) return {provided: false, value: null};
+
+      const value = toNumber(barWidthExact);
+      if (!Number.isFinite(value) || value <= 0) {
+         console.error('Bars: parameter "barWidthExact" must be a finite positive number.');
          return null;
       }
-      return barWidth;
+
+      return {provided: true, value};
    });
 
    const x = $derived.by(() => {
-      if (!bw) return null;
+      if (bw === null || exactWidth === null) return null;
       const xv = checkCoords(xValues, 'BarSeries');
       if (!xv) return null;
       const n = xv.length;
       if (n < 1) return null;
 
       let w;
-      if (barWidthExact) {
-         w = barWidthExact;
-      } else if (n == 1) {
+      if (exactWidth.provided) {
+         w = exactWidth.value;
+      } else if (n === 1) {
          console.error('Bars: if only one bar must be shown, value for property "barWidthExact" should be provided.');
          return null;
       } else {
@@ -74,7 +95,7 @@
          }
       }
 
-      w = w * barWidth;
+      w = w * bw;
       const whalf = w / 2;
       const left = Vector.zeros(n);
       const width = Vector.zeros(n);
@@ -113,6 +134,6 @@
 </script>
 
 {#if isOk}
-<Rectangles className="series series-bar" left={x.left} width={x.width} top={y.top} height={y.height}
+<Rectangles className="series-bar" left={x.left} width={x.width} top={y.top} height={y.height}
    lineWidth={lineWidth} {lineColor} {faceColor} {onclick} />
 {/if}

package/src/2d/Heatmap.svelte

@@ -1,5 +1,5 @@
 <!--
-@component Adds a heatmap visializing values of a matrix.
+@component Adds a heatmap visualizing values of a matrix.
 
    Main properties:
    - `values` - matrix (object of class `Matrix` from `mdatools` package) with values to visualize.
@@ -13,7 +13,7 @@
       import { Matrix } from 'mdatools/arrays';
       import { Axes, Heatmap } from 'svelte-plots-basic/2d';
 
-      // create matrix with 5 rows and 10 columns filled with 5random values.
+      // create matrix with 5 rows and 10 columns filled with random values.
       const x = Matrix.rand(5, 10);
    </script>
 
@@ -91,7 +91,14 @@
 
 
    // check that values are provided as a matrix
-   let v = $derived(ismatrix(values) && values.nrows > 0 && values.ncols > 0 ? values : null);
+   const v = $derived.by(() => {
+      if (!ismatrix(values) || values.nrows < 1 || values.ncols < 1) {
+         console.error('Heatmap: parameter "values" must be a non-empty Matrix.');
+         return null;
+      }
+
+      return values;
+   });
 
    // check and process left values for breaks
    let lb = $derived.by(() => {
@@ -121,9 +128,11 @@
    let lc = $derived.by(() => {
       if (!lb) return null;
 
-      if (colmap) {
-         if (!Array.isArray(colmap)) {
-            console.error('Heatmap: parameter "colmap" must be array with colors.');
+      if (colmap !== null && colmap !== undefined) {
+         if (!Array.isArray(colmap) || colmap.some(color =>
+            typeof color !== 'string' || color.trim() === ''
+         )) {
+            console.error('Heatmap: parameter "colmap" must be an array of non-empty color strings.');
             return null;
          }
          if (colmap.length !== lb.length - 1) {

package/src/2d/Legend.svelte

@@ -4,6 +4,7 @@
    Main properties:
    - `items` - array with text labels and their visual properties for each legend element.
    - `position` - position of the legend ("topleft", "top", "topright", "right", etc), default: `"topleft"`.
+   - `orientation` - arrangement of legend items (`"vertical"` or `"horizontal"`), default: `"vertical"`.
    - `lineColor` - color of the legend box line, default: `Colors.LEGEND`.
    - `lineWidth` - width (thickness) of the legend box line in pixels: `1`.
    - `faceColor` - color of the legend box background: `'#fff'`.
@@ -13,41 +14,47 @@
 
    ```svelte
    <script>
-      import {Vector} from 'mdatools/array';
+      import { Vector } from 'mdatools/arrays';
+      import { Axes, Box, Legend, Lines, Points, XAxis, YAxis } from 'svelte-plots-basic/2d';
 
       const x = Vector.seq(-10, 10, 0.1);
       const y1 = x.apply(v => Math.cos(v));
       const y2 = x.apply(v => Math.sin(v));
+
+      const line1 = { lineType: 3, lineColor: 'red' };
+      const line2 = { lineType: 1, lineColor: 'blue' };
+      const point2 = { marker: 1, faceColor: 'white', lineColor: 'blue' };
+
+      const items = [
+         { label: 'cos(x)', line: line1 },
+         { label: 'sin(x)', line: line2, point: point2 }
+      ];
    </script>
 
    <Axes limX={[-10, 10]} limY={[-1.1, 1.1]} >
 
-      <Lines xValues={x} yValues={y1} lineColor="red" lineType="3" />
-      <Lines xValues={x} yValues={y2} lineColor="blue" lineType="1" />
-      <Points xValues={x} yValues={y2} faceColor="white" borderColor="blue" />
+      <Lines xValues={x} yValues={y1} {...line1} />
+      <Lines xValues={x} yValues={y2} {...line2} />
+      <Points xValues={x} yValues={y2} {...point2} />
 
-      <Legend
-         position="topright"
-         items = {[
-            {"label": "cos(x)", "lineType": 1, "lineColor": "red"},
-            {"label": "sin(x)", "lineType": 1, "lineColor": "blue", "marker": 1, "faceColor": "white", "borderColor": "blue"},
-         ]}
-      />
+      <Legend position="top" orientation="horizontal" {items} />
 
       <Box />
       <XAxis label="x" showGrid={true} />
       <YAxis label="f(x)" showGrid={true} />
    </Axes>
+   ```
 -->
 <script>
    import { getContext, onDestroy } from 'svelte';
    import { Colors, MARKER_SYMBOLS } from '../constants';
-   import { text2svg } from '../methods';
+   import { text2svg, normalizeLineType } from '../methods';
 
    let {
       items,                     // array with text labels and their visual properties for each legend element.
       show = true,               // logical, use to hide the element
-	   position = 'topleft',      // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+      position = 'topleft',      // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+      orientation = 'vertical', // arrangement of legend items ("vertical" or "horizontal")
       lineColor = Colors.LEGEND, // color of the legend box line
       lineWidth = 1,             // width (thickness) of the legend box line
       faceColor = '#fff',        // background color of the legend box
@@ -70,6 +77,21 @@
       return position;
    }
 
+   /* check if user provided orientation is correct */
+   function checkOrientation(orientation) {
+
+      if (typeof orientation !== 'string') {
+         console.error('Legend: value of "orientation" must be a string.');
+         return null;
+      }
+
+      if (!['vertical', 'horizontal'].includes(orientation)) {
+         console.error('Legend: wrong value of "orientation" property');
+         return null;
+      }
+      return orientation;
+   }
+
    /* check if user provided items are correct, transform text labels and set default values if they are absent */
    function processItems(items) {
 
@@ -96,25 +118,35 @@
          // set default values for lines
          if (item.line) {
             item.line = {...item.line};
-            if (!item.line.lineType) item.line.lineType = 1
-            if (!(item.line.lineType > 0 && item.line.lineType <= 4)) {
-               console.error('Legend: parameter "lineType" for legend item ' + (i + 1) + ' is incorrect.');
-            }
+            item.line.lineType = normalizeLineType(
+               item.line.lineType ?? 1,
+               `Legend item ${i + 1}`
+            );
             item.line.lineColor = item.line.lineColor ? item.line.lineColor : Colors.PRIMARY;
-            item.line.lineWidth = item.line.lineWidth ? item.line.lineWidth : 1;
+            item.line.lineWidth = item.line.lineWidth ?? 1;
          }
 
          // set default values for markers
          if (item.point) {
             item.point = {...item.point};
-            if (!item.point.marker) item.point.marker = 1
-            if (!(item.point.marker > 0 && item.point.marker <= MARKER_SYMBOLS.length)) {
-               console.error('Legend: parameter "marker" for legend item ' + (i + 1) + ' is incorrect.');
+            const canConvertMarker =
+               typeof item.point.marker === 'number' ||
+               (typeof item.point.marker === 'string' && item.point.marker.trim() !== '');
+            const marker = item.point.marker == null ? 1 :
+               canConvertMarker ? Number(item.point.marker) : NaN;
+
+            if (!Number.isInteger(marker) || marker < 1 || marker > MARKER_SYMBOLS.length) {
+               console.error(
+                  `Legend item ${i + 1}: parameter "marker" must be a whole number from 1 to ${MARKER_SYMBOLS.length}.`
+               );
+               item.point = null;
+            } else {
+               item.point.marker = marker;
+               item.point.faceColor = item.point.faceColor ? item.point.faceColor : 'transparent';
+               item.point.lineWidth = item.point.lineWidth ?? 1;
+               item.point.markerSize = item.point.markerSize ?? 1;
+               item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
             }
-            item.point.faceColor =  item.point.faceColor ? item.point.faceColor : 'transparent';
-            item.point.lineWidth = item.point.lineWidth ? item.point.lineWidth : 1;
-            item.point.markerSize = item.point.markerSize ? item.point.markerSize : 1;
-            item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
          }
 
          result.push(item);
@@ -122,14 +154,26 @@
       return result;
    }
 
-   // get context and update group legend parameters reactivey
+   // Validate and transform only when the corresponding input changes.
+   const processedItems = $derived(processItems(items));
+   const validPosition = $derived(checkPosition(position));
+   const validOrientation = $derived(checkOrientation(orientation));
+
+   // get context and update group legend parameters reactively
    const axes = getContext('axes');
    $effect(() => {
-      const newItems = processItems(items);
-      const newPosition = checkPosition(position);
       axes.setGroupLegend(
-         newItems && newPosition ?
-         {show, position, items: newItems, lineColor, faceColor, lineWidth, fontSize} :
+         processedItems && validPosition && validOrientation ?
+         {
+            show,
+            position: validPosition,
+            orientation: validOrientation,
+            items: processedItems,
+            lineColor,
+            faceColor,
+            lineWidth,
+            fontSize
+         } :
          {show: false, position: null, items: null}
       );
    });

package/src/2d/Lines.svelte

@@ -2,10 +2,10 @@
 @component Adds a series of lines connecting points with provided coordinates (polyline).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - array of vector with y-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - array or vector with y-coordinates of the points.
    - `lineColor` - lines color, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineWidth` - width (thickness) of the lines in pixels, default: `1`.
    - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
    - `onclick` - function (callback) to be called when user clicks on a polyline.
 
@@ -27,7 +27,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick } from '../methods';
+   import { val2p, checkCoords, handleClick, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
@@ -43,13 +43,14 @@
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Lines'));
    const yv = $derived(xv ? checkCoords(yValues, 'Lines', xv.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Lines'));
 
    // get axes context and compute coordinates of polyline
    const axes = getContext('axes');
    const p = $derived(xv && yv ? val2p(xv, yv, axes.tX(), axes.tY()) : null);
 
    // reactive variables for coordinates of data points in pixels
-   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if p}