@chainplatform/charts 0.0.2

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chain Platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+# @chainplatform/charts
+
+Reusable chart components for React Native / React Native Web.
+
+<p align="center">
+  <a href="https://github.com/ChainPlatform/react-native-charts/blob/HEAD/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/react-native-charts">
+    <img src="https://img.shields.io/npm/v/@chainplatform/react-native-charts?color=brightgreen&label=npm%20package" alt="Current npm package version." />
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/react-native-charts">
+    <img src="https://img.shields.io/npm/dt/@chainplatform/react-native-charts.svg"></img>
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/react-native-charts">
+    <img src="https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20web-blue"></img>
+  </a>
+  <a href="https://github.com/ChainPlatform/react-native-charts/pulls">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=doansan">
+    <img src="https://img.shields.io/twitter/follow/doansan.svg?label=Follow%20@doansan" alt="Follow @doansan" />
+  </a>
+</p>
+
+
+[![GitHub stars](https://img.shields.io/github/stars/ChainPlatform/react-native-charts?style=social)](https://github.com/ChainPlatform/react-native-charts)  
+[![GitHub forks](https://img.shields.io/github/forks/ChainPlatform/react-native-charts?style=social)](https://github.com/ChainPlatform/react-native-charts)
+
+
+## Install
+
+```bash
+npm install @chainplatform/charts react-native-svg prop-types @chainplatform/layout --save
+```
+
+or:
+
+```bash
+yarn add @chainplatform/charts react-native-svg prop-types @chainplatform/layout
+```
+
+## Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { BarChart, DonutChart, LineChart } from '@chainplatform/charts';
+
+export default function Example() {
+    return (
+        <View>
+            <BarChart
+                data={[12, 18, 9, 24]}
+                categories={['T1', 'T2', 'T3', 'T4']}
+                enableTooltip
+            />
+
+            <DonutChart
+                data={[
+                    { label: 'Pass', value: 70, total: 70, color: '#10B981' },
+                    { label: 'Fail', value: 30, total: 30, color: '#EF4444' },
+                ]}
+                centerContent="100"
+                enableTooltip
+            />
+
+            <LineChart
+                data={[10, 20, 14, 30, 25]}
+                labels={['A', 'B', 'C', 'D', 'E']}
+            />
+        </View>
+    );
+}
+```
+
+## Components
+
+### BarChart
+
+```jsx
+<BarChart data={[10, 20, 30]} categories={['A', 'B', 'C']} enableTooltip />
+```
+
+Main props:
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `data` | `number[]` | required |
+| `categories` | `string[]` | `[]` |
+| `chartHeight` | `number` | `setSize(220)` |
+| `showGrid` | `boolean` | `true` |
+| `gridColor` | `string` | `#ddd` |
+| `axisLabelColor` | `string` | `#666` |
+| `barSpacing` | `number` | `setSize(12)` |
+| `barWidth` | `number` | `setSize(25)` |
+| `colors` | `string[]` | default palette |
+| `barLabels` | `string[]` | `[]` |
+| `theme` | `object` | `null` |
+| `enableTooltip` | `boolean` | `true` |
+
+### DonutChart
+
+```jsx
+<DonutChart
+    data={[{ label: 'Done', value: 60, total: 60, color: '#10B981' }]}
+    centerContent="60"
+/>
+```
+
+Main props:
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `data` | `{ label, value, color, total? }[]` | required |
+| `size` | `number` | `setSize(320)` |
+| `strokeWidth` | `number` | `setSize(70)` |
+| `startAngle` | `number` | `-90` |
+| `segmentGap` | `number` | `2` |
+| `backgroundColor` | `string` | `#ECECEC` |
+| `showPercent` | `boolean` | `true` |
+| `showInnerLabels` | `boolean` | `true` |
+| `centerContent` | `string` | `''` |
+| `enableTooltip` | `boolean` | `true` |
+
+### LineChart
+
+```jsx
+<LineChart data={[8, 12, 16, 10]} labels={['Q1', 'Q2', 'Q3', 'Q4']} />
+```
+
+Main props:
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `data` | `number[]` | required |
+| `labels` | `string[]` | `[]` |
+| `width` | `number` | `setSize(160)` |
+| `height` | `number` | `setSize(60)` |
+| `strokeColor` | `string` | `#5B7CFA` |
+| `strokeWidth` | `number` | `setSize(2)` |
+| `showDots` | `boolean` | `true` |
+| `dotRadius` | `number` | `setSize(3)` |
+| `touchRadius` | `number` | `setSize(10)` |
+| `backgroundColor` | `string` | `transparent` |
+| `enableTooltip` | `boolean` | `true` |
+
+---
+
+## 🪪 License
+MIT © 2026 [Chain Platform](https://chainplatform.net)
+
+---
+
+## 💖 Support & Donate
+
+If you find this package helpful, consider supporting the development:
+
+| Currency | Address |
+|----------------|----------|
+| **MB Bank** | `MB Bank` |
+![alt text](imgs/qr.png)
+| **Bitcoin (BTC)** | `17grbSNSEcEybS1nHh4TGYVodBwT16cWtc` |
+![alt text](imgs/image-1.png)
+| **Ethereum (ETH)** | `0xa2fd119a619908d53928e5848b49bf1cc15689d4` |
+![alt text](imgs/image-2.png)
+| **Tron (TRX)** | `TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd` |
+![alt text](imgs/image.png)
+| **DOGE (DOGE)** | `DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19` |
+| **USDT (SOLANA)** | `cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm` |
+
+
+Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@chainplatform/charts",
+  "version": "0.0.2",
+  "description": "Reusable React Native charts for Chain Platform.",
+  "main": "src/index.js",
+  "devDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@chainplatform/layout": "*",
+    "prop-types": "*",
+    "react-native-svg": ">=12.0.0"
+  },
+  "author": "Chain Platform <santran686@gmail.com> (https://chainplatform.net/)",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "charts",
+    "bar-chart",
+    "line-chart",
+    "donut-chart",
+    "chainplatform",
+    "react-native-web"
+  ],
+  "homepage": "https://github.com/ChainPlatform/react-native-charts",
+  "bugs": "https://github.com/ChainPlatform/react-native-charts/issues",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/ChainPlatform/react-native-charts.git"
+  }
+}

package/src/BarChart.js

@@ -0,0 +1,361 @@
+import React, { PureComponent } from 'react';
+import { View, Platform, ScrollView } from 'react-native';
+import Svg, { Rect, Text as SvgText, Line } from 'react-native-svg';
+import PropTypes from 'prop-types';
+import { setSize } from '@chainplatform/layout';
+import ChartTooltip from './ChartTooltip';
+import { chartStyles, dynamicChartStyles } from './styles/chartStyles';
+import { px } from './utils';
+
+class BarChart extends PureComponent {
+    chartColors = [
+        '#93C5FD', '#3B82F6', '#1E40AF', '#0EA5E9', '#0369A1',
+        '#C4B5FD', '#8B5CF6', '#7C3AED', '#A855F7', '#6D28D9',
+        '#6EE7B7', '#10B981', '#059669', '#34D399', '#047857',
+        '#F87171', '#EF4444', '#DC2626', '#FB923C', '#FACC15',
+    ];
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tooltip: null,
+            containerWidth: 0,
+        };
+    }
+
+    showTooltip = (e, dataIndex, value, color) => {
+        const { locationX, locationY } = e.nativeEvent;
+
+        const label =
+            this.props.barLabels?.[dataIndex] ||
+            this.props.categories?.[dataIndex] ||
+            `Bar ${dataIndex}`;
+
+        this.setState({
+            tooltip: {
+                x: locationX,
+                y: locationY,
+                dataIndex,
+                value,
+                label,
+                color,
+            },
+        });
+    };
+
+    hideTooltip = () => { this.setState({ tooltip: null }); };
+
+    renderSingleBar = (
+        dataIndex,
+        value,
+        chartHeight,
+        maxValue,
+        x,
+        barWidth,
+        color,
+        enableTooltip
+    ) => {
+        if (!value || value <= 0) return null;
+
+        const barHeight =
+            (value / maxValue) *
+            (chartHeight - setSize(25));
+
+        const y = chartHeight - barHeight;
+
+        return (
+            <Rect
+                key={`bar-${dataIndex}`}
+                x={px(x)}
+                y={px(y)}
+                width={barWidth}
+                height={barHeight}
+                fill={color}
+                rx={setSize(4)}
+                ry={setSize(4)}
+                onMouseEnter={
+                    Platform.OS === 'web'
+                        ? e =>
+                            this.showTooltip(
+                                e,
+                                dataIndex,
+                                value,
+                                color
+                            )
+                        : undefined
+                }
+                onMouseLeave={
+                    Platform.OS === 'web'
+                        ? this.hideTooltip
+                        : undefined
+                }
+                onPress={
+                    Platform.OS !== 'web' && enableTooltip
+                        ? e =>
+                            this.showTooltip(
+                                e,
+                                dataIndex,
+                                value,
+                                color
+                            )
+                        : undefined
+                }
+                onPressOut={
+                    Platform.OS !== 'web' && enableTooltip
+                        ? this.hideTooltip
+                        : undefined
+                }
+            />
+        );
+    };
+
+    render() {
+        const {
+            data,
+            categories,
+            chartHeight,
+            showGrid,
+            gridColor,
+            axisLabelColor,
+            axisLabelSizeMax,
+            axisLabelSizeMin,
+            tooltipFontSize,
+            axisLabelPadding,
+            barSpacing,
+            colors: customColors,
+            barWidth,
+            theme,
+            enableTooltip = false
+        } = this.props;
+
+        const {
+            tooltip,
+            containerWidth,
+        } = this.state;
+
+        if (!data?.length) return null;
+
+        const maxValue = Math.max(...data);
+
+        if (maxValue <= 0) return null;
+
+        const colors = data.map((_, index) => (
+            customColors?.[index] ||
+            this.chartColors[index % this.chartColors.length]
+        ));
+
+        const leftPadding = setSize(20);
+        const rightPadding = setSize(20);
+
+        const fixedBarsWidth = data.length * barWidth;
+
+        const minimumRequiredWidth =
+            fixedBarsWidth +
+            (data.length - 1) * barSpacing +
+            leftPadding +
+            rightPadding;
+
+        const isExpanded = containerWidth > minimumRequiredWidth;
+
+        const svgWidth = isExpanded ? containerWidth : minimumRequiredWidth;
+
+        const dynamicSpacing =
+            data.length > 1
+                ? isExpanded
+                    ? (
+                        svgWidth -
+                        fixedBarsWidth -
+                        leftPadding -
+                        rightPadding
+                    ) / (data.length - 1)
+                    : barSpacing
+                : 0;
+
+        const totalChartHeight = chartHeight - setSize(30);
+
+        const gridSteps = 5;
+        const stepHeight = totalChartHeight / gridSteps;
+
+        return (<View style={chartStyles.relativeFullWidth} onLayout={e => { this.setState({ containerWidth: e.nativeEvent.layout.width }); }}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={dynamicChartStyles.minWidth(svgWidth)} >
+                <Svg width={svgWidth} height={chartHeight} >
+                    <Line
+                        x1={px(0)}
+                        y1={px(0)}
+                        x2={px(0)}
+                        y2={px(totalChartHeight)}
+                        stroke={theme?.colors?.border || '#888'}
+                        strokeWidth={setSize(1)}
+                    />
+
+                    <Line
+                        x1={px(0)}
+                        y1={px(totalChartHeight)}
+                        x2={px(svgWidth)}
+                        y2={px(totalChartHeight)}
+                        stroke={theme?.colors?.border || '#888'}
+                        strokeWidth={setSize(1)}
+                    />
+
+                    {showGrid &&
+                        Array.from({
+                            length: gridSteps + 1,
+                        }).map((_, i) => {
+                            const y =
+                                totalChartHeight -
+                                i * stepHeight;
+
+                            return (
+                                <Line
+                                    key={`grid-${i}`}
+                                    x1={px(0)}
+                                    y1={px(y)}
+                                    x2={px(svgWidth)}
+                                    y2={px(y)}
+                                    stroke={gridColor}
+                                    strokeWidth={setSize(1)}
+                                />
+                            );
+                        })}
+
+                    {data.map((value, dataIndex) => {
+                        const x =
+                            leftPadding +
+                            dataIndex *
+                            (
+                                barWidth +
+                                dynamicSpacing
+                            );
+
+                        const barHeight =
+                            (value / maxValue) *
+                            (
+                                totalChartHeight -
+                                setSize(25)
+                            );
+
+                        return (
+                            <React.Fragment
+                                key={`bar-group-${dataIndex}`}
+                            >
+                                {this.renderSingleBar(
+                                    dataIndex,
+                                    value,
+                                    totalChartHeight,
+                                    maxValue,
+                                    x,
+                                    barWidth,
+                                    colors[dataIndex],
+                                    enableTooltip
+                                )}
+
+                                {value > 0 && (
+                                    <SvgText
+                                        x={x + barWidth / 2}
+                                        y={
+                                            totalChartHeight -
+                                            barHeight -
+                                            setSize(8)
+                                        }
+                                        fontSize={tooltipFontSize}
+                                        fill={
+                                            theme?.colors?.text ||
+                                            '#000'
+                                        }
+                                        fontWeight="600"
+                                        textAnchor="middle"
+                                    >
+                                        {value}
+                                    </SvgText>
+                                )}
+                            </React.Fragment>
+                        );
+                    })}
+
+                    {categories?.map((label, idx) => {
+                        const x =
+                            leftPadding +
+                            idx *
+                            (
+                                barWidth +
+                                dynamicSpacing
+                            ) +
+                            barWidth / 2;
+
+                        return (
+                            <SvgText
+                                key={`label-${idx}`}
+                                x={x}
+                                y={
+                                    totalChartHeight +
+                                    axisLabelPadding
+                                }
+                                fontSize={
+                                    label.length >= 6
+                                        ? axisLabelSizeMin
+                                        : axisLabelSizeMax
+                                }
+                                fill={axisLabelColor}
+                                textAnchor="middle"
+                            >
+                                {label}
+                            </SvgText>
+                        );
+                    })}
+                </Svg>
+            </ScrollView>
+            {enableTooltip ? <ChartTooltip tooltip={tooltip} valueText={tooltip ? String(tooltip.value) : ''} /> : null}
+        </View>);
+    }
+}
+
+BarChart.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.number
+    ).isRequired,
+    categories: PropTypes.arrayOf(
+        PropTypes.string
+    ),
+    chartHeight: PropTypes.number,
+    showGrid: PropTypes.bool,
+    gridColor: PropTypes.string,
+    axisLabelColor: PropTypes.string,
+    axisLabelSizeMin: PropTypes.number,
+    axisLabelSizeMax: PropTypes.number,
+    tooltipFontSize: PropTypes.number,
+    axisLabelPadding: PropTypes.number,
+    barSpacing: PropTypes.number,
+    colors: PropTypes.arrayOf(
+        PropTypes.string
+    ),
+    barLabels: PropTypes.arrayOf(
+        PropTypes.string
+    ),
+    barWidth: PropTypes.number,
+    theme: PropTypes.object,
+};
+
+BarChart.defaultProps = {
+    categories: [],
+    chartHeight: setSize(220),
+    showGrid: true,
+    gridColor: '#ddd',
+    axisLabelColor: '#666',
+    axisLabelSizeMax: setSize(13),
+    axisLabelSizeMin: setSize(7),
+    tooltipFontSize: setSize(13),
+    axisLabelPadding: setSize(18),
+    barSpacing: setSize(12),
+    barWidth: setSize(25),
+    colors: [
+        '#3B82F6',
+        '#8B5CF6',
+        '#10B981',
+        '#EF4444',
+    ],
+    barLabels: [],
+    theme: null,
+};
+
+export default BarChart;

