@connectedcars/react-native-slide-charts

react-native-slide-charts uses react-native-svg, d3, and react-native-gesture-handler to create highly customizable interactive charts that animate smoothly via Direct Manipulation.

⚠️ Note: The package have been moved from react-native-slide-charts to @connectedcars/react-native-slide-charts ⚠️

Check out the demo on expo 📊📈

Features

Bar Chart

Area Chart

Installation

$ npm install @connectedcars/react-native-slide-charts --save

or

$ yarn add @connectedcars/react-native-slide-charts

Peer Dependencies

Expo

All peerDependencies are included with Expo so installation of peerDependencies isn't required.

React Native

@connectedcars/react-native-slide-charts depends on two peer dependencies with native modules that must be installed alongside it. Follow the installation instructions for both iOS and Android both packages.

Package	Minimum Version	Maximum Version
react-native-svg	7.0.0	11.x
react-native-gesture-handler	1.1.0	1.x

NOTICE:

Make sure the version of the native module packages chosen works with the react-native version of the project. Manually linking the projects may be required depending on the version and platform.

Usage

@connectedcars/react-native-slide-charts exports two types of charts, SlideAreaChart and SlideBarChart along with the type definitions for the Charts, Props, and Enums.

import {
  SlideAreaChart,
  SlideBarChart,
  SlideBarChartProps,
  SlideAreaChartProps,
  YAxisProps,
  XAxisProps,
  XAxisLabelAlignment,
  YAxisLabelAlignment,
  CursorProps,
  ToolTipProps,
  ToolTipTextRenderersInput,
  GradientProps,
} from '@connectedcars/react-native-slide-charts'

To get started you can render an empty chart:

<SlideAreaChart />

But it will be more visually useful for configuring to use some test data.

<SlideBarChart
  data={[
    { x: 0, y: 0 },
    { x: 1, y: 1 },
    { x: 2, y: 2 },
    { x: 3, y: 3 },
    { x: 4, y: 4 },
  ]}
/>

The Props, Types, Enums, and Defaults are defined below:

• Charts
  • Common Props
  • Bar Chart Props
  • Area Chart Props
• Axis
  • Common Props
  • X-Axis Props
  • Y-Axis
• Cursor
  • Cursor Props
• Tool Tip
  • Tool Tip Props
• Types
  • Tool Tip Text Renderers Input
  • Gradient Props
• Enums
  • XAxisLabelAlignment
  • YAxisLabelAlignment
• Gradients
  • Default Area Chart Fill Gradient
  • Default Bar Chart Fill Gradient
  • Default Bar Chart Selected Fill Gradient
  • Default Vertical Line Gradient
  • Default Horizontal Line Gradient

Charts

Common Bar and Area Chart Props:

