margelo/react-native-graph

¿Qué es?

Funciones clave

• 01Gráficos de líneas renderizados con Skia y curvas Bézier cúbicas para suavizar los bordes.
• 02Transiciones animadas entre conjuntos de datos que se ejecutan en el hilo de la interfaz de usuario.
• 03Gesto de desplazamiento al mantener presionado para explorar los puntos, con callbacks de selección.
• 04Opción de renderizador estático para mostrar muchos gráficos en una lista de forma ligera.
• 05Punto de selección, indicador de punto final y etiquetas de los ejes superior e inferior personalizables.
• 06Rangos x e y fijos opcionales para mostrar un período o una escala de valores específicos.

Casos de uso

• Mostrar el historial de precios de tokens o activos en una billetera de criptomonedas o una aplicación de trading.
• Mostrar gráficos del rendimiento de acciones o carteras en una aplicación de React Native.
• Renderizar muchos gráficos pequeños tipo sparkline en una lista desplazable.
• Agregar una función interactiva para explorar los precios que actualice una etiqueta mientras el usuario arrastra el dedo por el gráfico.

Inicio rápido

1. 1

   Instala las dependencias peer Reanimated, Gesture Handler y Skia

   yarn add react-native-reanimated
2. 2

   Instala react-native-graph

   yarn add react-native-graph
3. 3

   Renderiza un componente LineGraph con tu arreglo de GraphPoint y una prop color

Antes de usarlo

• !Requiere que Reanimated, Gesture Handler y Skia estén instalados junto con el paquete.
• !El gesto de desplazamiento, las etiquetas, el punto de selección y el relleno con degradado solo funcionan si animated está establecido en true.
• !El gráfico no obtiene los datos; debes proporcionar los puntos por tu cuenta.
• !No se admiten valores de cadena categóricos en el eje x.

Temas

Preguntas frecuentes

¿Qué es react-native-graph?

Componente de gráficos de líneas para React Native basado en Skia, con animaciones, curvas Bézier cúbicas y exploración táctil. react-native-graph es un componente de gráficos de líneas para React Native, renderizado con el motor gráfico 2D Skia. Dibuja curvas Bézier cúbicas suaves y permite animar las transiciones entre conjuntos de datos. Las animaciones se ejecutan en el hilo de la interfaz de usuario y alcanzan hasta 120 FPS.

¿react-native-graph es gratuito? ¿Qué licencia tiene?

react-native-graph es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.

¿react-native-graph sigue mantenido?

Mantenimiento activo. El último commit de react-native-graph fue el 13 oct 2026.

¿Para qué puedo usar react-native-graph?

Mostrar el historial de precios de tokens o activos en una billetera de criptomonedas o una aplicación de trading. Mostrar gráficos del rendimiento de acciones o carteras en una aplicación de React Native. Renderizar muchos gráficos pequeños tipo sparkline en una lista desplazable. Agregar una función interactiva para explorar los precios que actualice una etiqueta mientras el usuario arrastra el dedo por el gráfico.

¿Cómo se instala react-native-graph?

Instala las dependencias peer Reanimated, Gesture Handler y Skia: yarn add react-native-reanimated Instala react-native-graph: yarn add react-native-graph Renderiza un componente LineGraph con tu arreglo de GraphPoint y una prop color

¿Dónde consigo react-native-graph?

El código fuente y las instrucciones de instalación están en GitHub: https://github.com/margelo/react-native-graph