package/src/ChartTooltip.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+import { setSize } from '@chainplatform/layout';
+import { chartStyles, dynamicChartStyles } from './styles/chartStyles';
+
+const ChartTooltip = ({
+    tooltip,
+    valueText,
+    offsetX,
+    offsetY,
+}) => {
+    if (!tooltip) return null;
+
+    return (
+        <View
+            pointerEvents="none"
+            style={[
+                chartStyles.tooltipContainer,
+                dynamicChartStyles.tooltipPosition(tooltip, offsetX, offsetY),
+            ]}
+        >
+            <View style={chartStyles.tooltipHeader}>
+                <View style={[chartStyles.tooltipDot, dynamicChartStyles.tooltipDotColor(tooltip.color)]} />
+                <Text numberOfLines={1} style={chartStyles.tooltipLabel}>
+                    {tooltip.label}
+                </Text>
+            </View>
+
+            <Text style={chartStyles.tooltipValue}>
+                {valueText || tooltip.value}
+            </Text>
+            <View style={chartStyles.tooltipArrow} />
+        </View>
+    );
+};
+
+ChartTooltip.propTypes = {
+    tooltip: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+        label: PropTypes.string,
+        value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+        ]),
+        color: PropTypes.string,
+    }),
+    valueText: PropTypes.string,
+    offsetX: PropTypes.number,
+    offsetY: PropTypes.number,
+};
+
+ChartTooltip.defaultProps = {
+    tooltip: null,
+    valueText: '',
+    offsetX: setSize(35),
+    offsetY: setSize(78),
+};
+
+export default ChartTooltip;