Prop	Type	Default	Note
alwaysShowIndicator	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.
animated	boolean	true	Animates the charts on mounting and between prop updates.
axisHeight	number	0	Height of the area below the chart for the X-Axis markers and label to render in.
axisWidth	number	0	Width of the area left of the chart for the Y-Axis markers and label to render in.
callbackWithX	(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.
callbackWithY	(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.
chartPaddingTop	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.
data	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.
fillColor	string	undefined	Color to fill the bars of the bar chart or area of the area chart. Takes precedence over renderFillGradient when applied.
height	number	200	Height of the entire chart component.
onPress	() => void	undefined	If provided the chart will not be interactive and instead can be pressed.
paddingBottom	number	0	Bottom padding as it can not be applied via style to the chart component.
paddingLeft	number	8	Left padding as it can not be applied via style to the chart component.
paddingRight	number	8	Right padding as it can not be applied via style to the chart component.
paddingTop	number	0	Top padding as it can not be applied via style to the chart component.
renderFillGradient	(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.
scrollable	boolean	false	Ensure touch is passed to scrollView on y movement if component is inside scrollView.
shouldCancelWhenOutside	boolean	true	Terminates touch outside the chart component.
showIndicatorCallback	(opacity: number) => void	undefined	If alwaysShowIndicator is false this function is fired with the current indicator opacity whenever the indicator appears or disappears.
style	ViewStyle	{backgroundColor: '#fff'}	Style of chart component.
throttleAndroid	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	ToolTipProps	undefined	Props for rendering the ToolTip.
width	number	Dimensions .get('window') .width	Width of the entire chart.
xAxisProps	XAxisProps	undefined	Props for rendering the XAxis.
xRange	[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.
xScale	'time' | 'linear'	'linear'	Determines the applied d3 scale of the chart.
yAxisProps	YAxisProps	undefined	Props for rendering the YAxis.
yRange	[number, number]	Max and Min value of y in data array	The range for the YAxis of the chart to be rendered.

Bar Chart Props:

Prop	Type	Default	Note
barSelectedColor	string	undefined	Sets the bar color for the selected bar. Takes precedence over renderSelectedFillGradient.
barSpacing	number	1	Sets the space that should be rendered between each bar on the bar chart.
barWidth	number	undefined	Sets the width of each bar, takes precedence over barSpacing when applied.
hideSelection	boolean	false	Prevents fillColor or renderSelectedFillGradient from being applied to the selected bar.
renderSelectedFillGradient	(props: GradientProps) => JSX.Element | null	Default Selected Fill Gradient	Function that takes GradientProps and returns a custom gradient to fill the selected bar.
selectionChangedCallback	(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.
barDynamicColor	({ x: number | Date, y: number, index: number }) => string	undefined	Function that takes the x and y value and the index of a data point and returns a color to fill the bars of the bar chart dynamically. This makes it possible to have different colors for the bars in a chart. Takes precedence over fillColor and renderFillGradient when applied.
initialBarSelected	number	undefined	The initial bar that should be selected when alwaysShowIndicator is true. The number represents the index of the data point / bar that should be selected.

Area Chart Props:

Prop	Type	Default	Note
cursorProps	CursorProps	{cursorMarkerHeight: 24, cursorMarkerWidth: 24, cursorWidth: 2}	Props for Cursor that follows the touch.
curveType	shape.CurveFactory | shape .CurveFactoryLineOnly	shape.curveMonotoneX	Type of curve to use for the area chart from d3-shape.
chartLineColor	string	'#0081EB'	Color for the line designating the data charted.
chartLineWidth	number	3	Stroke width of the line designating the data charted.
initialIndicatorPosition	number | 'middle' | 'start' | 'end'	middle	The initial location of the indicator when alwaysShowIndicator is true. The number represents the index of the data point / bar that should be selected.
lineSliceEndIndex	number	undefined	Optional data index where we should stop drawing the AreaChart line. Results in a discontinuous graph with a hard stop after a certain data point, given by lineSliceEndIndex.

Axis

Common X and Y Axis Props:

Prop	Type	Default	Note
axisLabel	string	undefined	Label for the axis.
axisLabelStyle	TSpanProps & { color: string }	{fontSize: 13, color: '#777'}	Styling for axisLabel, extends TSpanProps from react-native-svg with type color.
labelTopPadding	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).

X-Axis Props:

Prop	Type	Default	Note
adjustForSpecialMarkers	boolean	false	If specialStartmarker or specialEndMarker are set it adjusts the text to left or right align to the edge of the chart.
axisLabelAlignment	XAxisLabelAlignment	right	Position for the axisLabel below the chart.
axisMarkerLabels	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.
labelBottomOffset	number	0	If axisMarkerLabels and axisLabel the axisLabel will bottom justify and this offset will apply to it.
markerSpacing	number	undefined	If axisMarkerLabels are overcrowded a number of empty marker spaces can be given to set between each marker shown.
markerTopPadding	number	4	The axis marker labels are top justified below the chart, this is the space between the marker and the chart.
minimumSpacing	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.
specialEndMarker	string	undefined	The right hand marker of the chart can be set to a special marker. e.g. 'end'
specialStartMarker	string	undefined	The left hand marker of the chart can be set to a special marker. e.g. 'start'

Y-Axis Props:

Prop	Type	Default	Note
averageLineColor	string	'#77777780'	Color for average line.
averageMarkerDecimals	number	0	Number of decimal places to show in the average marker if markAverageLine is true.
axisAverageMarkerStyle	TSpanProps & { color: string }	{ fontSize: 13, color: '#77777780' }	Styling for marker, extends TSpanProps from react-native-svg with type color.
axisLabelAlignment	YAxisLabelAlignment	aboveTicks	Position for the axis label left of the chart.
axisMarkerStyle	TSpanProps & { color: string }	{fontSize: 13, color: '#222'}	Styling for markers, extends TSpanProps from react-native-svg with type color.
fullBaseLine	boolean	false	Extends bottom line of chart to left edge.
hideMarkers	boolean	undefined	Hides the markers on the Y-Axis without hiding the tick lines.
horizontalLineColor	string	undefined	Color for horizontal lines, overrides renderHorizontalLineGradient.
horizontalLineWidth	number	1	Stroke width for horizontal lines.
interval	number	undefined	Spacing for the Y-Axis ticks, this is determined using numberOfTicks and yRange if not defined while numberOfTicks is given.
labelLeftOffset	number	0	If there are ticks with labels and an axisLabel the axisLabel will left justify and this offset will apply to it.
markAverageLine	boolean	undefined	Show marker next to the average of the data.
markerChartOffset	number	4	Spacing between the markers and the chart to the left of the chart i.e. right of the markers.
markFirstLine	boolean	false	Show marker next to bottom line, often 0 and not visually needed.
numberOfTicks	number	undefined	Number of ticks the chart should have, spaced via interval.
renderHorizontalLineGradient	(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}.
renderVerticalLineGradient	(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'}.
rotateAxisLabel	boolean	false	Rotates the Y-Axis label vertically.
showAverageLine	boolean	undefined	Shows the average line.
showBaseLine	boolean	true	Shows the base line of the chart.
verticalLineColor	string	undefined	Color for vertical lines, overrides renderVerticallLineGradient.
verticalLineWidth	number	1	Stroke width of the vertial side lines.

Cursor

Cursor Props:

Prop	Type	Default	Note
cursorBorderColor	string	'#fff'	Border color for default cursor.
cursorColor	string	'#F4B700'	Internal color for default cursor.
cursorLine	boolean	true	Display line to bottom of chart below cursor.
cursorMarkerHeight	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.
cursorMarkerWidth	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.
cursorWidth	number	2	Width of the cursor line.
displayCursor	boolean	true	Display the cursor.
renderCursorMarker	(props: CursorProps & { ref: React.RefObject<any> }) => React.ReactNode | null	undefined	Function that returns a custom cursor marker with ref assigned to outer most View.

Tool Tip

Tool Tip Props:

Prop	Type	Default	Note
backgroundColor	string	'#fff'	Background color of tool tip.
borderRadius	number	2	Border radius of tool tip corners.
displayToolTip	boolean	true	Display tool tip if toolTipTextRenderers given.
displayTriangle	boolean	true	Display tool tip triangle on bottom of tool tip.
fontSize	number	13	Default font size of tool tip text.
height	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.
lockTriangleCenter	boolean	false	Set the tool tip triangle centered instead of moving to adjust for the position within the chart.
textStyles	TextStyle[]	[]	Array of text styles that match up with toolTipTextRenderers array for styling.
toolTipTextRenderers	Array<( toolTipTextRenderersInput: ToolTipTextRenderersInput ) => { text: string } >	[]	Array of functions that take toolTipTextRenderersInput and return an object that has a text key with a string value.
width	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.

Types

Tool Tip Text Renderers Input:

Key	Type	Note
scaleX	ScaleTime<number, number> | ScaleLinear<number, number>	The scaleX function used to draw the chart, combined with .invert and x a value can be determined for any cursor position.
scaleY	ScaleLinear<number, number>	The scaleY function used to draw the chart, combined with .invert and y a value can be determined for any cursor position.
selectedBarNumber	number	The selectedBarNumber of the bar chart, this is always 0 for the area chart.
x	number	Current x value of the cursor, use in combination with scaleX.
y	number	Current y value of the cursor, use in combination with scaleY.

Gradient Props:

Key	Type	Note
id	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.

Enums

XAxisLabelAlignment:

enum XAxisLabelAlignment {
  right = 'right',
  left = 'left',
  center = 'center',
}

YAxisLabelAlignment:

enum YAxisLabelAlignment {
  top = 'top',
  bottom = 'bottom',
  middle = 'middle',
  aboveTicks = 'aboveTicks',
}

Gradients

Default Area Chart Fill Gradient:

const defaultAreaChartFillGradient = (props: GradientProps) => {
  return (
    <LinearGradient x1='50%' y1='0%' x2='50%' y2='100%' {...props}>
      <Stop stopColor='#0081EB' offset='0%' stopOpacity='0.2' />
      <Stop stopColor='#FFFFFF' offset='100%' stopOpacity='0.2' />
    </LinearGradient>
  )
}

Default Bar Chart Fill Gradient:

const defaultBarChartFillGradient = (props: GradientProps) => {
  return (
    <LinearGradient x1='50%' y1='0%' x2='50%' y2='100%' {...props}>
      <Stop stopColor='#0081EB' offset='0%' stopOpacity='0.4' />
      <Stop stopColor='#0081EB' offset='100%' stopOpacity='0.4' />
    </LinearGradient>
  )
}

Default Bar Chart Selected Fill Gradient:

const defaultBarChartSelectedFillGradient = (props: GradientProps) => {
  return (
    <LinearGradient x1='50%' y1='0%' x2='50%' y2='100%' {...props}>
      <Stop stopColor='#0081EB' offset='0%' stopOpacity='1' />
      <Stop stopColor='#0081EB' offset='100%' stopOpacity='1' />
    </LinearGradient>
  )
}

Default Vertical Line Gradient:

export const verticalLineGradient = (props: GradientProps) => (
  <Defs key={'verticalLineGradient'}>
    <LinearGradient x1='50%' y1='0%' x2='50%' y2='100%' {...props}>
      <Stop stopColor='#ffffff' offset='0%' stopOpacity='1' />
      <Stop stopColor='#dadada' offset='30%' stopOpacity='1' />
      <Stop stopColor='#dadada' offset='100%' stopOpacity='1' />
    </LinearGradient>
  </Defs>
)

Default Horizontal Line Gradient:

export const horizontalLineGradient = (
  props: GradientProps & { count: number }
) => (
  <Defs key={props.id}>
    <LinearGradient x1='0%' y1='0%' x2='100%' y2='0%' id={props.id}>
      <Stop stopColor='#dadada' offset='0%' stopOpacity='1' />
      <Stop stopColor='#dadada' offset='50%' stopOpacity='1' />
      <Stop stopColor='#dadada' offset='100%' stopOpacity='1' />
    </LinearGradient>
  </Defs>
)