@opendata-ai/openchart-engine 2.0.0 → 2.2.0

package/src/charts/__tests__/utils.test.ts

@@ -0,0 +1,195 @@
+import { describe, expect, it } from 'vitest';
+import { sortByField } from '../utils';
+
+describe('sortByField', () => {
+  // -----------------------------------------------------------------------
+  // Numeric sorting
+  // -----------------------------------------------------------------------
+
+  it('sorts numeric values ascending', () => {
+    const data = [{ v: 30 }, { v: 10 }, { v: 20 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([10, 20, 30]);
+  });
+
+  it('sorts negative and positive numbers correctly', () => {
+    const data = [{ v: 5 }, { v: -3 }, { v: 0 }, { v: -1 }, { v: 2 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([-3, -1, 0, 2, 5]);
+  });
+
+  it('sorts floating point numbers correctly', () => {
+    const data = [{ v: 1.5 }, { v: 1.1 }, { v: 1.9 }, { v: 1.3 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([1.1, 1.3, 1.5, 1.9]);
+  });
+
+  // -----------------------------------------------------------------------
+  // Date string sorting (ISO format)
+  // -----------------------------------------------------------------------
+
+  it('sorts ISO date strings (YYYY-MM-DD) lexicographically', () => {
+    const data = [
+      { date: '2022-01-01', v: 1 },
+      { date: '2020-06-15', v: 2 },
+      { date: '2021-03-10', v: 3 },
+    ];
+    const sorted = sortByField(data, 'date');
+    expect(sorted.map((r) => r.date)).toEqual(['2020-06-15', '2021-03-10', '2022-01-01']);
+  });
+
+  it('sorts dates within the same year by month and day', () => {
+    const data = [
+      { date: '2020-12-25' },
+      { date: '2020-01-01' },
+      { date: '2020-06-15' },
+      { date: '2020-03-20' },
+    ];
+    const sorted = sortByField(data, 'date');
+    expect(sorted.map((r) => r.date)).toEqual([
+      '2020-01-01',
+      '2020-03-20',
+      '2020-06-15',
+      '2020-12-25',
+    ]);
+  });
+
+  it('sorts full ISO datetime strings with time component', () => {
+    const data = [
+      { ts: '2020-01-01T23:59:59Z' },
+      { ts: '2020-01-01T00:00:00Z' },
+      { ts: '2020-01-01T12:30:00Z' },
+    ];
+    const sorted = sortByField(data, 'ts');
+    expect(sorted.map((r) => r.ts)).toEqual([
+      '2020-01-01T00:00:00Z',
+      '2020-01-01T12:30:00Z',
+      '2020-01-01T23:59:59Z',
+    ]);
+  });
+
+  it('sorts reverse-ordered dates correctly', () => {
+    const data = [
+      { date: '2025-01-01' },
+      { date: '2024-01-01' },
+      { date: '2023-01-01' },
+      { date: '2022-01-01' },
+    ];
+    const sorted = sortByField(data, 'date');
+    expect(sorted.map((r) => r.date)).toEqual([
+      '2022-01-01',
+      '2023-01-01',
+      '2024-01-01',
+      '2025-01-01',
+    ]);
+  });
+
+  // -----------------------------------------------------------------------
+  // String-encoded numbers (year columns from CSV data)
+  // -----------------------------------------------------------------------
+
+  it('sorts string-encoded year numbers numerically', () => {
+    const data = [{ year: '2022' }, { year: '2020' }, { year: '2021' }];
+    const sorted = sortByField(data, 'year');
+    expect(sorted.map((r) => r.year)).toEqual(['2020', '2021', '2022']);
+  });
+
+  it('sorts string-encoded decimal numbers numerically', () => {
+    const data = [{ v: '10.5' }, { v: '2.3' }, { v: '100.1' }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual(['2.3', '10.5', '100.1']);
+  });
+
+  // -----------------------------------------------------------------------
+  // Date objects
+  // -----------------------------------------------------------------------
+
+  it('sorts Date objects by timestamp', () => {
+    const d1 = new Date('2020-06-15T00:00:00');
+    const d2 = new Date('2021-06-15T00:00:00');
+    const d3 = new Date('2022-06-15T00:00:00');
+    const data = [{ d: d3 }, { d: d1 }, { d: d2 }];
+    const sorted = sortByField(data, 'd');
+    expect(sorted.map((r) => r.d)).toEqual([d1, d2, d3]);
+  });
+
+  // -----------------------------------------------------------------------
+  // Null / undefined handling
+  // -----------------------------------------------------------------------
+
+  it('pushes nulls to the end', () => {
+    const data = [{ v: null }, { v: 10 }, { v: 30 }, { v: null }, { v: 20 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([10, 20, 30, null, null]);
+  });
+
+  it('pushes undefined (missing field) to the end', () => {
+    const data = [{ other: 1 }, { v: 10, other: 2 }, { v: 20, other: 3 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([10, 20, undefined]);
+  });
+
+  it('handles all-null values without crashing', () => {
+    const data = [{ v: null }, { v: null }, { v: null }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted).toHaveLength(3);
+    expect(sorted.every((r) => r.v === null)).toBe(true);
+  });
+
+  // -----------------------------------------------------------------------
+  // Duplicate values
+  // -----------------------------------------------------------------------
+
+  it('handles duplicate values preserving both rows', () => {
+    const data = [{ v: 20 }, { v: 10 }, { v: 20 }, { v: 10 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([10, 10, 20, 20]);
+  });
+
+  it('handles duplicate date strings', () => {
+    const data = [
+      { date: '2021-01-01', id: 'c' },
+      { date: '2020-01-01', id: 'b' },
+      { date: '2021-01-01', id: 'a' },
+    ];
+    const sorted = sortByField(data, 'date');
+    // Both 2021 rows follow the 2020 row
+    expect(sorted[0].date).toBe('2020-01-01');
+    expect(sorted[1].date).toBe('2021-01-01');
+    expect(sorted[2].date).toBe('2021-01-01');
+  });
+
+  // -----------------------------------------------------------------------
+  // Edge cases
+  // -----------------------------------------------------------------------
+
+  it('returns a new array (no mutation)', () => {
+    const data = [{ v: 30 }, { v: 10 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted).not.toBe(data);
+    expect(data[0].v).toBe(30);
+  });
+
+  it('handles empty array', () => {
+    expect(sortByField([], 'v')).toEqual([]);
+  });
+
+  it('handles single element', () => {
+    const data = [{ v: 42 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted).toHaveLength(1);
+    expect(sorted[0].v).toBe(42);
+  });
+
+  it('handles already-sorted data', () => {
+    const data = [{ v: 1 }, { v: 2 }, { v: 3 }];
+    const sorted = sortByField(data, 'v');
+    expect(sorted.map((r) => r.v)).toEqual([1, 2, 3]);
+  });
+
+  it('sorts pure string values lexicographically', () => {
+    const data = [{ name: 'cherry' }, { name: 'apple' }, { name: 'banana' }];
+    const sorted = sortByField(data, 'name');
+    expect(sorted.map((r) => r.name)).toEqual(['apple', 'banana', 'cherry']);
+  });
+});

package/src/charts/line/__tests__/compute.test.ts

@@ -218,6 +218,182 @@ describe('computeLineMarks', () => {
     });
   });
 
+  describe('x-axis sorting', () => {
+    it('sorts unsorted temporal data so points increase left-to-right', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // Points should have monotonically increasing x pixel values
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts reverse-ordered dates correctly', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2025-01-01', value: 50 },
+          { date: '2024-01-01', value: 40 },
+          { date: '2023-01-01', value: 30 },
+          { date: '2022-01-01', value: 20 },
+          { date: '2021-01-01', value: 10 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      expect(lineMark.points).toHaveLength(5);
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts unsorted numeric x-axis data', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: 2022, value: 30 },
+          { date: 2020, value: 10 },
+          { date: 2021, value: 40 },
+        ],
+        encoding: {
+          x: { field: 'date', type: 'quantitative' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      for (let i = 1; i < lineMark.points.length; i++) {
+        expect(lineMark.points[i].x).toBeGreaterThan(lineMark.points[i - 1].x);
+      }
+    });
+
+    it('sorts each series independently in multi-series', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30, country: 'US' },
+          { date: '2020-01-01', value: 10, country: 'US' },
+          { date: '2021-01-01', value: 40, country: 'US' },
+          { date: '2022-01-01', value: 45, country: 'UK' },
+          { date: '2020-01-01', value: 15, country: 'UK' },
+          { date: '2021-01-01', value: 35, country: 'UK' },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMarks = marks.filter((m): m is LineMark => m.type === 'line');
+      for (const lm of lineMarks) {
+        for (let i = 1; i < lm.points.length; i++) {
+          expect(lm.points[i].x).toBeGreaterThan(lm.points[i - 1].x);
+        }
+      }
+    });
+
+    it('attaches data rows in sorted order on marks', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // The data array on the mark should be chronologically ordered
+      const dates = lineMark.data!.map((r) => r.date);
+      expect(dates).toEqual(['2020-01-01', '2021-01-01', '2022-01-01']);
+    });
+
+    it('sorts data before handling null y-value line breaks', () => {
+      // Unsorted data with a null in the middle chronologically.
+      // After sorting: 2020 (10), 2021 (null), 2022 (30) -> line breaks at 2021
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2021-01-01', value: null },
+          { date: '2020-01-01', value: 10 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMark = marks.find((m): m is LineMark => m.type === 'line')!;
+      // Null is excluded, so only 2 valid points
+      expect(lineMark.points).toHaveLength(2);
+      // The two valid points should still be left-to-right
+      expect(lineMark.points[1].x).toBeGreaterThan(lineMark.points[0].x);
+    });
+
+    it('produces identical output for already-sorted data', () => {
+      // Verify sorting doesn't break pre-sorted input (regression check)
+      const sorted = makeSingleSeriesSpec(); // already chronological
+      const shuffled: NormalizedChartSpec = {
+        ...sorted,
+        data: [
+          { date: '2021-01-01', value: 40 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2022-01-01', value: 30 },
+        ],
+      };
+
+      const sortedScales = computeScales(sorted, chartArea, sorted.data);
+      const sortedMarks = computeLineMarks(sorted, sortedScales, chartArea, fullStrategy);
+
+      const shuffledScales = computeScales(shuffled, chartArea, shuffled.data);
+      const shuffledMarks = computeLineMarks(shuffled, shuffledScales, chartArea, fullStrategy);
+
+      const sortedLine = sortedMarks.find((m): m is LineMark => m.type === 'line')!;
+      const shuffledLine = shuffledMarks.find((m): m is LineMark => m.type === 'line')!;
+
+      // Both should produce the same pixel positions
+      expect(sortedLine.points).toEqual(shuffledLine.points);
+    });
+
+    it('sorts within-year dates by month in multi-series', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2020-12-01', value: 30, country: 'US' },
+          { date: '2020-03-01', value: 10, country: 'US' },
+          { date: '2020-07-01', value: 20, country: 'US' },
+          { date: '2020-12-01', value: 45, country: 'UK' },
+          { date: '2020-03-01', value: 15, country: 'UK' },
+          { date: '2020-07-01', value: 25, country: 'UK' },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+      const lineMarks = marks.filter((m): m is LineMark => m.type === 'line');
+      expect(lineMarks).toHaveLength(2);
+
+      for (const lm of lineMarks) {
+        // Data rows should be Mar -> Jul -> Dec
+        const dates = lm.data!.map((r) => r.date);
+        expect(dates).toEqual(['2020-03-01', '2020-07-01', '2020-12-01']);
+      }
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
@@ -307,6 +483,122 @@ describe('computeAreaMarks', () => {
     expect(seriesKeys).toContain('UK');
   });
 
+  describe('x-axis sorting', () => {
+    it('sorts unsorted temporal data for single area', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      expect(marks).toHaveLength(1);
+      for (let i = 1; i < marks[0].topPoints.length; i++) {
+        expect(marks[0].topPoints[i].x).toBeGreaterThan(marks[0].topPoints[i - 1].x);
+      }
+    });
+
+    it('sorts unsorted temporal data for stacked area', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeMultiSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30, country: 'US' },
+          { date: '2020-01-01', value: 10, country: 'US' },
+          { date: '2021-01-01', value: 40, country: 'US' },
+          { date: '2022-01-01', value: 45, country: 'UK' },
+          { date: '2020-01-01', value: 15, country: 'UK' },
+          { date: '2021-01-01', value: 35, country: 'UK' },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      for (const mark of marks) {
+        for (let i = 1; i < mark.topPoints.length; i++) {
+          expect(mark.topPoints[i].x).toBeGreaterThan(mark.topPoints[i - 1].x);
+        }
+      }
+    });
+
+    it('attaches sorted data rows on single area marks', () => {
+      const spec: NormalizedChartSpec = {
+        ...makeSingleSeriesSpec(),
+        data: [
+          { date: '2022-01-01', value: 30 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2021-01-01', value: 40 },
+        ],
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      const dates = marks[0].data!.map((r) => r.date);
+      expect(dates).toEqual(['2020-01-01', '2021-01-01', '2022-01-01']);
+    });
+
+    it('sorts stacked area with 3+ series and shuffled dates', () => {
+      const spec: NormalizedChartSpec = {
+        type: 'line',
+        data: [
+          { date: '2022-01-01', value: 30, region: 'A' },
+          { date: '2020-01-01', value: 10, region: 'A' },
+          { date: '2021-01-01', value: 20, region: 'A' },
+          { date: '2021-01-01', value: 25, region: 'B' },
+          { date: '2022-01-01', value: 35, region: 'B' },
+          { date: '2020-01-01', value: 15, region: 'B' },
+          { date: '2022-01-01', value: 40, region: 'C' },
+          { date: '2020-01-01', value: 5, region: 'C' },
+          { date: '2021-01-01', value: 30, region: 'C' },
+        ],
+        encoding: {
+          x: { field: 'date', type: 'temporal' },
+          y: { field: 'value', type: 'quantitative' },
+          color: { field: 'region', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeAreaMarks(spec, scales, chartArea);
+
+      expect(marks).toHaveLength(3);
+      for (const mark of marks) {
+        for (let i = 1; i < mark.topPoints.length; i++) {
+          expect(mark.topPoints[i].x).toBeGreaterThan(mark.topPoints[i - 1].x);
+        }
+      }
+    });
+
+    it('produces identical output for pre-sorted and shuffled single area data', () => {
+      const preSorted = makeSingleSeriesSpec();
+      const shuffled: NormalizedChartSpec = {
+        ...preSorted,
+        data: [
+          { date: '2021-01-01', value: 40 },
+          { date: '2020-01-01', value: 10 },
+          { date: '2022-01-01', value: 30 },
+        ],
+      };
+
+      const preSortedScales = computeScales(preSorted, chartArea, preSorted.data);
+      const preSortedMarks = computeAreaMarks(preSorted, preSortedScales, chartArea);
+
+      const shuffledScales = computeScales(shuffled, chartArea, shuffled.data);
+      const shuffledMarks = computeAreaMarks(shuffled, shuffledScales, chartArea);
+
+      expect(preSortedMarks[0].topPoints).toEqual(shuffledMarks[0].topPoints);
+      expect(preSortedMarks[0].bottomPoints).toEqual(shuffledMarks[0].bottomPoints);
+    });
+  });
+
   it('stacked areas: each layer has different baselines', () => {
     const spec = makeMultiSeriesSpec();
     const scales = computeScales(spec, chartArea, spec.data);
@@ -320,6 +612,78 @@ describe('computeAreaMarks', () => {
       expect(firstBottom).not.toBe(secondBottom);
     }
   });
+
+  it('stacked areas: y-domain covers the stacked sum, not individual max', () => {
+    // Three series each with value 100 at the same x point. The stacked sum
+    // is 300, so the y-scale domain must go up to at least 300. Without the
+    // stacked domain fix, the domain only reaches 100 and the top layers clip.
+    const spec: NormalizedChartSpec = {
+      type: 'area',
+      data: [
+        { date: '2020-01-01', value: 100, group: 'A' },
+        { date: '2021-01-01', value: 100, group: 'A' },
+        { date: '2020-01-01', value: 100, group: 'B' },
+        { date: '2021-01-01', value: 100, group: 'B' },
+        { date: '2020-01-01', value: 100, group: 'C' },
+        { date: '2021-01-01', value: 100, group: 'C' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        color: { field: 'group', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    expect(marks).toHaveLength(3);
+
+    // The topmost layer's top points should be within the chart area, not
+    // clipped beyond it. With a proper stacked domain the y-scale covers
+    // 0..300 (niced), so all pixel positions stay within bounds.
+    const lastLayer = marks[marks.length - 1];
+    for (const pt of lastLayer.topPoints) {
+      expect(pt.y).toBeGreaterThanOrEqual(chartArea.y);
+      expect(pt.y).toBeLessThanOrEqual(chartArea.y + chartArea.height);
+    }
+  });
+
+  it('returns empty marks for unparseable temporal data', () => {
+    // Quarterly strings like '2022-Q1' are not valid Date strings. The engine
+    // should handle this gracefully (empty marks) rather than crashing or
+    // producing NaN-filled paths.
+    const spec: NormalizedChartSpec = {
+      type: 'area',
+      data: [
+        { quarter: '2022-Q1', revenue: 45, segment: 'Services' },
+        { quarter: '2022-Q2', revenue: 52, segment: 'Services' },
+        { quarter: '2022-Q1', revenue: 120, segment: 'Products' },
+        { quarter: '2022-Q2', revenue: 135, segment: 'Products' },
+      ],
+      encoding: {
+        x: { field: 'quarter', type: 'temporal' },
+        y: { field: 'revenue', type: 'quantitative' },
+        color: { field: 'segment', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    // Should produce empty marks since dates can't be parsed, not crash
+    expect(marks).toHaveLength(0);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/charts/line/area.ts

@@ -12,7 +12,7 @@ import { area, curveMonotoneX, line, stack, stackOffsetNone, stackOrderNone } fr
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, scaleValue } from '../utils';
+import { getColor, scaleValue, sortByField } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -64,10 +64,13 @@ function computeSingleArea(
   for (const [seriesKey, rows] of groups) {
     const color = getColor(scales, seriesKey);
 
+    // Sort rows by x-axis field so areas draw left-to-right
+    const sortedRows = sortByField(rows, xChannel.field);
+
     // Compute points, filtering out null values
     const validPoints: { x: number; yTop: number; yBottom: number; row: DataRow }[] = [];
 
-    for (const row of rows) {
+    for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
 
@@ -147,6 +150,9 @@ function computeStackedArea(
     return computeSingleArea(spec, scales, chartArea);
   }
 
+  // Sort data by x field so stacked areas render left-to-right
+  const sortedData = sortByField(spec.data, xChannel.field);
+
   // Collect unique series keys and x values, and build a lookup from
   // (x-value, series-key) -> original data row so stacked area marks
   // get original rows instead of pivot rows.
@@ -155,7 +161,7 @@ function computeStackedArea(
   const rowsByXSeries = new Map<string, DataRow>();
   const rowsByX = new Map<string, DataRow[]>();
 
-  for (const row of spec.data) {
+  for (const row of sortedData) {
     const xStr = String(row[xChannel.field]);
     const series = String(row[colorField]);
     seriesKeys.add(series);

package/src/charts/line/compute.ts

@@ -20,7 +20,7 @@ import { curveMonotoneX, line } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, groupByField, scaleValue } from '../utils';
+import { getColor, groupByField, scaleValue, sortByField } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -64,6 +64,9 @@ export function computeLineMarks(
   for (const [seriesKey, rows] of groups) {
     const color = getColor(scales, seriesKey);
 
+    // Sort rows by x-axis field so lines draw left-to-right
+    const sortedRows = sortByField(rows, xChannel.field);
+
     // Compute pixel positions for each data point, preserving nulls
     // for line break handling
     const pointsWithData: {
@@ -76,7 +79,7 @@ export function computeLineMarks(
     const segments: { x: number; y: number }[][] = [];
     let currentSegment: { x: number; y: number }[] = [];
 
-    for (const row of rows) {
+    for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);