package/src/DonutChart.js

@@ -0,0 +1,281 @@
+import React, { PureComponent } from 'react';
+import { View, Platform } from 'react-native';
+import Svg, { Circle, Path, Text as SvgText } from 'react-native-svg';
+import PropTypes from 'prop-types';
+import ChartTooltip from './ChartTooltip';
+import { setSize } from '@chainplatform/layout';
+import { chartStyles } from './styles/chartStyles';
+
+class DonutChart extends PureComponent {
+    static propTypes = {
+        data: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string,
+                value: PropTypes.number,
+                color: PropTypes.string,
+            })
+        ).isRequired,
+        size: PropTypes.number,
+        strokeWidth: PropTypes.number,
+        startAngle: PropTypes.number,
+        segmentGap: PropTypes.number,
+        backgroundColor: PropTypes.string,
+        showPercent: PropTypes.bool,
+        showInnerLabels: PropTypes.bool,
+        percentFontSize: PropTypes.number,
+        labelFontSize: PropTypes.number,
+        contentFontSize: PropTypes.number,
+        percentColor: PropTypes.string,
+        centerContent: PropTypes.string,
+        innerOffset: PropTypes.number,
+        enableTooltip: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        size: setSize(320),
+        strokeWidth: setSize(70),
+        startAngle: -90,
+        segmentGap: 2,
+        backgroundColor: '#ECECEC',
+        showPercent: true,
+        showInnerLabels: true,
+        percentFontSize: setSize(18),
+        labelFontSize: setSize(15),
+        contentFontSize: setSize(18),
+        percentColor: '#FFFFFF',
+        centerContent: '',
+        innerOffset: setSize(24),
+        enableTooltip: true,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tooltip: null,
+        };
+    }
+
+    polarToCartesian = (cx, cy, radius, angle) => {
+        const rad = ((angle - 90) * Math.PI) / 180;
+
+        return {
+            x: cx + radius * Math.cos(rad),
+            y: cy + radius * Math.sin(rad),
+        };
+    };
+
+    describeArc = (cx, cy, radius, startAngle, endAngle) => {
+        const start = this.polarToCartesian(cx, cy, radius, endAngle);
+        const end = this.polarToCartesian(cx, cy, radius, startAngle);
+
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+        return [
+            'M',
+            start.x,
+            start.y,
+            'A',
+            radius,
+            radius,
+            0,
+            largeArcFlag,
+            0,
+            end.x,
+            end.y,
+        ].join(' ');
+    };
+
+    showTooltip = (item, percent, point) => {
+        this.setState({
+            tooltip: {
+                x: point.x,
+                y: point.y,
+                label: item.label,
+                value: item.total,
+                percent: item.value,
+                color: item.color,
+            },
+        });
+    };
+
+    hideTooltip = () => { this.setState({ tooltip: null }); };
+
+    render() {
+        const {
+            data,
+            size,
+            strokeWidth,
+            startAngle,
+            segmentGap,
+            backgroundColor,
+            showPercent,
+            showInnerLabels,
+            percentFontSize,
+            labelFontSize,
+            contentFontSize,
+            percentColor,
+            centerContent,
+            innerOffset,
+            enableTooltip,
+        } = this.props;
+
+        const { tooltip } = this.state;
+
+        if (!data?.length) return null;
+
+        const validData = data.filter(
+            item => item?.value && item.value > 0
+        );
+
+        if (!validData.length) return null;
+
+        const total = validData.reduce(
+            (sum, item) => sum + item.value,
+            0
+        );
+
+        if (total <= 0) return null;
+
+        const radius = (size - strokeWidth) / 2;
+        const center = size / 2;
+
+        let currentAngle = startAngle;
+
+        return (
+            <View style={chartStyles.centerRelative}>
+                <Svg width={size} height={size}>
+                    <Circle cx={center} cy={center} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill="transparent" />
+
+                    {validData.map((item, index) => {
+                        const percent = item.value / total;
+                        const sweepAngle = percent * 360;
+
+                        const segmentStartAngle = currentAngle + segmentGap / 2;
+
+                        const segmentEndAngle = currentAngle + sweepAngle - segmentGap / 2;
+
+                        const middleAngle = currentAngle + sweepAngle / 2;
+
+                        currentAngle += sweepAngle;
+
+                        if (segmentEndAngle <= segmentStartAngle) {
+                            return null;
+                        }
+
+                        const arcPath = this.describeArc(
+                            center,
+                            center,
+                            radius,
+                            segmentStartAngle,
+                            segmentEndAngle
+                        );
+
+                        const percentPoint = this.polarToCartesian(
+                            center,
+                            center,
+                            radius,
+                            middleAngle
+                        );
+
+                        const innerPoint = this.polarToCartesian(
+                            center,
+                            center,
+                            radius - strokeWidth / 2 - innerOffset,
+                            middleAngle
+                        );
+
+                        const roundedPercent = Math.round(percent * 100);
+
+                        return (
+                            <React.Fragment key={`segment-${index}`}>
+                                <Path
+                                    d={arcPath}
+                                    stroke={item.color}
+                                    strokeWidth={strokeWidth}
+                                    fill="transparent"
+                                    strokeLinecap="butt"
+                                    onPress={
+                                        Platform.OS !== 'web' && enableTooltip
+                                            ? () =>
+                                                this.showTooltip(
+                                                    item,
+                                                    roundedPercent,
+                                                    percentPoint
+                                                )
+                                            : undefined
+                                    }
+                                    onPressOut={
+                                        Platform.OS !== 'web'
+                                            ? this.hideTooltip
+                                            : undefined
+                                    }
+                                    onMouseEnter={
+                                        Platform.OS === 'web' && enableTooltip
+                                            ? () =>
+                                                this.showTooltip(
+                                                    item,
+                                                    roundedPercent,
+                                                    percentPoint
+                                                )
+                                            : undefined
+                                    }
+                                    onMouseLeave={
+                                        Platform.OS === 'web'
+                                            ? this.hideTooltip
+                                            : undefined
+                                    }
+                                />
+
+                                {showPercent && (
+                                    <SvgText
+                                        x={percentPoint.x}
+                                        y={percentPoint.y}
+                                        fill={percentColor}
+                                        fontSize={percentFontSize}
+                                        fontWeight="600"
+                                        textAnchor="middle"
+                                        alignmentBaseline="middle"
+                                    >
+                                        {`${roundedPercent}%`}
+                                    </SvgText>
+                                )}
+
+                                {showInnerLabels && (
+                                    <SvgText
+                                        x={innerPoint.x}
+                                        y={innerPoint.y}
+                                        fill={item.color}
+                                        fontSize={labelFontSize}
+                                        textAnchor="middle"
+                                        alignmentBaseline="middle"
+                                    >
+                                        {item.label}
+                                    </SvgText>
+                                )}
+                            </React.Fragment>
+                        );
+                    })}
+
+                    {!!centerContent && (
+                        <SvgText
+                            x={center}
+                            y={center}
+                            fontSize={contentFontSize}
+                            fontWeight="600"
+                            fill="#333"
+                            textAnchor="middle"
+                            alignmentBaseline="middle"
+                        >
+                            {centerContent}
+                        </SvgText>
+                    )}
+                </Svg>
+
+                {enableTooltip ? <ChartTooltip tooltip={tooltip} valueText={tooltip ? `${tooltip.value} (${tooltip.percent}%)` : ''} /> : null}
+            </View>
+        );
+    }
+}
+
+export default DonutChart;

