React Native Charts Wrapper

https://github.com/wuxudong/react-native-charts-wrapper
Admin
A React Native wrapper for MPAndroidChart and Charts, supporting various chart types for both...
Tokens:9,970
Snippets:40
Trust Score:8.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Local Expo Server

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/Example/README.md

Starts the Expo development server for the example project. This command is used to run the application locally on your development machine and is essential for development workflows.

```sh
expo start --dev-client
```

--------------------------------

### Build Android and iOS Apps Locally

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/Example/README.md

Commands to install project dependencies, build an Android APK, and build an iOS app for the simulator using EAS CLI. After building, the artifacts can be deployed or run on emulators/simulators.

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

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

--------------------------------

### Basic Line Chart Implementation

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/README.md

Demonstrates how to import and render a LineChart component in a React Native application. It includes basic styling and data structure for a simple line graph. Requires `react-native-charts-wrapper` to be installed.

```javascript
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, processColor
} from 'react-native';

import {LineChart} from 'react-native-charts-wrapper';

export default class App extends React.Component {

  render() {
    return (
      <View style={{flex: 1}}>
        <View style={styles.container}>
          <LineChart style={styles.chart}
            data={{dataSets:[{label: "demo", values: [{y: 1}, {y: 2}, {y: 1}]}]}}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  chart: {
    flex: 1
  }
});

```

--------------------------------

### Configure Chart Marker Options

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the configuration for chart markers, controlling their visibility, precision, and visual styling.

```APIDOC
marker: {
  enabled: bool,
  digits: number,
  markerColor: number,
  textColor: number,
  textSize: number
}
```

--------------------------------

### Common Chart Configuration Types

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines common configuration options applicable to various chart types, including styling and value formatting.

```APIDOC
common:
  colors: [number]
    Description: An array of colors for chart elements.
    Type: Array<number>

  highlightEnabled: bool
    Description: Enables or disables highlighting on touch.
    Type: boolean

  drawValues: bool
    Description: Controls whether data point values are drawn on the chart.
    Type: boolean

  valueTextSize: number
    Description: Sets the text size for displayed values.
    Type: number

  valueTextColor: number
    Description: Sets the text color for displayed values.
    Type: number

  visible: bool
    Description: Controls the visibility of the chart element.
    Type: boolean

  valueFormatter: string or 'largeValue' or 'percent' or 'date' or 'labelByXValue'
    Description: Specifies the format for displaying data values.
    Type: 'largeValue' | 'percent' | 'date' | 'labelByXValue' | string

  valueFormatterPattern: string
    Description: A pattern string to customize value formatting.
    Type: string

  valueFormatterLabels: {
    x: number, // required
    label: string // required
  }
    Description: Custom labels for specific x-values in formatting.
    Type: {
      x: number,
      label: string
    }

  axisDependency: string
    Description: Specifies which axis (left or right) the data depends on.
    Type: string
```

--------------------------------

### Configure Chart Highlight Options

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Specifies how data points are highlighted on the chart, including index-based selection and stack information for stacked charts.

```APIDOC
highlights: [
  {
    x: number, 
    dataSetIndex: number,
    dataIndex: number,
    y: number,
    stackIndex: number
  }
]

// 'x' is required and represents the index of the x values.
// 'dataSetIndex' is used in stacked bar charts.
// 'dataIndex' is necessary in combined charts when default highlight is set. The default sequence is line, bar, scatter, candle, bubble.
```

--------------------------------

### Chart Base Properties

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines common properties for all charts in react-native-charts-wrapper. Includes configuration for grid background, borders, scaling, zooming, and viewport offsets.

