@chainplatform/charts

Reusable chart components for React Native / React Native Web.

Install

npm install @chainplatform/charts react-native-svg prop-types @chainplatform/layout --save

or:

yarn add @chainplatform/charts react-native-svg prop-types @chainplatform/layout

Usage

import React from 'react';
import { View } from 'react-native';
import { BarChart, DonutChart, LineChart, RadarChart, MultiLineChart } 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']}
            />

            <MultiLineChart
              width={setSize(320)}
              height={setSize(180)}
              labels={['T1', 'T2', 'T3', 'T4', 'T5']}
              data={[
                  {
                      label: 'Toán',
                      color: '#2563EB',
                      fillColor: '#FFFFFF',
                      data: [8, 7, 9, 8.5, 9.2],
                  },

                  {
                      label: 'Văn',
                      color: '#10B981',
                      fillColor: '#FFFFFF',
                      data: [6.5, 7.2, 7.8, 8, 8.4],
                  },

                  {
                      label: 'Anh',
                      color: '#F59E0B',
                      fillColor: '#FFFFFF',
                      data: [7, 7.5, 8, 8.2, 8.8],
                  },
              ]}
              showArea={true}
              showDots={true}
              showLegend={true}
              enableTooltip={true}
              backgroundColor="transparent"
              legendColor="#374151"
          />


            <RadarChart
                size={setSize(200)}

                padding={setSize(28)}

                labelOffset={setSize(14)}

                valueOffset={setSize(30)}

                maxValue={10}

                labels={[
                    'Nghe',
                    'Nói',
                    'Đọc',
                    'Viết',
                    'Ngữ pháp'
                ]}

                data={[
                    {
                        label: 'Học sinh A',

                        color: '#2563EB',

                        fillColor: '#2563EB',

                        data: [
                            8.5,
                            8.2,
                            8.8,
                            8.7,
                            8.3
                        ],
                    },

                    {
                        label: 'Trung bình lớp',

                        color: '#10B981',

                        fillColor: '#10B981',

                        data: [
                            7.5,
                            7.9,
                            8.1,
                            7.8,
                            7.6
                        ],
                    },
                ]}

                levels={5}

                showDots={true}

                showLegend={true}

                showValues={false}

                enableTooltip={true}

                fillOpacity={0.12}

                backgroundColor="transparent"

                gridColor="#E5E7EB"

                axisColor="#D1D5DB"

                labelColor="#374151"

                valueColor="#111827"

                labelRotate={false}

                labelRotateAngle={-90}

                labelMaxLength={5}

                legendLabelSize={setSize(11)}

                labelFontSize={setSize(11)}

                valueFontSize={setSize(12)}
            />

        </View>
    );
}

Components

BarChart

<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

<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

<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

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Currency | Address | |----------------|----------| | MB Bank | MB Bank | | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