indiespirit/react-native-chart-kitPublic

NotificationsYou must be signed in to change notification settings
Fork681
Star3.1k

📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)

expo.io/@indiespirit/react-native-chart-kit

License

MIT license

3.1k stars 681 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 336 Commits
.github		.github
promo		promo
src		src
.babelrc		.babelrc
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
.watchmanconfig		.watchmanconfig
App.js		App.js
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
app.json		app.json
contributing.md		contributing.md
data.js		data.js
index.js		index.js
package.json		package.json
tsconfig.json		tsconfig.json

Repository files navigation

If you're looking tobuild a website or a cross-platform mobile app – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you shortly.

📲See example app

To try the examples in Expo, please changemain to./node_modules/expo/AppEntry.js inpackage.json before starting things withexpo run. You'll need to haveexpo-cli installed vianpm install -g expo-cli.

React Native Chart Kit Documentation

Import components

yarn add react-native-chart-kit
yarn add react-native-svg install peer dependencies
Use with ES6 syntax to import components

import{LineChart,BarChart,PieChart,ProgressChart,ContributionGraph,StackedBarChart}from"react-native-chart-kit";

Quick Example

<View><Text>Bezier Line Chart</Text><LineChartdata={{labels:["January","February","March","April","May","June"],datasets:[{data:[Math.random()*100,Math.random()*100,Math.random()*100,Math.random()*100,Math.random()*100,Math.random()*100]}]}}width={Dimensions.get("window").width}// from react-nativeheight={220}yAxisLabel="$"yAxisSuffix="k"yAxisInterval={1}// optional, defaults to 1chartConfig={{backgroundColor:"#e26a00",backgroundGradientFrom:"#fb8c00",backgroundGradientTo:"#ffa726",decimalPlaces:2,// optional, defaults to 2dpcolor:(opacity=1)=>`rgba(255, 255, 255,${opacity})`,labelColor:(opacity=1)=>`rgba(255, 255, 255,${opacity})`,style:{borderRadius:16},propsForDots:{r:"6",strokeWidth:"2",stroke:"#ffa726"}}}bezierstyle={{marginVertical:8,borderRadius:16}}/></View>

Chart style object

Define a chart style object with following properies as such:

constchartConfig={backgroundGradientFrom:"#1E2923",backgroundGradientFromOpacity:0,backgroundGradientTo:"#08130D",backgroundGradientToOpacity:0.5,color:(opacity=1)=>`rgba(26, 255, 146,${opacity})`,strokeWidth:2,// optional, default 3barPercentage:0.5,useShadowColorFromDataset:false// optional};

Property	Type	Description
backgroundGradientFrom	string	Defines the first color in the linear gradient of a chart's background
backgroundGradientFromOpacity	Number	Defines the first color opacity in the linear gradient of a chart's background
backgroundGradientTo	string	Defines the second color in the linear gradient of a chart's background
backgroundGradientToOpacity	Number	Defines the second color opacity in the linear gradient of a chart's background
fillShadowGradientFrom	string	Defines the first color in the linear gradient of the area under data (can also be specified as`fillShadowGradient`)
fillShadowGradientFromOpacity	Number	Defines the first color opacity in the linear gradient of the area under data (can also be specified as`fillShadowGradientOpacity`)
fillShadowGradientFromOffset	Number	Defines the first color offset (0-1) in the linear gradient of the area under data
fillShadowGradientTo	string	Defines the second color in the linear gradient of the area under data
fillShadowGradientToOpacity	Number	Defines the second color opacity in the linear gradient of the area under data
fillShadowGradientToOffset	Number	Defines the second color offset (0-1) in the linear gradient of the area under data
useShadowColorFromDataset	Boolean	Defines the option to use color from dataset to each chart data. Default is false
color	function => string	Defines the base color function that is used to calculate colors of labels and sectors used in a chart
strokeWidth	Number	Defines the base stroke width in a chart
barPercentage	Number	Defines the percent (0-1) of the available width each bar width in a chart
barRadius	Number	Defines the radius of each bar
propsForBackgroundLines	props	Override styles of the background lines, refer to react-native-svg's Line documentation
propsForLabels	props	Override styles of the labels, refer to react-native-svg's Text documentation
propsForVerticalLabels	props	Override styles of vertical labels, refer to react-native-svg's Text documentation
propsForHorizontalLabels	props	Override styles of horizontal labels, refer to react-native-svg's Text documentation

Responsive charts

To render a responsive chart, useDimensions react-native library to get the width of the screen of your device like such

import{Dimensions}from"react-native";constscreenWidth=Dimensions.get("window").width;

Line Chart

constdata={labels:["January","February","March","April","May","June"],datasets:[{data:[20,45,28,80,99,43],color:(opacity=1)=>`rgba(134, 65, 244,${opacity})`,// optionalstrokeWidth:2// optional}],legend:["Rainy Days"]// optional};

<LineChartdata={data}width={screenWidth}height={220}chartConfig={chartConfig}/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
withDots	boolean	Show dots on the line - default: True
withShadow	boolean	Show shadow for line - default: True
withInnerLines	boolean	Show inner dashed lines - default: True
withOuterLines	boolean	Show outer dashed lines - default: True
withVerticalLines	boolean	Show vertical lines - default: True
withHorizontalLines	boolean	Show horizontal lines - default: True
withVerticalLabels	boolean	Show vertical labels - default: True
withHorizontalLabels	boolean	Show horizontal labels - default: True
fromZero	boolean	Render charts from 0 not from the minimum value. - default: False
yAxisLabel	string	Prepend text to horizontal labels -- default: ''
yAxisSuffix	string	Append text to horizontal labels -- default: ''
xAxisLabel	string	Prepend text to vertical labels -- default: ''
yAxisInterval	string	Display y axis line every {x} input. -- default: 1
chartConfig	Object	Configuration object for the chart, see example config object above
decorator	Function	This function takes awhole bunch of stuff and can render extra elements, such as data point info or additional markup.
onDataPointClick	Function	Callback that takes`{value, dataset, getColor}`
horizontalLabelRotation	number (degree)	Rotation angle of the horizontal labels - default 0
verticalLabelRotation	number (degree)	Rotation angle of the vertical labels - default 0
getDotColor	function => string	Defines the dot color function that is used to calculate colors of dots in a line chart and takes`(dataPoint, dataPointIndex)`
renderDotContent	Function	Render additional content for the dot. Takes`({x, y, index, indexData})` as arguments.
yLabelsOffset	number	Offset for Y axis labels
xLabelsOffset	number	Offset for X axis labels
hidePointsAtIndex	number[]	Indices of the data points you don't want to display
formatYLabel	Function	This function change the format of the display value of the Y label. Takes the Y value as argument and should return the desirable string.
formatXLabel	Function	This function change the format of the display value of the X label. Takes the X value as argument and should return the desirable string.
getDotProps	(value, index) => props	This is an alternative to chartConfig's propsForDots
segments	number	The amount of horizontal lines - default 4

Bezier Line Chart

<LineChartdata={data}width={screenWidth}height={256}verticalLabelRotation={30}chartConfig={chartConfig}bezier/>

Property	Type	Description
bezier	boolean	Add this prop to make the line chart smooth and curvy

Progress Ring

// each value represents a goal ring in Progress chartconstdata={labels:["Swim","Bike","Run"],// optionaldata:[0.4,0.6,0.8]};

<ProgressChartdata={data}width={screenWidth}height={220}strokeWidth={16}radius={32}chartConfig={chartConfig}hideLegend={false}/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
strokeWidth	Number	Width of the stroke of the chart - default: 16
radius	Number	Inner radius of the chart - default: 32
chartConfig	Object	Configuration object for the chart, see example config in the beginning of this file
hideLegend	Boolean	Switch to hide chart legend (defaults to false)

Bar chart

constdata={labels:["January","February","March","April","May","June"],datasets:[{data:[20,45,28,80,99,43]}]};

<BarChartstyle={graphStyle}data={data}width={screenWidth}height={220}yAxisLabel="$"chartConfig={chartConfig}verticalLabelRotation={30}/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
withVerticalLabels	boolean	Show vertical labels - default: True
withHorizontalLabels	boolean	Show horizontal labels - default: True
fromZero	boolean	Render charts from 0 not from the minimum value. - default: False
withInnerLines	boolean	Show inner dashed lines - default: True
yAxisLabel	string	Prepend text to horizontal labels -- default: ''
yAxisSuffix	string	Append text to horizontal labels -- default: ''
chartConfig	Object	Configuration object for the chart, see example config in the beginning of this file
horizontalLabelRotation	number (degree)	Rotation angle of the horizontal labels - default 0
verticalLabelRotation	number (degree)	Rotation angle of the vertical labels - default 0
showBarTops	boolean	Show bar tops
showValuesOnTopOfBars	boolean	Show value above bars

StackedBar chart

constdata={labels:["Test1","Test2"],legend:["L1","L2","L3"],data:[[60,60,60],[30,30,60]],barColors:["#dfe4ea","#ced6e0","#a4b0be"]};

<StackedBarChartstyle={graphStyle}data={data}width={screenWidth}height={220}chartConfig={chartConfig}/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
withVerticalLabels	boolean	Show vertical labels - default: True
withHorizontalLabels	boolean	Show horizontal labels - default: True
chartConfig	Object	Configuration object for the chart, see example config in the beginning of this file
barPercentage	Number	Defines the percent (0-1) of the available width each bar width in a chart
showLegend	boolean	Show legend - default: True

Pie chart

Modified Pie Chart Screenshot

constdata=[{name:"Seoul",population:21500000,color:"rgba(131, 167, 234, 1)",legendFontColor:"#7F7F7F",legendFontSize:15},{name:"Toronto",population:2800000,color:"#F00",legendFontColor:"#7F7F7F",legendFontSize:15},{name:"Beijing",population:527612,color:"red",legendFontColor:"#7F7F7F",legendFontSize:15},{name:"New York",population:8538000,color:"#ffffff",legendFontColor:"#7F7F7F",legendFontSize:15},{name:"Moscow",population:11920000,color:"rgb(0, 0, 255)",legendFontColor:"#7F7F7F",legendFontSize:15}];

<PieChartdata={data}width={screenWidth}height={220}chartConfig={chartConfig}accessor={"population"}backgroundColor={"transparent"}paddingLeft={"15"}center={[10,50]}absolute/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
chartConfig	Object	Configuration object for the chart, see example config in the beginning of this file
accessor	string	Property in the`data` object from which the number values are taken
bgColor	string	background color - if you want to set transparent, input`transparent` or`none`.
paddingLeft	string	left padding of the pie chart
center	array	offset x and y coordinates to position the chart
absolute	boolean	shows the values as absolute numbers
hasLegend	boolean	Defaults to`true`, set it to`false` to remove the legend
avoidFalseZero	boolean	Defaults to`false`, set it to`true` to display a "<1%" instead of a rounded value equal to "0%"

Contribution graph (heatmap)

This type of graph is often use to display a developer contribution activity. However, there many other use cases this graph is used when you need to visualize a frequency of a certain event over time.

constcommitsData=[{date:"2017-01-02",count:1},{date:"2017-01-03",count:2},{date:"2017-01-04",count:3},{date:"2017-01-05",count:4},{date:"2017-01-06",count:5},{date:"2017-01-30",count:2},{date:"2017-01-31",count:3},{date:"2017-03-01",count:2},{date:"2017-04-02",count:4},{date:"2017-03-05",count:2},{date:"2017-02-30",count:4}];

<ContributionGraphvalues={commitsData}endDate={newDate("2017-04-01")}numDays={105}width={screenWidth}height={220}chartConfig={chartConfig}/>

Property	Type	Description
data	Object	Data for the chart - see example above
width	Number	Width of the chart, use 'Dimensions' library to get the width of your screen for responsive
height	Number	Height of the chart
gutterSize	Number	Size of the gutters between the squares in the chart
squareSize	Number	Size of the squares in the chart
horizontal	boolean	Should graph be laid out horizontally? Defaults to`true`
showMonthLabels	boolean	Should graph include labels for the months? Defaults to`true`
showOutOfRangeDays	boolean	Should graph be filled with squares, including days outside the range? Defaults to`false`
chartConfig	Object	Configuration object for the chart, see example config in the beginning of this file
accessor	string	Property in the`data` object from which the number values are taken; defaults to`count`
getMonthLabel	function	Function which returns the label for each month, taking month index (0 - 11) as argument
onDayPress	function	Callback invoked when the user clicks a day square on the chart; takes a value-item object

More styling

Every charts also acceptsstyle props, which will be applied to parentsvg orView component of each chart.

Abstract Chart

src/abstract-chart.js is an extendable class which can be used to create your own charts!

The following methods are available:

renderHorizontalLines(config)

Renders background horizontal lines like in the Line Chart and Bar Chart. Takes a config object with following properties:

{// width of your chartwidth:Number,// height of your chartheight:Number,// how many lines to rendercount:Number,// top padding from the chart top edgepaddingTop:Number}

renderVerticalLabels(config)

Render background vertical lines. Takes a config object with following properties:

{// data needed to calculate the number of lines to renderdata:Array,// width of your chartwidth:Number,// height of your chartheight:Number,paddingTop:Number,paddingRight:Number}

renderDefs(config)

Render definitions of background and shadow gradients

{// width of your chartwidth:Number,// height of your chartheight:Number,// first color of background gradientbackgroundGradientFrom:String,// first color opacity of background gradient (0 - 1.0)backgroundGradientFromOpacity:Number,// second color of background gradientbackgroundGradientTo:String,// second color opacity of background gradient (0 - 1.0)backgroundGradientToOpacity:Number,}

Compilation

For production use, the package is automatically compiled after installation, so that you can just install it withnpm and use it out-of-the-box.

To transpile TypeScript into JavaScript for development purposes, you can use either runnpm run build to compile once, ornpm run dev to start compilation in watch mode, which will recompile the files on change.