```APIDOC
ChartBase:
  description: Base properties applicable to all chart types.
  properties:
    drawGridBackground:
      type: boolean
      description: Enables drawing of the grid background.
    gridBackgroundColor:
      type: number
      description: Sets the color of the grid background.
    drawBorders:
      type: boolean
      description: Enables drawing of chart borders.
    borderColor:
      type: number
      description: Sets the color of the chart borders.
    borderWidth:
      type: number
      description: Sets the width of the chart borders.
    minOffset:
      type: number
      description: Minimum offset for the chart axes.
    maxVisibleValueCount:
      type: number
      description: Maximum number of values to be visible on the chart.
    visibleRange:
      type: object
      description: Defines the visible range for X and Y axes.
      properties:
        x:
          type: object
          properties:
            min: number
            max: number
        y:
          type: object
          properties:
            left:
              type: object
              properties:
                min: number
                max: number
            right:
              type: object
              properties:
                min: number
                max: number
    autoScaleMinMaxEnabled:
      type: boolean
      description: Enables automatic scaling of minimum and maximum values.
    keepPositionOnRotation:
      type: boolean
      description: Keeps the chart position when the device is rotated.
    scaleEnabled:
      type: boolean
      description: Enables zooming and panning on the chart.
    scaleXEnabled:
      type: boolean
      description: Enables zooming and panning specifically on the X-axis.
    scaleYEnabled:
      type: boolean
      description: Enables zooming and panning specifically on the Y-axis.
    dragEnabled:
      type: boolean
      description: Enables dragging (panning) of the chart.
    pinchZoom:
      type: boolean
      description: Enables pinch-to-zoom functionality.
    doubleTapToZoomEnabled:
      type: boolean
      description: Enables zooming in/out with a double-tap gesture.
    yAksis:
      type: object
      description: Configuration for the Y-axis, supporting left and right axes.
      properties:
        left:
          type: object
          description: Configuration for the left Y-axis.
        right:
          type: object
          description: Configuration for the right Y-axis.
    zoom:
      type: object
      description: Sets the initial zoom level and position of the chart.
      properties:
        scaleX:
          type: number
          description: The scale factor for the X-axis.
        scaleY:
          type: number
          description: The scale factor for the Y-axis.
        xValue:
          type: number
          description: The X-coordinate value to center the zoom on.
        yValue:
          type: number
          description: The Y-coordinate value to center the zoom on.
        axisDependency:
          type: string
          enum: ['LEFT', 'RIGHT']
          description: Specifies which Y-axis the zoom is related to.
    viewPortOffsets:
      type: object
      description: Defines the offsets for the chart's viewport.
      properties:
        left:
          type: number
          description: Offset for the left side of the viewport.
        top:
          type: number
          description: Offset for the top of the viewport.
        right:
          type: number
          description: Offset for the right side of the viewport.
        bottom:
          type: number
          description: Offset for the bottom of the viewport.

```

--------------------------------

### Bar, Line, Scatter, Candle, Bubble Chart Highlight Configuration

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Configuration options specifically for highlighting elements in bar, line, scatter, candle, and bubble chart types.

```APIDOC
barLineScatterCandleBubble:
  highlightColor: number
    Description: The color to use when an element is highlighted.
    Type: number
```

--------------------------------

### Chart Properties Documentation (react-native-charts-wrapper)

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

This section details common properties applicable to all charts in the react-native-charts-wrapper library. It outlines the type, default value, and notes for each property, such as text, color, and position.

```APIDOC
Chart Properties:
  text: string
    Description: Text content for the chart element.
  textColor: number
    Description: Color of the text, specified as a number.
  textSize: number
    Description: Size of the text.
  positionX: number
    Description: X-coordinate for positioning the element.
  positionY: number
    Description: Y-coordinate for positioning the element.
```

--------------------------------

### Line and Radar Chart Fill Configuration

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Configuration options for filling areas in line and radar charts, including gradients and transparency.

