Por ejemplo, tengo un gráfico de muestra como este

 import { VictoryChart, VictoryGroup, VictoryLine, VictoryScatter, VictoryTheme } from "victory"; export default function App() { return ( <div> <VictoryChart> <VictoryGroup data={[ { x: 1, y: 2 }, { x: 1, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, { x: 6, y: 2 }, { x: 7, y: 3 }, { x: 8, y: 5 }, { x: 9, y: 4 }, { x: 10, y: 7 } ]} color="blue" > <VictoryLine style={{ data: { stroke: "#c43a31" }, parent: { border: "1px solid #ccc" } }} /> <VictoryScatter size={6} symbol="star" /> </VictoryGroup> </VictoryChart> </div> ); }

Y se muestra así

El problema es que mis datos x contain date and time , por lo que si los convierto a la fecha, se mostrarán en el mismo punto que el gráfico anterior.

Por ejemplo, si x es 17/5/2021 11:11:11AM y otro punto es 17/5/2021 12:11:11AM , cuando se convierte a la fecha, muestra el mismo punto. Quiero mostrar la base de datos también a tiempo, ¿cómo puedo hacer eso? El formato de la fecha es algo como esto.

 [ "2021-05-17 14:32:27", "2021-05-21 09:33:44", "2021-05-26 09:05:47", "2021-05-30 00:00:00", "2021-06-04 10:27:53", "2021-06-08 11:03:06", "2021-06-12 07:25:37", "2021-06-16 12:28:03", "2021-06-21 12:44:47", "2021-06-24 10:03:24", "2021-06-28 08:22:59", "2021-07-02 11:08:46", "2021-07-09 14:28:26", "2021-07-20 00:00:00", "2021-07-31 00:00:00", "2021-08-11 00:00:00", "2021-08-22 00:00:00", "2021-09-02 00:00:00", "2021-09-13 00:00:00" ]

Y quiero que se muestre algo como esto

Como puede ver, hay un punto entre el día 8 y el 9. ¿Cómo puedo hacer eso? Muchas gracias, aquí está la caja de arena de muestra.

https://codesandbox.io/s/charming-snow-yyc1h?file=/src/App.js:0-857