package/src/LineChart.js

@@ -0,0 +1,121 @@
+import React, { PureComponent } from 'react';
+import { View, Platform } from 'react-native';
+import Svg, { Path, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import PropTypes from 'prop-types';
+import { setSize } from '@chainplatform/layout';
+import ChartTooltip from './ChartTooltip';
+import { dynamicChartStyles } from './styles/chartStyles';
+import { px } from './utils';
+
+class LineChart extends PureComponent {
+    state = { tooltip: null };
+
+    showTooltip = (e, point, index) => {
+        const { locationX, locationY } = e.nativeEvent;
+        const label = this.props.labels?.[index] || this.props.data?.[index] || `P ${index + 1}`;
+        this.setState({ tooltip: { x: locationX, y: locationY, value: point.value, label, color: this.props.strokeColor } });
+    };
+
+    hideTooltip = () => this.setState({ tooltip: null });
+
+    getSmoothPath = points => {
+        if (!points.length) return '';
+        let d = `M ${px(points[0].x)} ${px(points[0].y)}`;
+        for (let i = 0; i < points.length - 1; i++) {
+            const p0 = points[i];
+            const p1 = points[i + 1];
+            const midX = (p0.x + p1.x) / 2;
+            d += ` C ${px(midX)} ${px(p0.y)}, ${px(midX)} ${px(p1.y)}, ${px(p1.x)} ${px(p1.y)}`;
+        }
+        return d;
+    };
+
+    render() {
+        const { enableTooltip, data, width, height, strokeColor, strokeWidth, showDots, dotRadius, touchRadius, paddingHorizontal, paddingVertical, backgroundColor } = this.props;
+        const { tooltip } = this.state;
+
+        if (!data?.length) return null;
+
+        const maxValue = Math.max(...data);
+        const minValue = Math.min(...data);
+        const chartWidth = width - paddingHorizontal * 2;
+        const chartHeight = height - paddingVertical * 2;
+        const range = maxValue - minValue || 1;
+
+        const points = data.map((value, index) => ({
+            x: paddingHorizontal + (data.length === 1 ? chartWidth / 2 : index * (chartWidth / (data.length - 1))),
+            y: paddingVertical + chartHeight - ((value - minValue) / range) * chartHeight,
+            value,
+        }));
+
+        const linePath = this.getSmoothPath(points);
+        const areaPath = `${linePath} L ${px(points[points.length - 1].x)} ${px(height - paddingVertical)} L ${px(points[0].x)} ${px(height - paddingVertical)} Z`;
+
+        return (
+            <View style={dynamicChartStyles.lineChartRoot(width, height, backgroundColor)}>
+                <Svg width={width} height={height}>
+                    <Defs>
+                        <LinearGradient id="lineGradient" x1="0" y1="0" x2="0" y2="1">
+                            <Stop offset="0" stopColor={strokeColor} stopOpacity="0.25" />
+                            <Stop offset="1" stopColor={strokeColor} stopOpacity="0" />
+                        </LinearGradient>
+                    </Defs>
+
+                    <Path d={areaPath} fill="url(#lineGradient)" />
+                    <Path d={linePath} fill="none" stroke={strokeColor} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
+
+                    {points.map((point, index) => (
+                        <React.Fragment key={`point-${index}`}>
+                            {showDots && <Circle cx={point.x} cy={point.y} r={dotRadius} fill="#fff" stroke={strokeColor} strokeWidth={setSize(2)} />}
+                            <Circle
+                                cx={point.x}
+                                cy={point.y}
+                                r={touchRadius}
+                                fill="transparent"
+                                onMouseEnter={Platform.OS === 'web' && enableTooltip ? e => this.showTooltip(e, point, index) : undefined}
+                                onMouseLeave={Platform.OS === 'web' ? this.hideTooltip : undefined}
+                                onPress={Platform.OS !== 'web' && enableTooltip ? e => this.showTooltip(e, point, index) : undefined}
+                                onPressOut={Platform.OS !== 'web' ? this.hideTooltip : undefined}
+                            />
+                        </React.Fragment>
+                    ))}
+                </Svg>
+
+                {enableTooltip ? <ChartTooltip tooltip={tooltip} valueText={tooltip ? String(tooltip.value) : ''} /> : null}
+            </View>
+        );
+    }
+}
+
+LineChart.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    labels: PropTypes.arrayOf(PropTypes.string),
+    width: PropTypes.number,
+    height: PropTypes.number,
+    strokeColor: PropTypes.string,
+    strokeWidth: PropTypes.number,
+    showDots: PropTypes.bool,
+    dotRadius: PropTypes.number,
+    touchRadius: PropTypes.number,
+    paddingHorizontal: PropTypes.number,
+    paddingVertical: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    enableTooltip: PropTypes.bool,
+};
+
+LineChart.defaultProps = {
+    labels: [],
+    width: setSize(160),
+    height: setSize(60),
+    strokeColor: '#5B7CFA',
+    strokeWidth: setSize(2),
+    showDots: true,
+    dotRadius: setSize(3),
+    touchRadius: setSize(10),
+    paddingHorizontal: setSize(10),
+    paddingVertical: setSize(8),
+    backgroundColor: 'transparent',
+    enableTooltip: true,
+};
+
+export default LineChart;