```APIDOC
lineRadar:
  fillGradient: {
    colors: [number],
    // iOS
    positions: [numbers],
    angle: number,
    //Android
    orientation: 'TOP_BOTTOM' | 'TR_BL' | 'RIGHT_LEFT' | 'BR_TL' | 'BOTTOM_TOP' | 'BL_TR' | 'LEFT_RIGHT' | 'TL_BR'
  }
    Description: Defines a gradient fill for the chart area.
    Type: {
      colors: Array<number>,
      positions?: Array<number>,
      angle?: number,
      orientation?: 'TOP_BOTTOM' | 'TR_BL' | 'RIGHT_LEFT' | 'BR_TL' | 'BOTTOM_TOP' | 'BL_TR' | 'LEFT_RIGHT' | 'TL_BR'
    }

  fillColor: number
    Description: Sets a solid fill color for the chart area.
    Type: number

  fillAlpha: number
    Description: Sets the alpha (transparency) for the fill color or gradient.
    Type: number

  drawFilled: function
    Description: A function to control the drawing of the filled area.
    Type: function
```

--------------------------------

### PieRadarChartBase Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Base props for Pie and Radar charts, extending ChartBase. Includes properties for chart rotation and minimum offset.

```APIDOC
PieRadarChartBase:
  Extends: ChartBase
  Props:
    minOffset: number - The minimum offset for the chart.
    rotationEnabled: bool - Enables or disables chart rotation.
    rotationAngle: number - Sets the rotation angle of the chart.
```

--------------------------------

### Common Chart Properties

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Core properties applicable to all chart types, managing axis minimums, granularity, label counts, and value formatting.

```APIDOC
Common Chart Properties:
  axisMinimum: number
    - Sets the minimum value for an axis.
  granularity: number
    - Sets the minimum distance between axis labels.
  granularityEnabled: bool
    - Enables or disables granularity for axis labels.
  labelCount: number
    - Specifies the desired number of axis labels.
  labelCountForce: bool
    - Forces the display of the specified label count, even if it causes overlap.
  centerAxisLabels: bool
    - Centers axis labels instead of drawing them at their original position. Useful for grouped BarChart.
  valueFormatter: string | [string]
    - Specifies a predefined formatter ('largeValue', 'percent', 'date') or a custom string pattern.
  valueFormatterPattern: string
    - A pattern string for custom formatting of values.
  yOffset: number
    - Adjusts the vertical position of labels.
```

--------------------------------

### Line, Scatter, Candle, Radar Chart Highlight Indicator Configuration

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Configuration options for highlight indicators in line, scatter, candle, and radar chart types.

```APIDOC
lineScatterCandleRadar:
  drawVerticalHighlightIndicator: bool
    Description: Enables drawing a vertical line to indicate highlight.
    Type: boolean

  drawHorizontalHighlightIndicator: bool
    Description: Enables drawing a horizontal line to indicate highlight.
    Type: boolean

  highlightLineWidth: number
    Description: Sets the width of the highlight indicator lines.
    Type: number
```

--------------------------------

### Legend Properties Documentation (react-native-charts-wrapper)

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

This section describes the properties for configuring the legend in react-native-charts-wrapper. It covers enabling the legend, text formatting, alignment, orientation, and custom styling options.

```APIDOC
Legend Properties:
  enabled: bool
    Description: Enables or disables the chart legend.
  text: string
    Description: Text to display in the legend.
  textColor: number
    Description: Color of the legend text.
  textSize: number
    Description: Size of the legend text.
  fontFamily: string
    Description: Font family for the legend text.
  fontStyle: number
    Description: Style of the legend text font.
  wordWrapEnabled: bool
    Description: Enables word wrapping for legend text.
  maxSizePercent: number
    Description: Maximum size of the legend as a percentage.
  horizontalAlignment: 'LEFT' | 'CENTER' | 'RIGHT'
    Description: Horizontal alignment of the legend.
  verticalAlignment: 'TOP' | 'CENTER' | 'BOTTOM'
    Description: Vertical alignment of the legend.
  orientation: 'HORIZONTAL' | 'VERTICAL'
    Description: Orientation of the legend entries.
  drawInside: bool
    Description: Determines if the legend is drawn inside the chart area.
  direction: 'LEFT_TO_RIGHT' | 'RIGHT_TO_LEFT'
    Description: Direction of legend entry layout.
  form: string
    Description: Shape of the legend form (e.g., 'SQUARE', 'CIRCLE').
  formSize: number
    Description: Size of the legend form.
  xEntrySpace: bool
    Description: Spacing between legend entries on the X-axis.
  yEntrySpace: number
    Description: Spacing between legend entries on the Y-axis.
  formToTextSpace: number
    Description: Space between the legend form and its associated text.
  custom: {
    colors: [number],
    labels: [string]
  }
    Description: Custom styling for legend colors and labels.
```

