diff --git a/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx b/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx
index 0dc74211a..e42f01323 100644
--- a/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx
+++ b/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx
@@ -258,9 +258,9 @@ const ImagePlotChart = React.memo<{
         name: 'roi',
         hovertemplate: isAddRoi ? 'none' : 'cell id: %{z}',
         // hoverinfo: isAddRoi || pointClick.length ? 'none' : undefined,
-        colorscale: [...Array(timeDataMaxIndex)].map((_, i) => {
+        colorscale: [...Array(timeDataMaxIndex + 1)].map((_, i) => {
           const new_i = Math.floor(((i % 10) * 10 + i / 10) % 100)
-          const offset: number = i / (timeDataMaxIndex - 1)
+          const offset: number = i / timeDataMaxIndex
           const rgba = colorscaleRoi[new_i]
           const hex = rgba2hex(rgba, roiAlpha)
           return [offset, hex]
@@ -356,7 +356,7 @@ const ImagePlotChart = React.memo<{
         z: Number(point.z),
       })
     }
-    if (point.curveNumber >= 1 && point.z > 0) {
+    if (point.curveNumber >= 1 && point.z >= 0) {
       dispatch(
         setImageItemClikedDataId({
           itemId,
@@ -367,12 +367,12 @@ const ImagePlotChart = React.memo<{
   }
 
   const setSelectRoi = (point: PointClick) => {
-    if (!point.z) return
+    if (typeof point.z !== 'number' || point.z === -1) return
     const newPoints = [...pointClick, point]
     const newRoi = roiDataState.map((roi) => {
       return roi.map((element) => {
         if (newPoints.some((p) => p.z === element)) {
-          return 0
+          return -1
         }
         return element
       })
@@ -480,7 +480,7 @@ const ImagePlotChart = React.memo<{
     dispatch(resetAllOrderList())
     try {
       await mergeRoiApi(roiFilePath, {
-        ids: pointClick.map((point) => point.z - 1),
+        ids: pointClick.map((point) => point.z),
       })
     } catch {}
     setLoadingApi(false)
@@ -495,7 +495,7 @@ const ImagePlotChart = React.memo<{
     dispatch(resetAllOrderList())
     try {
       await deleteRoiApi(roiFilePath, {
-        ids: pointClick.map((point) => point.z - 1),
+        ids: pointClick.map((point) => point.z),
       })
     } catch {}
     setLoadingApi(false)
diff --git a/frontend/src/components/Workspace/Visualize/Plot/TimeSeriesPlot.tsx b/frontend/src/components/Workspace/Visualize/Plot/TimeSeriesPlot.tsx
index 47c41d2a9..93b893fb3 100644
--- a/frontend/src/components/Workspace/Visualize/Plot/TimeSeriesPlot.tsx
+++ b/frontend/src/components/Workspace/Visualize/Plot/TimeSeriesPlot.tsx
@@ -130,7 +130,7 @@ const TimeSeriesPlotImple = React.memo(() => {
     return Object.fromEntries(
       dataKeys.map((key) => {
       let y = newDataXrange.map((x) => newTimeSeriesData[key]?.[x])
-      const i = Number(key) - 1
+      const i = Number(key)
       const new_i = Math.floor((i % 10) * 10 + i / 10) % 100
       if (drawOrderList.includes(key) && offset) {
         const activeIdx: number = drawOrderList.findIndex((v) => v === key)