diff --git a/web/calibrate/XyPlot.ts b/web/calibrate/XyPlot.ts
new file mode 100644
--- /dev/null
+++ b/web/calibrate/XyPlot.ts
@@ -0,0 +1,61 @@
+import debug from "debug";
+import * as echarts from "echarts";
+import { css, html, LitElement, PropertyValueMap } from "lit";
+import { customElement, property } from "lit/decorators.js";
+debug.enable("*");
+const log = debug("calibrate");
+
+@customElement("xy-plot")
+export class XyPlot extends LitElement {
+  static styles = [
+    css`
+      #chart {
+        width: 800px;
+        height: 300px;
+      }
+    `,
+  ];
+  chart!: echarts.ECharts;
+  @property() label: string = "";
+  @property() data: number[][] = [];
+ 
+  render() {
+    return html`
+      <fieldset>
+        <legend>${this.label}</legend>
+        <div id="chart"></div>
+      </fieldset>
+    `;
+  }
+
+  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
+    var chartDom = this.shadowRoot!.getElementById("chart")!;
+    this.chart = echarts.init(chartDom);
+    this.chart.setOption({
+      animation: false,
+      xAxis: {
+        type: "value",
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          name: "d",
+          data: [],
+          type: "line",
+        },
+      ],
+    });
+  }
+
+  clear() {
+    this.data.length = 0;
+  }
+  
+  insertPoint(x: number, y: number) {
+    this.data.push([x, y]);
+    this.data.sort((a, b) => a[0] - b[0]);
+    this.chart.setOption({ series: [{ name: "d", data: this.data }] });
+  }
+}