--------------------------------

### PieRadarChartBase Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the PieRadarChartBase component, extending base props with specific chart functionalities.

```APIDOC
PieRadarChartBase Props:
  yAxis: YAxis
    Description: Configuration for the Y-axis.
    Type: YAxis

  drawWeb: bool
    Description: Enables or disables drawing the web background.
    Type: boolean

  skipWebLineCount: number
    Description: Number of web lines to skip drawing.
    Type: number

  data: DataTypes.radarData
    Description: The data object for radar charts.
    Type: DataTypes.radarData
```

--------------------------------

### PieChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the PieChart component, extending PieRadarChartBase. Offers extensive customization for entry labels, center text, and hole appearance.

```APIDOC
PieChart:
  Extends: PieRadarChartBase
  Props:
    extraOffsets: {
      left: number,
      top: number,
      right: number,
      bottom: number
    } - Custom offsets for the chart.
    drawEntryLabels: bool - Whether to draw labels for each data entry.
    usePercentValues: bool - Displays values as percentages.
    centerText: string - Text to display in the center of the pie chart.
    styledCenterText: {
      text: string,
      color: number,
      fontFamily: string,
      size: number
    } - Styled text for the center of the pie chart.
    centerTextRadiusPercent: number - Radius percentage for the center text.
    holeRadius: number - Radius of the hole in the center of the pie chart.
    holeColor: number - Color of the hole in the center of the pie chart.
    transparentCircleRadius: number - Radius of the transparent circle around the hole.
    transparentCircleColor: number - Color of the transparent circle.
    entryLabelColor: number - Color of the entry labels.
    entryLabelTextSize: number - Text size of the entry labels.
    entryLabelFontFamily: string - Font family of the entry labels.
    maxAngle: number - Maximum angle for the pie chart slices.
    data: DataTypes.pieData - The data for the pie chart.
```

--------------------------------

### RadarChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the RadarChart component, extending PieRadarChartBase. This section is incomplete as only the base props were provided.

```APIDOC
RadarChart:
  Extends: PieRadarChartBase
  Props: (Details not fully provided in source text)
```

--------------------------------

### yAxis Properties for React Native Charts

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines configuration options for the y-axis in charts, including inversion, spacing, positioning, and zero line styling.

```APIDOC
yAxis Properties:
  inverted: number
    - Inverts the y-axis scale.
  left: config
    - Applies configuration to the left y-axis line.
  right: config
    - Applies configuration to the right y-axis line.
  spaceTop: bool
    - Enables top spacing for the y-axis.
  spaceBottom: number
    - Sets the amount of bottom spacing for the y-axis.
  position: number
    - Sets the position of the y-axis.
  maxWidth: bool
    - Sets the maximum width for the y-axis.
  minWidth: string
    - Sets the minimum width for the y-axis.
  zeroLine: {
    enabled: bool,
    lineWidth: number,
    lineColor: number
  }
    - Configures the zero line, including its enabled state, line width, and color.
```

--------------------------------

### React Native Charts Wrapper Component Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

This section details the props inherited from React Native's 'View' component and the specific props for the charts-wrapper library. Each prop includes its type, default value, and any relevant notes for usage.

