boolean

true

Determines if the indicator for the chart should be visible always or just when being touched.

For SlideAreaChart the indicator is the CursorMarker, CursorLine, and ToolTip.

For SlideBarChart the indicator is the barSelectedColor or renderSelectedFillGradient and ToolTip.

boolean

true

Animates the charts on mounting and between prop updates.

number

0

Height of the area below the chart for the X-Axis markers and label to render in.

number

0

Width of the area left of the chart for the Y-Axis markers and label to render in.

`ts
(x: number
| Date)
=> void
`

undefined

Callback function that provides the current 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.

`ts
(y: number)
=> void
`

undefined

Callback function that provides the current 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.

number

16

Pushes the rendered height of the data within the chart down to make room for the ToolTip at the max. The ToolTip will render outside of the chart component if desired so this can be set to 0, or adjusted for using paddingTop or style instead if desired.

`ts
Array<{
x: number
| Date,
y: number
}>
`

[]

Data 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.

string

undefined

Color to fill the bars of the bar chart or area of the area chart. Takes precedence over renderFillGradient when applied.

number

200

Height of the entire chart component.

`ts
() => void
`

undefined

If provided the chart will not be interactive and instead can be pressed.

number

0

Bottom padding as it can not be applied via style to the chart component.

number

8

Left padding as it can not be applied via style to the chart component.

number

8

Right padding as it can not be applied via style to the chart component.

number

0

Top padding as it can not be applied via style to the chart component.

`ts
(props:
GradientProps)
=> JSX.Element
| null
`

Default Area Chart
Default Bar Chart

Function that takes GradientProps and returns a custom gradient to fill the bars of the bar chart or area of the area chart.

boolean

false

Ensure touch is passed to scrollView on y movement if component is inside scrollView.

boolean

true

Terminates touch outside the chart component.

`ts
(opacity: number)
=> void
`

undefined

If alwaysShowIndicator is false this function is fired with the current indicator opacity whenever the indicator appears or disappears.

ViewStyle

`ts
{backgroundColor:
'#fff'}
`

Style of chart component.

boolean

false

On 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.

ToolTipProps

undefined

Props for rendering the ToolTip.

number

`ts
Dimensions
.get('window')
.width
`

Width of the entire chart.

XAxisProps

undefined

Props for rendering the XAxis.

`ts
[number, number]
| [Date, Date]
`

Value of x in first and last object in data array.

The range for the XAxis of the chart to be rendered.

`ts
'time' | 'linear'
`

'linear'

Determines the applied d3 scale of the chart.

YAxisProps

undefined

Props for rendering the YAxis.

`ts
[number, number]
`

Max and Min value of y in data array

The range for the YAxis of the chart to be rendered.

string

undefined

Sets the bar color for the selected bar. Takes precedence over renderSelectedFillGradient.

number

1

Sets the space that should be rendered between each bar on the bar chart.

number

undefined

Sets the width of each bar, takes precedence over barSpacing when applied.

boolean

false

Prevents fillColor or renderSelectedFillGradient from being applied to the selected bar.

`ts
(props:
GradientProps)
=> JSX.Element
| null
`

Default Selected Fill Gradient

Function that takes GradientProps and returns a custom gradient to fill the selected bar.

`ts
(bar: number)
=> void
`

undefined

This 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 selection feedback on iOS using expo-haptics is suggested.

CursorProps

`ts
{cursorMarkerHeight: 24,
cursorMarkerWidth: 24,
cursorWidth: 2}
`

Props for Cursor that follows the touch.

`ts
shape.CurveFactory
| shape
.CurveFactoryLineOnly
`

`ts
shape.curveMonotoneX
`

Type of curve to use for the area chart from d3-shape.

string

'#0081EB'

Color for the line designating the data charted.

number

3

Stroke width of the line designating the data charted.

string

undefined

Label for the axis.

`ts
TSpanProps &
{ color: string }
`

`ts
{fontSize: 13,
color: '#777'}
`

Styling for axisLabel, extends TSpanProps from react-native-svg with type color.

number

4

Space above the label to offset it from either the top of the component (Y-Axis) or the bottom of the chart (X-Axis).

boolean

false

If specialStartmarker or specialEndMarker are set it adjusts the text to left or right align to the edge of the chart.

XAxisLabelAlignment

right

Position for the axisLabel below the chart.

`ts
string[]
`

[]

Array of labels placed below the chart, these will line up with the bars if there are an adequate amount, or space evenly otherwise.

number

0

If axisMarkerLabels and axisLabel the axisLabel will bottom justify and this offset will apply to it.

