KLineCharts React Native

React Native обертка для KLineChart с использованием WebView. Основана на оригинальной библиотеке KLineChart.

Установка

``bash npm install klinecharts-react-native

`или`


yarn add klinecharts-react-native


$3
Библиотека требует следующие peer dependencies:

- react(>=17) -react-native(>=0.64) -react-native-webview

Установите react-native-webview если его еще нет:

`bash npm install react-native-webview

`или`


yarn add react-native-webview


Быстрый старт

`tsx import React from 'react'; import { View } from 'react-native'; import { KLineChart } from 'klinecharts-react-native';

const App = () => { const data = [ { timestamp: 1640995200000, open: 100, high: 110, low: 95, close: 105, volume: 1000, }, // ... больше данных ];

const options = { styles: { candle: { type: 'candle_solid', bar: { upColor: '#26a69a', downColor: '#ef5350', noChangeColor: '#888888', }, }, }, };

return ( ); };

export default App;``

Основные возможности

- 📊 Отображение свечных графиков (OHLC)
- 📈 Поддержка различных типов графиков
- 🎨 Настраиваемые стили и цвета
- 📱 Адаптивный дизайн для мобильных устройств
- 🔄 Поддержка обновления данных в реальном времени
- 📊 Индикаторы технического анализа
- 🎯 Интерактивные элементы (зум, скролл)
- 🌐 Поддержка кастомных шрифтов

Документация

- 📚 Полная документация - Главная страница документации
- 🔧 API Reference - Полное описание API компонента
- 📋 Types - Описание всех типов данных
- 💡 Examples - Практические примеры использования
- 📁 Structure - Структура документации

Лицензия

MIT

Ссылки

- Оригинальная библиотека KLineChart
- GitHub репозиторий

или

yarn add react-native-webview

Быстрый старт

tsx
import React from 'react';
import { View } from 'react-native';
import { KLineChart } from 'klinecharts-react-native';

const App = () => {
  const data = [
    {
      timestamp: 1640995200000,
      open: 100,
      high: 110,
      low: 95,
      close: 105,
      volume: 1000,
    },
    // ... больше данных
  ];

  const options = {
    styles: {
      candle: {
        type: 'candle_solid',
        bar: {
          upColor: '#26a69a',
          downColor: '#ef5350',
          noChangeColor: '#888888',
        },
      },
    },
  };

  return (
    
      
    
  );
};

export default App;

Основные возможности

Документация