package/src/index.js

@@ -0,0 +1,7 @@
+import BarChart from './BarChart';
+import DonutChart from './DonutChart';
+import LineChart from './LineChart';
+import ChartTooltip from './ChartTooltip';
+
+export { BarChart, DonutChart, LineChart, ChartTooltip };
+export default { BarChart, DonutChart, LineChart, ChartTooltip };

package/src/styles/chartStyles.js

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+import { setSize } from '@chainplatform/layout';
+
+export const chartStyles = StyleSheet.create({
+    relativeFullWidth: {
+        width: '100%',
+        position: 'relative',
+    },
+    centerRelative: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    tooltipContainer: {
+        position: 'absolute',
+        backgroundColor: '#111827',
+        borderRadius: setSize(12),
+        paddingHorizontal: setSize(12),
+        paddingVertical: setSize(10),
+        minWidth: setSize(95),
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: setSize(6) },
+        shadowOpacity: 0.25,
+        shadowRadius: setSize(12),
+        elevation: 8,
+        borderWidth: setSize(1),
+        borderColor: 'rgba(255,255,255,0.08)',
+        zIndex: 999,
+    },
+    tooltipHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: setSize(5),
+    },
+    tooltipDot: {
+        width: setSize(10),
+        height: setSize(10),
+        borderRadius: 999,
+        marginRight: setSize(5),
+    },
+    tooltipLabel: {
+        color: '#D1D5DB',
+        fontSize: setSize(12),
+        fontWeight: '500',
+        maxWidth: setSize(120),
+    },
+    tooltipValue: {
+        color: '#FFF',
+        fontSize: setSize(14),
+        fontWeight: '700',
+    },
+    tooltipArrow: {
+        position: 'absolute',
+        bottom: -setSize(6),
+        left: '50%',
+        marginLeft: -setSize(6),
+        width: setSize(12),
+        height: setSize(12),
+        backgroundColor: '#111827',
+        transform: [{ rotate: '45deg' }],
+        borderRightWidth: setSize(1),
+        borderBottomWidth: setSize(1),
+        borderColor: 'rgba(255,255,255,0.08)',
+    },
+});
+
+export const dynamicChartStyles = {
+    minWidth: minWidth => ({ minWidth }),
+    tooltipPosition: (tooltip, offsetX, offsetY) => ({
+        left: Math.max(tooltip.x - offsetX, 10),
+        top: Math.max(tooltip.y - offsetY, 10),
+    }),
+    tooltipDotColor: color => ({ backgroundColor: color }),
+    lineChartRoot: (width, height, backgroundColor) => ({
+        width,
+        height,
+        backgroundColor,
+        position: 'relative',
+    }),
+};

package/src/utils.js

@@ -0,0 +1,3 @@
+import { Platform } from 'react-native';
+
+export const px = v => (Platform.OS === 'web' ? Math.round(v) + 0.5 : v);