```APIDOC
Chart Base Props:

Inherits props from react-native 'View'.

Props:

- animation: { durationX: number, durationY: number, easingX: string, easingY: string }
  - Description: Configuration for chart animations, specifying durations in milliseconds and easing functions.
  - Default: Not specified.
  - Note: Durations are in milliseconds.

- chartBackgroundColor: number
  - Description: Sets the background color of the chart.
  - Default: Not specified.

- logEnabled: bool
  - Description: Enables or disables logging for the chart component.
  - Default: Not specified.

- noDataText: string
  - Description: Text to display when there is no data to render in the chart.
  - Default: Not specified.

- noDataTextColor: number
  - Description: Color for the 'noDataText'.
  - Default: Not specified.

- touchEnabled: bool
  - Description: Enables or disables touch interactions on the chart.
  - Default: Not specified.

- dragDecelerationEnabled: bool
  - Description: Enables or disables deceleration effect when dragging on the chart.
  - Default: Not specified.

- dragDecelerationFrictionCoef: function
  - Description: Coefficient to control the friction for drag deceleration.
  - Default: Not specified.

- chartDescription: Description
  - Description: Configuration object for the chart's description.
  - Default: Not specified.

Note: The 'Description' type for 'chartDescription' implies a complex object or a custom type definition not fully detailed here.
```

--------------------------------

### xAxis Properties for React Native Charts

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines configuration options for the x-axis in charts, including label rotation, clipping avoidance, position, and value formatting patterns.

```APIDOC
xAxis Properties:
  labelRotationAngle: number
    - Rotates axis labels by a specified angle.
  avoidFirstLastClipping: bool
    - Prevents clipping of the first and last labels on the axis.
  position: string
    - Sets the position of the x-axis. Must be in uppercase (e.g., 'TOP', 'BOTTOM'). Android will error if lowercase.
  valueFormatterPattern: string
    - A pattern string for formatting x-axis values.
```

--------------------------------

### Direct Chart Function Calls

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/README.md

Provides methods to programmatically control chart behavior, such as highlighting data points, navigating the view, and managing data updates.

```APIDOC
chart.highlights(entries)
  - Highlights specific data entries on the chart.
  - If an empty array is passed (highlights([])), it clears all existing highlights.
  - Parameters:
    - entries: An array of objects representing the entries to highlight.

chart.moveViewTo(x, y)
  - Moves the chart's view to a specific x and y coordinate.

chart.moveViewToX(x)
  - Moves the chart's view to a specific x-coordinate.

chart.moveViewToAnimated(x, y, duration)
  - Animates the chart's view to a specific x and y coordinate over a given duration.
  - Parameters:
    - x: The target x-coordinate.
    - y: The target y-coordinate.
    - duration: The duration of the animation in milliseconds.

chart.centerViewTo(x, y, scaled)
  - Centers the chart's view on a specific x and y coordinate, optionally scaling.
  - Parameters:
    - x: The target x-coordinate.
    - y: The target y-coordinate.
    - scaled: Boolean indicating if scaling should be applied.

chart.centerViewToAnimated(x, y, scaled, duration)
  - Animates the chart's view to center on a specific x and y coordinate.
  - Parameters:
    - x: The target x-coordinate.
    - y: The target y-coordinate.
    - scaled: Boolean indicating if scaling should be applied.
    - duration: The duration of the animation in milliseconds.

chart.fitScreen()
  - Adjusts the chart's view to fit the entire dataset onto the screen.

chart.setDataAndLockIndex(data)
  - Sets new data for the chart and attempts to maintain the current zoom and scroll position.
  - Behavior Note: When loading more data (e.g., infinite scroll), the range (xMax - xMin) of the new data should ideally match the original data's range to prevent chart blinking or inaccurate position transitions. This is a known limitation primarily on Android.
  - Example Use Case: Useful for scenarios where new data is appended without disrupting the user's current view.
  - Related: Useful in conjunction with group/identifier/syncX/syncY for linked charts.
```

--------------------------------

### BarChart Properties

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Extends base chart properties with specific configurations for Bar Charts. Includes options for drawing values above bars and bar shadows.

