Added moving average computation

README.md

@@ -17,16 +17,17 @@ Lightweight, canvas‑based charting library written in TypeScript, designed for
 The `createChartElement(seriesList, options)` function supports the following options:
 
 | Option            | Type                     | Description                                                                |
-|------------------|-------------------------------------|-----------------------------------------------------------------------------|
+|-------------------|--------------------------|----------------------------------------------------------------------------|
 | `width`           | `number`                 | Fixed chart width in pixels (optional, defaults to container width)        |
 | `height`          | `number`                 | Fixed chart height in pixels (optional, defaults to container height)      |
 | `min`             | `number`                 | Minimum Y-axis value (optional, auto-computed if not set)                  |
 | `max`             | `number`                 | Maximum Y-axis value (optional, auto-computed if not set)                  |
 | `showYAxis`       | `boolean`                | Whether to render Y-axis ticks and labels                                  |
 | `yTicks`          | `number`                 | Number of Y-axis ticks (default: `5`)                                      |
-| `backgroundColor`| `string`                            | Optional background fill color                                             |
+| `backgroundColor` | `string`                 | Optional background fill color                                             |
 | `maxTimeDelta`    | `number \| null`         | Gap in ms that breaks line continuity (default: `600`)                     |
 | `dateFormat`      | `(ts: number) => string` | Custom formatter for the cursor timestamp label                            |
+| `averageData`     | `number`                 | Compute simple moving average of lasy n data to smooth out line (optional) |
 
 ```ts
 // Example: format timestamp to full Czech date+time

package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Lightweight charting library for the browser and Node.js",
   "license": "MIT",
   "repository": {

src/index.ts

@@ -3,6 +3,21 @@ export type ChartSeries = {
     strokeColor?: string;
 };
 
+function averageData(data: [number, number][], windowSize: number = 5): [number, number][] {
+    if (data.length < windowSize) return data;
+    const result: [number, number][] = [];
+    for (let i = 0; i < data.length; i++) {
+        let sum = 0;
+        let count = 0;
+        for (let j = Math.max(0, i - Math.floor(windowSize / 2)); j <= Math.min(data.length - 1, i + Math.floor(windowSize / 2)); j++) {
+            sum += data[j][1];
+            count++;
+        }
+        result.push([data[i][0], sum / count]);
+    }
+    return result;
+}
+
 export function drawChart(
     ctx: CanvasRenderingContext2D,
     seriesList: ChartSeries[],
@@ -17,6 +32,7 @@ export function drawChart(
         cursorX?: number | null;
         maxTimeDelta?: number | null;
         dateFormat?: (ts: number) => string;
+        averageData?:number | null;
     }
 ): void {
     const {
@@ -62,7 +78,7 @@ export function drawChart(
     }
 
     for (const series of seriesList) {
-        const data = series.data;
+        const data  = averageData(series.data, opts.averageData ?? 1);
         const color = series.strokeColor || '#000';
         ctx.beginPath();
         ctx.strokeStyle = color;