![\"Bar](\"./screenshots/BarChart.gif\")
\n\n \n
\n ![\"Bar](\"./screenshots/AreaChart.gif\")
\n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `alwaysShowIndicator`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nDetermines if the indicator for the chart should be visible always or just when being touched. For [`SlideAreaChart`](#area-chart-props) the indicator is the [`CursorMarker`, `CursorLine`](#cursor), and [`ToolTip`](#tool-tip). For [`SlideBarChart`](#bar-chart-props) the indicator is the [`barSelectedColor`](#barselectedcolor) or [`renderSelectedFillGradient`](#renderselectedfillgradient) and [`ToolTip`](#tool-tip).\n\n | \n
| \n \n ##### `animated`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nAnimates the charts on mounting and between prop updates.\n\n | \n
| \n \n ##### `axisHeight`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nHeight of the area below the chart for the X-Axis markers and label to render in.\n\n | \n
| \n \n ##### `axisWidth`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nWidth of the area left of the chart for the Y-Axis markers and label to render in.\n\n | \n
| \n \n ##### `callbackWithX`\n | \n\n\n```ts\n(x: number\n| Date)\n=> void\n```\n\n | \n\n\n`undefined`\n\n | \n\n\nCallback function that provides the current [Cursor](#cursor) position `x`. As this is firing off of a continuous animation and not state the usage should match appropriately. e.g. This can be used in conjunction with an array of timed gps points to move an indicator along a path on a map.\n\n | \n
| \n \n ##### `callbackWithY`\n | \n\n\n```ts\n(y: number)\n=> void\n```\n\n | \n\n\n`undefined`\n\n | \n\n\nCallback function that provides the current [Cursor](#cursor) position `y`. As this is firing off of a continuous animation and not state the usage should match appropriately. e.g. This can be used with direct manipulation on a `TextInput` to display the current value outside the chart.\n\n | \n
| \n \n ##### `chartPaddingTop`\n | \n\n\n`number`\n\n | \n\n\n`16`\n\n | \n\n\nPushes the rendered height of the data within the chart down to make room for the [`ToolTip`](#tool-tip-props) at the max. The [`ToolTip`](#tool-tip-props) will render outside of the chart component if desired so this can be set to `0`, or adjusted for using [`paddingTop`](#paddingtop) or [`style`](#style) instead if desired.\n\n | \n
| \n \n ##### `data`\n | \n\n\n```ts\nArray<{\n x: number\n | Date,\n y: number\n}>\n```\n\n | \n\n\n`[]`\n\n | \n\n\nData that will be displayed on the chart. This must be an array of objects with `x` and `y` values with the `x` increasing from index `0` onward as the chart does not sort the array before use and will render incorrectly otherwise.\n\n | \n
| \n \n ##### `fillColor`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nColor to fill the bars of the bar chart or area of the area chart. Takes precedence over [`renderFillGradient`](#renderfillgradient) when applied.\n\n | \n
| \n \n ##### `height`\n | \n\n\n`number`\n\n | \n\n\n`200`\n\n | \n\n\nHeight of the entire chart component.\n\n | \n
| \n \n ##### `onPress`\n | \n\n\n```ts\n() => void\n```\n\n | \n\n\n`undefined`\n\n | \n\n\nIf provided the chart will not be interactive and instead can be pressed.\n\n | \n
| \n \n ##### `paddingBottom`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nBottom padding as it can not be applied via [`style`](#style) to the chart component.\n\n | \n
| \n \n ##### `paddingLeft`\n | \n\n\n`number`\n\n | \n\n\n`8`\n\n | \n\n\nLeft padding as it can not be applied via [style](#style) to the chart component.\n\n | \n
| \n \n ##### `paddingRight`\n | \n\n\n`number`\n\n | \n\n\n`8`\n\n | \n\n\nRight padding as it can not be applied via [style](#style) to the chart component.\n\n | \n
| \n \n ##### `paddingTop`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nTop padding as it can not be applied via [style](#style) to the chart component.\n\n | \n
| \n \n ##### `renderFillGradient`\n | \n\n\n```ts\n(props:\nGradientProps)\n=> JSX.Element\n| null\n```\n\n | \n\n\n[Default Area Chart](#default-area-chart-fill-gradient)\n[Default Bar Chart](#default-bar-chart-fill-gradient)\n\n | \n\n\nFunction that takes [`GradientProps`](#gradient-props) and returns a custom gradient to fill the bars of the bar chart or area of the area chart.\n\n | \n
| \n \n ##### `scrollable`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nEnsure touch is passed to [`scrollView`](https://facebook.github.io/react-native/docs/scrollview) on `y` movement if component is inside [`scrollView`](https://facebook.github.io/react-native/docs/scrollview).\n\n | \n
| \n \n ##### `shouldCancelWhenOutside`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nTerminates touch outside the chart component.\n\n | \n
| \n \n ##### `showIndicatorCallback`\n | \n\n\n```ts\n(opacity: number)\n=> void\n```\n\n | \n\n\n`undefined`\n\n | \n\n\nIf [`alwaysShowIndicator`](#alwaysshowindicator) is `false` this function is fired with the current indicator opacity whenever the indicator appears or disappears.\n\n | \n
| \n \n ##### `style`\n | \n\n\n`ViewStyle`\n\n | \n\n\n```ts\n{backgroundColor:\n'#fff'}\n```\n\n | \n\n\nStyle of chart component.\n\n | \n
| \n \n ##### `throttleAndroid`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nOn some slower Android devices there may be too many calls across the bridge that it can cause some lagging of the indicator movement, this limits the calls to the queue on Android with little noticeable change in the interaction.\n\n | \n
| \n \n ##### `toolTipProps`\n | \n\n\n[`ToolTipProps`](#tool-tip-props)\n\n | \n\n\n`undefined`\n\n | \n\n\nProps for rendering the [`ToolTip`](#tool-tip).\n\n | \n
| \n \n ##### `width`\n | \n\n\n`number`\n\n | \n\n\n```ts\nDimensions\n.get('window')\n.width\n```\n\n | \n\n\nWidth of the entire chart.\n\n | \n
| \n \n ##### `xAxisProps`\n | \n\n\n[`XAxisProps`](#x-axis-props)\n\n | \n\n\n`undefined`\n\n | \n\n\nProps for rendering the [`XAxis`](#x-axis-props).\n\n | \n
| \n \n ##### `xRange`\n | \n\n\n```ts\n[number, number]\n| [Date, Date]\n```\n\n | \n\n\nValue of `x` in first and last object in [`data`](#data) array.\n\n | \n\n\nThe range for the [`XAxis`](#x-axis-props) of the chart to be rendered.\n\n | \n
| \n \n ##### `xScale`\n | \n\n\n```ts\n'time' | 'linear'\n```\n\n | \n\n\n`'linear'`\n\n | \n\n\nDetermines the applied [`d3` scale](https://www.d3indepth.com/scales/) of the chart.\n\n | \n
| \n \n ##### `yAxisProps`\n | \n\n\n[`YAxisProps`](#y-axis-props)\n\n | \n\n\n`undefined`\n\n | \n\n\nProps for rendering the [YAxis](#y-axis-props).\n\n | \n
| \n \n ##### `yRange`\n | \n\n\n```ts\n[number, number]\n```\n\n | \n\n\nMax and Min value of `y` in [`data`](#data) array\n\n | \n\n\nThe range for the [`YAxis`](#y-axis-props) of the chart to be rendered.\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `barSelectedColor`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nSets the bar color for the selected bar. Takes precedence over [`renderSelectedFillGradient`](#renderselectedfillgradient).\n\n | \n
| \n \n ##### `barSpacing`\n | \n\n\n`number`\n\n | \n\n\n`1`\n\n | \n\n\nSets the space that should be rendered between each bar on the bar chart.\n\n | \n
| \n \n ##### `barWidth`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nSets the width of each bar, takes precedence over [`barSpacing`](#barspacing) when applied.\n\n | \n
| \n \n ##### `hideSelection`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nPrevents [`fillColor`](#fillcolor) or [`renderSelectedFillGradient`](#renderselectedfillgradient) from being applied to the selected bar.\n\n | \n
| \n \n ##### `renderSelectedFillGradient`\n | \n\n\n```ts\n(props:\nGradientProps)\n=> JSX.Element\n| null\n```\n\n | \n\n\n[Default Selected Fill Gradient](#default-bar-chart-selected-fill-gradient)\n\n | \n\n\nFunction that takes [`GradientProps`](#gradient-props) and returns a custom gradient to fill the selected bar.\n\n | \n
| \n \n ##### `selectionChangedCallback`\n | \n\n\n```ts\n(bar: number)\n=> void\n```\n\n | \n\n\n`undefined`\n\n | \n\n\nThis callback is fired when the bar selection has changed via touch. This can be used to fire off haptic feedback to the user, or for other side effects. If using [expo](https://expo.io/) [`selection`](https://developer.apple.com/documentation/uikit/uiselectionfeedbackgenerator) feedback on iOS using [`expo-haptics`](https://github.com/expo/expo/tree/master/packages/expo-haptics) is suggested.\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `cursorProps`\n | \n\n\n[`CursorProps`](#cursor-props)\n\n | \n\n\n```ts\n{cursorMarkerHeight: 24,\ncursorMarkerWidth: 24,\ncursorWidth: 2}\n```\n\n | \n\n\nProps for [`Cursor`](#cursor) that follows the touch.\n\n | \n
| \n \n ##### `curveType`\n | \n\n\n```ts\nshape.CurveFactory\n| shape\n.CurveFactoryLineOnly\n```\n\n | \n\n\n```ts\nshape.curveMonotoneX\n```\n\n | \n\n\nType of curve to use for the area chart from [`d3-shape`](https://github.com/d3/d3-shape#curves).\n\n | \n
| \n \n ##### `chartLineColor`\n | \n\n\n`string`\n\n | \n\n\n`'#0081EB'`\n\n | \n\n\nColor for the line designating the data charted.\n\n | \n
| \n \n ##### `chartLineWidth`\n | \n\n\n`number`\n\n | \n\n\n`3`\n\n | \n\n\nStroke width of the line designating the data charted.\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `axisLabel`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nLabel for the axis.\n\n | \n
| \n \n ##### `axisLabelStyle`\n | \n\n\n```ts\nTSpanProps &\n{ color: string }\n```\n\n | \n\n\n```ts\n{fontSize: 13,\ncolor: '#777'}\n```\n\n | \n\n\nStyling for [axisLabel](#axislabel), extends [`TSpanProps`](https://github.com/react-native-community/react-native-svg/blob/master/src/index.d.ts) from [`react-native-svg`](https://github.com/react-native-community/react-native-svg) with type `color`.\n\n | \n
| \n \n ##### `labelTopPadding`\n | \n\n\n`number`\n\n | \n\n\n`4`\n\n | \n\n\nSpace above the label to offset it from either the top of the component ([Y-Axis](#y-axis-props)) or the bottom of the chart ([X-Axis](#x-axis-props)).\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `adjustForSpecialMarkers`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nIf [`specialStartmarker`](#specialstartmarker) or [`specialEndMarker`](#specialendmarker) are set it adjusts the text to left or right align to the edge of the chart.\n\n | \n
| \n \n ##### `axisLabelAlignment`\n | \n\n\n[`XAxisLabelAlignment`](#xaxislabelalignment)\n\n | \n\n\n`right`\n\n | \n\n\nPosition for the [axisLabel](#axislabel) below the chart.\n\n | \n
| \n \n ##### `axisMarkerLabels`\n | \n\n\n```ts\nstring[]\n```\n\n | \n\n\n`[]`\n\n | \n\n\nArray of labels placed below the chart, these will line up with the bars if there are an adequate amount, or space evenly otherwise.\n\n | \n
| \n \n ##### `labelBottomOffset`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nIf [`axisMarkerLabels`](#axismarkerlabels) and [`axisLabel`](#axislabel) the [`axisLabel`](#axislabel) will bottom justify and this offset will apply to it.\n\n | \n
| \n \n ##### `markerSpacing`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nIf [`axisMarkerLabels`](#axismarkerlabels) are overcrowded a number of empty marker spaces can be given to set between each marker shown.\n\n | \n
| \n \n ##### `markerTopPadding`\n | \n\n\n`number`\n\n | \n\n\n`4`\n\n | \n\n\nThe [axis marker labels](#axismarkerlabels) are top justified below the chart, this is the space between the marker and the chart.\n\n | \n
| \n \n ##### `minimumSpacing`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nThe first and last marker are always shown then the rest are laid out left to right; if the marker before the final one would layout closer than [`markerSpacing`](#markerspacing) to the final marker, this can be avoided with minimum spacing. This is also useful in making room for a [`specialEndMarker`](#specialendmarker).\n\n | \n
| \n \n ##### `specialEndMarker`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nThe right hand marker of the chart can be set to a special marker. e.g. 'end'\n\n | \n
| \n \n ##### `specialStartMarker`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nThe left hand marker of the chart can be set to a special marker. e.g. 'start'\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `averageLineColor`\n | \n\n\n`string`\n\n | \n\n\n`'#77777780'`\n\n | \n\n\nColor for average line.\n\n | \n
| \n \n ##### `averageMarkerDecimals`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nNumber of decimal places to show in the average marker if [`markAverageLine`](#markaverageline) is `true`.\n\n | \n
| \n \n ##### `axisAverageMarkerStyle`\n | \n\n\n```ts\nTSpanProps &\n{ color:\nstring }\n```\n\n | \n\n\n```ts\n{\nfontSize:\n13,\ncolor:\n'#77777780'\n}\n```\n\n | \n\n\nStyling for marker, extends [`TSpanProps`](https://github.com/react-native-community/react-native-svg/blob/master/src/index.d.ts) from [`react-native-svg`](https://github.com/react-native-community/react-native-svg) with type `color`.\n\n | \n
| \n \n ##### `axisLabelAlignment`\n | \n\n\n[`YAxisLabelAlignment`](#yaxislabelalignment)\n\n | \n\n\n`aboveTicks`\n\n | \n\n\nPosition for the axis label left of the chart.\n\n | \n
| \n \n ##### `axisMarkerStyle`\n | \n\n\n```ts\nTSpanProps &\n{ color:\nstring }\n```\n\n | \n\n\n```ts\n{fontSize:\n13,\ncolor:\n'#222'}\n```\n\n | \n\n\nStyling for markers, extends [`TSpanProps`](https://github.com/react-native-community/react-native-svg/blob/master/src/index.d.ts) from [`react-native-svg`](https://github.com/react-native-community/react-native-svg) with type `color`.\n\n | \n
| \n \n ##### `fullBaseLine`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nExtends bottom line of chart to left edge.\n\n | \n
| \n \n ##### `hideMarkers`\n | \n\n\n`boolean`\n\n | \n\n\n`undefined`\n\n | \n\n\nHides the markers on the Y-Axis without hiding the tick lines.\n\n | \n
| \n \n ##### `horizontalLineColor`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nColor for horizontal lines, overrides [`renderHorizontalLineGradient`](#renderhorizontallinegradient).\n\n | \n
| \n \n ##### `horizontalLineWidth`\n | \n\n\n`number`\n\n | \n\n\n`1`\n\n | \n\n\nStroke width for horizontal lines.\n\n | \n
| \n \n ##### `interval`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nSpacing for the Y-Axis ticks, this is determined using [`numberOfTicks`](#numberofticks) and [`yRange`](#yrange) if not defined while [`numberOfTicks`](#numberofticks) is given.\n\n | \n
| \n \n ##### `labelLeftOffset`\n | \n\n\n`number`\n\n | \n\n\n`0`\n\n | \n\n\nIf there are ticks with labels and an [`axisLabel`](#axislabel) the [`axisLabel`](#axislabel) will left justify and this offset will apply to it.\n\n | \n
| \n \n ##### `markAverageLine`\n | \n\n\n`boolean`\n\n | \n\n\n`undefined`\n\n | \n\n\nShow marker next to the average of the data.\n\n | \n
| \n \n ##### `markerChartOffset`\n | \n\n\n`number`\n\n | \n\n\n`4`\n\n | \n\n\nSpacing between the markers and the chart to the left of the chart i.e. right of the markers.\n\n | \n
| \n \n ##### `markFirstLine`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nShow marker next to bottom line, often `0` and not visually needed.\n\n | \n
| \n \n ##### `numberOfTicks`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nNumber of ticks the chart should have, spaced via [`interval`](#interval).\n\n | \n
| \n \n ##### `renderHorizontalLineGradient`\n | \n\n\n```ts\n(props:\nGradientProps\n& { count:\nnumber }) =>\nJSX.Element\n| null\n```\n\n | \n\n\n[Default Horizontal Line Gradient](#default-horizontal-line-gradient)\n\n | \n\n\nFunction that takes [`GradientProps`](#gradient-props) and returns a custom gradient for the horizontal lines. The `Defs` prop `key` must match the default, i.e. `key={props.id}`.\n\n | \n
| \n \n ##### `renderVerticalLineGradient`\n | \n\n\n```ts\n(props:\nGradientProps)\n=> JSX.Element\n| null\n```\n\n | \n\n\n[Default Vertical Line Gradient](#default-vertical-line-gradient)\n\n | \n\n\nFunction that takes [`GradientProps`](#gradient-props) and returns a custom gradient for the vertical side lines. The `Defs` prop `key` must match the default, i.e. `key={'verticalLineGradient'}`.\n\n | \n
| \n \n ##### `rotateAxisLabel`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nRotates the [Y-Axis label](#axislabel) vertically.\n\n | \n
| \n \n ##### `showAverageLine`\n | \n\n\n`boolean`\n\n | \n\n\n`undefined`\n\n | \n\n\nShows the average line.\n\n | \n
| \n \n ##### `showBaseLine`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nShows the base line of the chart.\n\n | \n
| \n \n ##### `verticalLineColor`\n | \n\n\n`string`\n\n | \n\n\n`undefined`\n\n | \n\n\nColor for vertical lines, overrides [`renderVerticallLineGradient`](#renderverticallinegradient).\n\n | \n
| \n \n ##### `verticalLineWidth`\n | \n\n\n`number`\n\n | \n\n\n`1`\n\n | \n\n\nStroke width of the vertial side lines.\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `cursorBorderColor`\n | \n\n\n`string`\n\n | \n\n\n`'#fff'`\n\n | \n\n\nBorder color for default cursor.\n\n | \n
| \n \n ##### `cursorColor`\n | \n\n\n`string`\n\n | \n\n\n`'#F4B700'`\n\n | \n\n\nInternal color for default cursor.\n\n | \n
| \n \n ##### `cursorLine`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nDisplay line to bottom of chart below cursor.\n\n | \n
| \n \n ##### `cursorMarkerHeight`\n | \n\n\n`number`\n\n | \n\n\n`24`\n\n | \n\n\nHeight of the cursor, you need to adjust this is you use a [custom cursor](#rendercursormarker) or want to change the default cursor size.\n\n | \n
| \n \n ##### `cursorMarkerWidth`\n | \n\n\n`number`\n\n | \n\n\n`24`\n\n | \n\n\nWidth of the cursor, you need to adjust this is you use a [custom cursor](#rendercursormarker) or want to change the default cursor size.\n\n | \n
| \n \n ##### `cursorWidth`\n | \n\n\n`number`\n\n | \n\n\n`2`\n\n | \n\n\nWidth of the [cursor line](#cursorline).\n\n | \n
| \n \n ##### `displayCursor`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nDisplay the cursor.\n\n | \n
| \n \n ##### `renderCursorMarker`\n | \n\n\n```ts\n(props:\nCursorProps & { ref:\nReact.RefObject | \n\n\n`undefined`\n\n | \n\n\nFunction that returns a custom cursor marker with ref assigned to outer most [`View`](https://facebook.github.io/react-native/docs/view).\n\n | \n
| \n Prop\n | \n\n Type\n | \n\n Default\n | \n\n Note\n | \n
| \n \n ##### `backgroundColor`\n | \n\n\n`string`\n\n | \n\n\n`'#fff'`\n\n | \n\n\nBackground color of tool tip.\n\n | \n
| \n \n ##### `borderRadius`\n | \n\n\n`number`\n\n | \n\n\n`2`\n\n | \n\n\nBorder radius of tool tip corners.\n\n | \n
| \n \n ##### `displayToolTip`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nDisplay tool tip if [`toolTipTextRenderers`](#tooltiptextrenderers) given.\n\n | \n
| \n \n ##### `displayTriangle`\n | \n\n\n`boolean`\n\n | \n\n\n`true`\n\n | \n\n\nDisplay tool tip triangle on bottom of tool tip.\n\n | \n
| \n \n ##### `fontSize`\n | \n\n\n`number`\n\n | \n\n\n`13`\n\n | \n\n\nDefault font size of tool tip text.\n\n | \n
| \n \n ##### `height`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nHeight of the tool tip, you should set this if there are minimal changes to the height across the data as the measurements for setting this can cause jitteriness on Android at times.\n\n | \n
| \n \n ##### `lockTriangleCenter`\n | \n\n\n`boolean`\n\n | \n\n\n`false`\n\n | \n\n\nSet the tool tip triangle centered instead of moving to adjust for the position within the chart.\n\n | \n
| \n \n ##### `textStyles`\n | \n\n\n[`TextStyle[]`](https://facebook.github.io/react-native/docs/text-style-props)\n\n | \n\n\n`[]`\n\n | \n\n\nArray of text styles that match up with [toolTipTextRenderers](#tooltiptextrenderers) array for styling.\n\n | \n
| \n \n ##### `toolTipTextRenderers`\n | \n\n\n```ts\nArray<(\ntoolTipTextRenderersInput:\nToolTipTextRenderersInput\n) => { text: string }\n>\n```\n\n | \n\n\n`[]`\n\n | \n\n\nArray of functions that take [`toolTipTextRenderersInput`](#tool-tip-text-renderers-input) and return an object that has a `text` key with a `string` value.\n\n | \n
| \n \n ##### `width`\n | \n\n\n`number`\n\n | \n\n\n`undefined`\n\n | \n\n\nWidth of the tool tip, you should set this if there are minimal changes to the width across the data as the measurements for setting this can cause jitteriness on Android at times.\n\n | \n
| \n Key\n | \n\n Type\n | \n\n Note\n | \n
| \n \n ##### `scaleX`\n | \n\n\n```ts\nScaleTime | \n\n\nThe scaleX function used to draw the chart, combined with `.invert` and `x` a value can be determined for any cursor position.\n\n | \n
| \n \n ##### `scaleY`\n | \n\n\n```ts\nScaleLinear | \n\n\nThe scaleY function used to draw the chart, combined with `.invert` and `y` a value can be determined for any cursor position.\n\n | \n
| \n \n ##### `selectedBarNumber`\n | \n\n\n`number`\n\n | \n\n\nThe `selectedBarNumber` of the [bar chart](#bar-chart-props), this is always `0` for the [area chart](#area-chart-props).\n\n | \n
| \n \n ##### `x`\n | \n\n\n`number`\n\n | \n\n\nCurrent `x` value of the cursor, use in combination with [scaleX](#scalex).\n\n | \n
| \n \n ##### `y`\n | \n\n\n`number`\n\n | \n\n\nCurrent `y` value of the cursor, use in combination with [scaleY](#scaley).\n\n | \n
| \n Key\n | \n\n Type\n | \n\n Note\n | \n
| \n \n ##### `id`\n | \n\n\n`string`\n\n | \n\n\nThe `id` can be used as the key on the gradient `Defs` returned to designate it for use by the the chart as shown in the [example](#default-horizontal-line-gradient).\n\n | \n