```APIDOC
BarChart:
  description: Properties specific to the BarChart component.
  inherits: ChartBase
  properties:
    drawValueAboveBar:
      type: boolean
      description: If true, draws the value of each bar above the bar.
    drawBarShadow:
      type: boolean
      description: If true, draws a shadow behind each bar.
    data:
      type: DataTypes.barData
      description: The data to be displayed in the bar chart.

```

--------------------------------

### LineChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the LineChart component, extending BarLineChartBase. Primarily requires line-specific data.

```APIDOC
LineChart:
  Extends: BarLineChartBase
  Props:
    data: DataTypes.lineData - The data for the line chart.
```

--------------------------------

### Common xAxis and yAxis Properties

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

This section details common configuration properties for both the xAxis and yAxis components in the react-native-charts-wrapper. It covers properties for enabling/disabling drawing elements, text styling, line styling, and defining limit lines.

```APIDOC
CommonAxisProps:
  enabled: bool
    - Description: Controls whether the axis is enabled.

  drawLabels: bool
    - Description: Controls whether axis labels are drawn.

  drawAxisLine: bool
    - Description: Controls whether the axis line is drawn.

  drawGridLines: bool
    - Description: Controls whether grid lines are drawn.

  textColor: number
    - Description: Sets the color of the axis labels.

  textSize: number
    - Description: Sets the font size of the axis labels.

  fontFamily: string
    - Description: Sets the font family for the axis labels.

  fontStyle: number
    - Description: Sets the font style for the axis labels.

  gridColor: number
    - Description: Sets the color of the grid lines.

  gridLineWidth: number
    - Description: Sets the width of the grid lines.

  axisLineColor: number
    - Description: Sets the color of the axis line.

  axisLineWidth: number
    - Description: Sets the width of the axis line.

  gridDashedLine: {
    lineLength: number,
    spaceLength: number,
    phase: number
  }
    - Description: Configures dashed grid lines with specified length, space, and phase.

  limitLines: array of {
    limit: number,
    label: string,
    lineColor: number,
    lineWidth: number,
    valueTextColor: number,
    valueFont: number,
    fontFamily: string,
    fontStyle: string,
    fontWeight: string,
    labelPosition: string,
    lineDashPhase: number,
    lineDashLengths: [number]
  }
    - Description: Defines limit lines with various styling and positioning options.

  drawLimitLinesBehindData: bool
    - Description: Determines if limit lines are drawn behind the chart data.

  axisMaximum: number
    - Description: Sets the maximum value for the axis.
```

--------------------------------

### pieData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for pie chart data, specifying values (numbers or objects with value, label) and dataset labels, along with configuration for slice spacing and text positioning.

```typescript
type pieData {
  dataSets: [
    {
      values: [
        {
          value: number, // required
          label: string
        }
        or number
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,

        sliceSpace: number,
        selectionShift: number,
        xValuePosition: string, // INSIDE_SLICE,OUTSIDE_SLICE
        yValuePosition: string // INSIDE_SLICE,OUTSIDE_SLICE
      }
    }
  ]
}
```

--------------------------------

### Chart Callbacks and Events

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/README.md

Details the supported callbacks for chart interactions, such as value selection and gesture events. Note that event support varies between iOS and Android platforms due to underlying library differences. The library generally follows Android conventions.

```APIDOC
onSelect: Triggered when a chart value is selected. The event object contains touch coordinates and selected data, including marker labels.

onChange: Triggered for various supported events on each platform. Event support differs between iOS and Android.

Supported Events:
- chartScaled: When a chart is scaled/zoomed via a pinch gesture. (iOS: ✅, Android: ✅)
- chartTranslated: When a chart is moved/translated via a drag gesture. (iOS: ✅, Android: ✅)
- chartPanEnd: When a chart pan gesture ends. (iOS: ✅, Android: ❌)
- chartGestureStart: When a chart gesture starts. (iOS: ❌, Android: ✅)
- chartGestureEnd: When a chart gesture ends. (iOS: ❌, Android: ✅)
- chartLongPress: When a chart is long pressed. (iOS: ❌, Android: ✅)
- chartSingleTap: When a chart is single tapped. (iOS: ❌, Android: ✅)
- chartFling: When a chart receives a fling gesture. (iOS: ❌, Android: ✅)
- doubleTapped: When a chart is double tapped. (iOS: ❌, Android: ✅)

Convention Note: Use `processColor` for setting colors, as Android alpha is 0-255 and iOS is 0-1. Animation durations are in milliseconds for MPAndroidChart and seconds for Charts; the library uses Android conventions.
```

