@moxspoy/react-native-slide-charts v1.0.0
@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
.
:warning: Note: The package have been moved from react-native-slide-charts
to @connectedcars/react-native-slide-charts
:warning:
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 Bar and Area Chart Props:
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.
(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.
(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.
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.
() => 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.
(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.
(opacity: number)
=> void
undefined
If alwaysShowIndicator
is false
this function is fired with the current indicator opacity whenever the indicator appears or disappears.
ViewStyle
{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.
undefined
Props for rendering the ToolTip
.
number
Dimensions
.get('window')
.width
Width of the entire chart.
undefined
Props for rendering the XAxis
.
[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.
'time' | 'linear'
'linear'
Determines the applied d3
scale of the chart.
undefined
Props for rendering the YAxis.
[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:
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.
(props:
GradientProps)
=> JSX.Element
| null
Default Selected Fill Gradient
Function that takes GradientProps
and returns a custom gradient to fill the selected bar.
(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.
Area Chart Props:
{cursorMarkerHeight: 24,
cursorMarkerWidth: 24,
cursorWidth: 2}
Props for Cursor
that follows the touch.
shape.CurveFactory
| shape
.CurveFactoryLineOnly
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.
Axis
Common X and Y Axis Props:
string
undefined
Label for the axis.
TSpanProps &
{ color: string }
{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).
X-Axis Props:
boolean
false
If specialStartmarker
or specialEndMarker
are set it adjusts the text to left or right align to the edge of the chart.
right
Position for the axisLabel below the chart.
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'
Y-Axis Props:
string
'#77777780'
Color for average line.
number
0
Number of decimal places to show in the average marker if markAverageLine
is true
.
TSpanProps &
{ color:
string }
{
fontSize:
13,
color:
'#77777780'
}
Styling for marker, extends TSpanProps
from react-native-svg
with type color
.
aboveTicks
Position for the axis label left of the chart.
TSpanProps &
{ color:
string }
{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
.
(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}
.
(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.
Cursor
Cursor Props:
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.
(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:
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.
[]
Array of text styles that match up with toolTipTextRenderers array for styling.
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.
Types
Tool Tip Text Renderers Input:
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.
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.
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.
Gradient Props:
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>
)
3 years ago