number

undefined

If axisMarkerLabels are overcrowded a number of empty marker spaces can be given to set between each marker shown.

number

4

The axis marker labels are top justified below the chart, this is the space between the marker and the chart.

number

0

The 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 to the final marker, this can be avoided with minimum spacing. This is also useful in making room for a specialEndMarker.

string

undefined

The right hand marker of the chart can be set to a special marker.

e.g. 'end'

string

undefined

The left hand marker of the chart can be set to a special marker.

e.g. 'start'

string

'#77777780'

Color for average line.

number

0

Number of decimal places to show in the average marker if markAverageLine is true.

`ts
TSpanProps &
{ color:
string }
`

`ts
{
fontSize:
13,
color:
'#77777780'
}
`

Styling for marker, extends TSpanProps from react-native-svg with type color.

YAxisLabelAlignment

aboveTicks

Position for the axis label left of the chart.

`ts
TSpanProps &
{ color:
string }
`

`ts
{fontSize:
13,
color:
'#222'}
`

Styling for markers, extends TSpanProps from react-native-svg with type color.

boolean

false

Extends bottom line of chart to left edge.

boolean

undefined

Hides the markers on the Y-Axis without hiding the tick lines.

string

undefined

Color for horizontal lines, overrides renderHorizontalLineGradient.

number

1

Stroke width for horizontal lines.

number

undefined

Spacing for the Y-Axis ticks, this is determined using numberOfTicks and yRange if not defined while numberOfTicks is given.

number

0

If there are ticks with labels and an axisLabel the axisLabel will left justify and this offset will apply to it.

boolean

undefined

Show marker next to the average of the data.

number

4

Spacing between the markers and the chart to the left of the chart i.e. right of the markers.

boolean

false

Show marker next to bottom line, often 0 and not visually needed.

number

undefined

Number of ticks the chart should have, spaced via interval.

`ts
(props:
GradientProps
& { count:
number }) =>
JSX.Element
| null
`

Default Horizontal Line Gradient

Function that takes GradientProps and returns a custom gradient for the horizontal lines. The Defs prop key must match the default, i.e. key={props.id}.

`ts
(props:
GradientProps)
=> JSX.Element
| null
`

Default Vertical Line Gradient

Function that takes GradientProps and returns a custom gradient for the vertical side lines. The Defs prop key must match the default, i.e. key={'verticalLineGradient'}.

boolean

false

Rotates the Y-Axis label vertically.

boolean

undefined

Shows the average line.

boolean

true

Shows the base line of the chart.

string

undefined

Color for vertical lines, overrides renderVerticallLineGradient.

number

1

Stroke width of the vertial side lines.

string

'#fff'

Border color for default cursor.

string

'#F4B700'

Internal color for default cursor.

boolean

true

Display line to bottom of chart below cursor.

number

24

Height of the cursor, you need to adjust this is you use a custom cursor or want to change the default cursor size.

number

24

Width of the cursor, you need to adjust this is you use a custom cursor or want to change the default cursor size.

number

2

Width of the cursor line.

boolean

true

Display the cursor.

`ts
(props:
CursorProps & { ref:
React.RefObject
}) =>
React.ReactNode | null
`

undefined

Function that returns a custom cursor marker with ref assigned to outer most View.

string

'#fff'

Background color of tool tip.

number

2

Border radius of tool tip corners.

boolean

true

Display tool tip if toolTipTextRenderers given.

boolean

true

Display tool tip triangle on bottom of tool tip.

number

13

Default font size of tool tip text.

number

undefined

Height 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.

boolean

false

Set the tool tip triangle centered instead of moving to adjust for the position within the chart.

[TextStyle[]](https://facebook.github.io/react-native/docs/text-style-props)

[]

Array of text styles that match up with toolTipTextRenderers array for styling.

`ts
Array<(
toolTipTextRenderersInput:
ToolTipTextRenderersInput
) => { text: string }
>
`

[]

Array of functions that take toolTipTextRenderersInput and return an object that has a text key with a string value.

number

undefined

Width 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.

`ts
ScaleTime |
ScaleLinear
`

The scaleX function used to draw the chart, combined with .invert and x a value can be determined for any cursor position.

`ts
ScaleLinear
`

The scaleY function used to draw the chart, combined with .invert and y a value can be determined for any cursor position.

number

The selectedBarNumber of the bar chart, this is always 0 for the area chart.

number

Current x value of the cursor, use in combination with scaleX.

number

Current y value of the cursor, use in combination with scaleY.

string

The 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.