https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts
https://gifted-charts.web.app/


npm install react-native-gifted-charts react-native-linear-gradient react-native-svg

# expo 调试地址 https://snack.expo.dev/?platform=web
# expo 调试时的 package.json
{
  "dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "*",
    "react-native-gifted-charts": "*",
    "react-native-linear-gradient": "*",
    "react-native-svg": "*",
    "expo-linear-gradient": "*"
  }
}





# 相关参数示例
const data = [
      {value: 15,label: '10.01'}, 
      {value: 30,label: '10.02'}, 
      {value: 26,label: '10.03'}, 
      {value: 26,label: '10.03'}, 
      {value: 60,label: '10.03'}, 
      {value: 58,label: '10.03'}, 
      {value: 40,label: '10.04'}
];

 <LineChart

	width={430}
	height={200}
	areaChart

	curved   // 折线平滑
  
 
	maxValue={60} // 最大值
	noOfSections={5} // Y轴数量
	// backgroundColor="#414141" //图标背景色

	data={data}

	startFillColor="#009CC6"
	startOpacity={0.8}
	endFillColor="#009CC6"
	endOpacity={0.3}

	color="#fff"  // 折线的颜色
	thickness={3} // 折线的线宽
	spacing={65} // X轴的间隔距离
	// initialSpacing={10}  // X轴上的初始距离
	rulesType="solid"  // // 横线标类型
	rulesColor="rgba(255,255,255,.3)" // 横线标线颜色
	// hideRules // 隐藏横坐标线
	// showVerticalLines // 显示垂直线
	// verticalLinesColor="rgba(14,164,164,0.5)"  // 垂直线 颜色

	dataPointsColor="blue" // 数据点的颜色
	dataPointsRadius={4}  // 数据点半径
	// hideDataPoints  // 隐藏数据点
	

	yAxisTextStyle={{      // Y轴标签样式
	  color: '#fff',      // 文本颜色
	  fontSize: 14,       // 字体大小
	  textAlign: 'center'  // 文本对齐
	}}
	// hideYAxisText // 隐藏Y轴标签
	yAxisColor="#ccc"    // Y轴线颜色
	yAxisThickness={0}   // Y轴线粗细
	

	xAxisLabelTextStyle={{ // X轴标签样式
	  color: '#fff',      // 文本颜色
	  fontSize: 14,       // 字体大小
	  textAlign: 'center'  // 文本对齐
	}}
	xAxisColor="#fff"    // X轴线颜色
	xAxisThickness={1}   // X轴线粗细
/>

https://nearform.com/open-source/victory/docs/introduction/

npm install victory 
  

import React from "react";
import {
  VictoryChart,
  VictoryLine,
} from "victory"; 
  
  
function App() {
  return (
    <VictoryChart
      theme={VictoryTheme.clean}
    >
      <VictoryLine />
    </VictoryChart>
  );
}

render(<App />);

https://github.com/indiespirit/react-native-chart-kit

# 安装
npm install react-native-chart-kit 
npm install react-native-svg

# 引用
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";

# 定义数据
const data = {
    labels: ["10.01", "10.02", "10.03", "10.04", "10.05", "10.06"],
    datasets: [
        {
        data: [
            50,
            80,
            70,
            50,
            80,
            100
        ]
        }
    ]
}

# 引用折线组件
<LineChart
    style={{
      flex: 1,
      backgroundColor: 'transparent',
      paddingRight: 130 * scaleWH,  // 调整左右间距
      paddingTop: 20 * scaleWH,  // 调整上下间距
    }}
    data={data}
    width={1120 * scaleWH} // from react-native
    height={410 * scaleWH}
    yAxisLabel=""
    yAxisSuffix=""
    yAxisInterval={1} // optional, defaults to 1
    withVerticalLines={false} // 显示垂直线
    withHorizontalLines ={true} // 显示水平线
    xLabelsOffset={-40 * scaleWH}
    // yLabelsOffset={40 * scaleWH}
    chartConfig={{
      backgroundColor: 'transparent', // 透明背景
      backgroundGradientFrom: "rgba(0,0,0,0)",
      backgroundGradientFromOpacity: 0,
      backgroundGradientTo: "rgba(0,0,0,0)",
      backgroundGradientToOpacity: 0,

      fillShadowGradientFrom:"#009CC6", // 定义数据下方区域线性渐变中的第一种颜色
      fillShadowGradientFromOpacity : 0.5, // 定义数据下方区域线性渐变中的第一种颜色不透明度
      fillShadowGradientFromOffset : 0.2,  // 定义数据下方区域线性渐变中的第一种颜色偏移量
      fillShadowGradientTo :"#ffffff", // 定义数据下方区域线性渐变中的第二种颜色
      fillShadowGradientToOpacity: 0.1, // 定义数据下方区域线性渐变中的第二种颜色不透明度
      fillShadowGradientToOffset : 0.7, // 定义数据下方区域线性渐变中的第二种颜色偏移量v

      decimalPlaces: 0, // Y轴标签显示小数位
      strokeWidth :1,
      color: (opacity = 1) => `#FFF`,
      labelColor: (opacity = 1) => `#FFF`,
      propsForLabels: {
        // dx: -20 * scaleWH,      // 水平偏移（正数向右，负数向左）
        // dy: -10 * scaleWH,      // 垂直偏移（正数向下，负数向上）
        fontSize: 8,
        fill: '#fff', // 文本颜色
      },
      propsForDots: {
        r: "2",
        opacity: .8,
        strokeWidth: "1",
        stroke: "#fff"
      },
      propsForBackgroundLines: {
        strokeWidth: 1,
        stroke: 'rgba(255, 255, 255, 0.1)', // 网格线颜色
        strokeDasharray: '0', // 关键：设置为 "0" 表示实线（默认可能是 "5,3" 这样的虚线）
      }
    }}
    bezier
 />