--------------------------------

### ScatterChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the ScatterChart component, extending BarLineChartBase. Requires scatter-specific data.

```APIDOC
ScatterChart:
  Extends: BarLineChartBase
  Props:
    data: DataTypes.scatterData - The data for the scatter chart.
```

--------------------------------

### CombinedChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the CombinedChart component, extending BarLineChartBase. Supports combined data types and custom draw order.

```APIDOC
CombinedChart:
  Extends: BarLineChartBase
  Props:
    data: DataTypes.combinedData - The data for the combined chart.
    drawOrder: array with one of: ['SCATTER', 'BAR', 'LINE'] - Specifies the drawing order of chart elements.
```

--------------------------------

### Chart Synchronization Properties

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/README.md

Special properties to enable chart linking and synchronized interactions between multiple charts.

```APIDOC
group: string
  - Assigns charts to a common group for synchronization.
  - Charts within the same group will mirror operations (e.g., zooming, panning) performed on each other.
  - Synchronization is handled at the native side for better performance.
  - Example Use Case: Linking a main chart with a smaller overview chart.

identifier: string
  - Used in conjunction with 'group' to specify which chart within a group should trigger synchronization.

syncX: boolean
  - Enables synchronization of X-axis panning and zooming across charts in the same group.

syncY: boolean
  - Enables synchronization of Y-axis scaling across charts in the same group.

Related: Can be combined with setDataAndLockIndex for advanced scenarios like stock kLine charts.
```

--------------------------------

### BubbleChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the BubbleChart component, extending BarLineChartBase. It primarily accepts bubble-specific data.

```APIDOC
BubbleChart:
  Extends: BarLineChartBase
  Props:
    data: DataTypes.bubbleData - The data for the bubble chart.
```

--------------------------------

### bubbleData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for bubble chart data, specifying values with x, y coordinates and size, along with dataset labels and common configurations.

```typescript
type bubbleData {
  dataSets: [
    {
      values: [
        {
          x: PropTypes.number,
          y: PropTypes.number, // required
          size: PropTypes.number, // required
          marker: PropTypes.string,
        }
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.barLineScatterCandleBubble
      }
    }
  ]
}
```

--------------------------------

### HorizontalBarChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the HorizontalBarChart component, extending BarLineChartBase. Includes options for drawing values above bars and bar shadows.

```APIDOC
HorizontalBarChart:
  Extends: BarLineChartBase
  Props:
    drawValueAboveBar: bool - Whether to draw the value label above the bar.
    drawBarShadow: bool - Whether to draw a shadow behind each bar.
    data: DataTypes.barData - The data for the horizontal bar chart.
```

--------------------------------

### radarData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for radar chart data, including dataset values and labels, suitable for representing multivariate data.

```typescript
type radarData {
  dataSets: [
    {
      values: [
        {
          value: number // required
        }
        or number
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.lineScatterCandleRadar,
        // ...ConfigTypes.lineRadar
      }
    }
  ],
  labels: [string]
}
```

--------------------------------

### CandleStickChart Props

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Props for the CandleStickChart component, extending BarLineChartBase. It requires candle-specific data.

```APIDOC
CandleStickChart:
  Extends: BarLineChartBase
  Props:
    data: DataTypes.candleData - The data for the candlestick chart.
```

--------------------------------

