react-native-charts-wrapper

To implement linkage charts (where multiple charts move or zoom in unison), use the following special properties:

• group: The group name.
• identifier: A unique identifier for the chart.
• syncX: Enables synchronization of X-axis movement.
• syncY: Enables synchronization of Y-axis movement.

These operations are performed on the native side for high performance. For more details, see the LinkageChartScreen example in the repository.

While the library supports both iOS and Android, it uses Android conventions for all configuration to ensure consistency:

1. Colors: Use processColor for all color settings. Alpha values are 0-255 (Android style).
2. Percentages: Use 0-100 (Android style).
3. Animations: animation.duration is in milliseconds.
4. Enums: Use Android enum case names (e.g., BOTH_SIDED instead of iOS bothSided).

The library supports two data formats for the data.dataSets array:

Complete Form

Allows specifying both x and y coordinates, and an optional marker string for tooltips.

data: {
    dataSets: [
        {
            values: [
                {x: 5, y: 90},
                {x: 10, y: 130},
                {x: 50, y: 2000, marker: "eat more"},
                {x: 80, y: 9000, marker: "eat less"}
            ]
        }
    ]
}

Note: If x is omitted, the index will be used.

Simplified Form

Provides only the y values. The index is automatically used as the x coordinate.

data: {
    dataSets: [
        {
            values: [5, 40, 77, 81, 43]
        }
    ]
}

You can create local development builds for Android and iOS using EAS Build. For iOS, the build is intended for use with a simulator.

1. Navigate to the Example directory.
2. Run the appropriate EAS build command.
3. Download and unzip the resulting artifact.
4. For iOS, drag the unzipped file into your iOS simulator.
5. Start the local development server using yarn start.

cd Example
yarn install
# build android apk
eas build -p android --profile development

# build ios app for simulator
eas build -p ios --profile development

# After downloading and unzipping, remember to run:
yarn start

To run the example project using a development client, navigate to the Example directory and use the Expo CLI command. Ensure you have the necessary dependencies installed via yarn first.

cd Example
yarn install
expo start --dev-client

Depending on your project type, follow these installation steps:

For Expo

1. expo init demo
2. cd demo
3. expo install react-native-charts-wrapper
4. eas build

For React Native CLI

1. npx react-native init demo
2. cd demo
3. npm install --save react-native-charts-wrapper
4. cd ios && pod install
5. npx react-native run-ios/run-android

You can call native chart functions directly on the chart instance. Supported functions include:

• highlights([...]): Highlights specific entries or clears highlights by passing an empty array highlights([]).
• moveViewTo(...), moveViewToX(...), moveViewToAnimated(...): Programmatically move the view.
• centerViewTo(...), centerViewToAnimated(...): Center the view.
• fitScreen(): Fits the data to the screen.
• setDataAndLockIndex(...): Sets new data while maintaining the current X/Y/Zoom position.

Warning for Android: When using setDataAndLockIndex to load more data (infinite scrolling), the range of new data (xMax - xMin) should ideally equal the original data range to prevent position transition inaccuracies (blinking).

The PieChart component requires a data prop of type DataTypes.pieData. It inherits props from PieRadarChartBase.

Props:

• data: DataTypes.pieData
• extraOffsets: { left: number, top: number, right: number, bottom: number }
• drawEntryLabels: bool
• usePercentValues: bool
• centerText: string
• styledCenterText: { text: string, color: number, fontFamily: string, size: number }
• centerTextRadiusPercent: number
• holeRadius: number
• holeColor: number
• transparentCircleRadius: number
• transparentCircleColor: number
• entryLabelColor: number
• entryLabelTextSize: number
• entryLabelFontFamily: string
• maxAngle: number

The HorizontalBarChart component requires a data prop of type DataTypes.barData and inherits props from BarLineChartBase.

Props:

• data: DataTypes.barData
• drawValueAboveBar: bool
• drawBarShadow: bool