### barData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for bar chart data, supporting single or stacked bars, custom values (numbers or arrays), labels, and grouping configurations for bars.

```typescript
type barData {
  dataSets: [
    {
      values: [
        {
          x: number,
          y: number or [number],
          marker: string or [string]
        }
        or number or [number]
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.barLineScatterCandleBubble,
        barShadowColor: number,
        highlightAlpha: number,  // using android format (0-255), not ios format(0-1), the conversion is x/255
        stackLabels: [string]
      }
    }
  ],
  config: {
    barWidth: number,
    group: {
      fromX: number, // required
      groupSpace: number, // required
      barSpace: number // required
    }
  }
}
```

--------------------------------

### candleData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for candlestick chart data, including OHLC (Open, High, Low, Close) values, shadow information, and specific styling for increasing/decreasing candles.

```typescript
type candleData {
  dataSets: [
    {
      values: [
        {
          x: number,
          shadowH: number, // required
          shadowL: number, // required
          open: number, // required
          close: number, // required
          marker: string,
        }
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.barLineScatterCandleBubble,
        // ...ConfigTypes.lineScatterCandleRadar,

        barSpace: number,
        shadowWidth: number,
        shadowColor: number,
        shadowColorSameAsCandle: bool,
        neutralColor: number,
        decreasingColor: number,
        decreasingPaintStyle: string,
        increasingColor: number,
        increasingPaintStyle: string
      }
    }
  ]
}
```

--------------------------------

### lineData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for line chart data, including datasets, values (numbers or objects with x, y, marker), labels, and extensive configuration options for drawing lines, circles, and dashed patterns.

```typescript
type lineData {
  dataSets: [
    {
      values: [
        number or
        {
          x: number,
          y: number,
          marker: string
        }
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.barLineScatterCandleBubble,
        // ...ConfigTypes.lineScatterCandleRadar,
        // ...ConfigTypes.lineRadar,
        circleRadius: number,
        drawCircles: bool,
        mode: bool,
        lineWidth: number, // min: 0, max: 10
        drawCubicIntensity: number,
        circleColor: number,
        circleColors: [number],
        circleHoleColor: number,
        drawCircleHole: bool,
        dashedLine: {
          lineLength: number, // required
          spaceLength: number, // required
          phase: number
        },
        fillFormatter: {
            min: number // required
        }
      }
    }
  ]
}
```

--------------------------------

### Custom Marker Content

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/README.md

Supports the ability to define custom content for chart markers, allowing for richer data point information display.

```APIDOC
Custom Marker Content
  - The library allows for custom rendering of marker content when a data point is selected.
  - This enables displaying detailed information, custom layouts, or interactive elements associated with a data point.
  - Refer to the 'TimeSeriesLineChart' example for implementation details.
```

--------------------------------

### scatterData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines the structure for scatter plot data, specifying values with x, y coordinates, optional marker, and scatter shape configurations.

```typescript
type scatterData {
  dataSets: [
    {
      values: [
        {
          x: number,
          y: number, // required
          marker: string,
        }
        or number
      ],
      label: string, // required
      config: {
        // ...ConfigTypes.common,
        // ...ConfigTypes.barLineScatterCandleBubble,
        // ...ConfigTypes.lineScatterCandleRadar,

        scatterShapeSize: number,
        scatterShape: 'SQUARE' or 'CIRCLE' or 'TRIANGLE' or 'CROSS' or 'X'
        scatterShapeHoleColor: number,
        scatterShapeHoleRadius: number
      }
    }
  ],
  labels: [string]
}
```

--------------------------------

### combinedData Type

Source: https://github.com/wuxudong/react-native-charts-wrapper/blob/master/docs.md

Defines a composite data structure that can hold multiple chart data types (line, bar, scatter, candle, bubble) together for combined chart visualizations.

```typescript
type combinedData {
  lineData: lineData,
  barData: barData,
  scatterData: scatterData,
  candleData: candleData,
  bubbleData: bubbleData
}
```
Tokens:
Raw