react-native-gifted-charts/docs/LineChart/LineChartProps.md

Line Chart props

Basic props

Prop	Type	Description	Default value
data	Array of items	An item object represents a point in the line chart. It is described in the next table.	_
data2	Array of items	Second set of dataPoint for the second line	_
data3	Array of items	Third set of dataPoint for the third line	_
width	number	Width of the Bar chart	width of the parent
height	number	Height of the Bar chart (excluding the bottom label)	200
maxValue	number	Maximum value shown in the Y axis	200
noOfSections	number	Number of sections in the Y axis	10
stepValue	number	Value of 1 step/section in the Y axis	20
stepHeight	number	Height of 1 step/section in the Y axis	20
spacing	number	Distance between 2 consecutive bars in the Bar chart	20
backgroundColor	ColorValue	Background color of the Bar chart	_
disableScroll	Boolean	To disable horizontal scroll	false
showScrollIndicator	Boolean	To show horizontal scroll indicator	false
isAnimated	Boolean	To show animates Line or Area Chart. Animation occurs onLoad and on value change	false

---

Alert!
These props are correlated:

1. maxValue
2. noOfSections
3. stepValue

They must follow the relation:

maxValue = noOfSections * stepValue;

So, all the three must be used together. Using any 1 or 2 of them may produce absurd results

---

Item description

Key	Value type	Description
value	number	Value of the item representing representing its position
label	string	Label text appearing under the X axis
labelTextStyle	object	Style object for the label text appearing under the X axis
yAxisLabelText	string	Y axis label text
dataPointText	string	Text appearing near the data points
textShiftX	number	To shift the dataPointText text horizontally
textShiftY	number	To shift the dataPointText text vertically
textColor	ColorValue	Color of the dataPointText
textFontSize	number	Font size of the dataPointText
showDataPoint	Boolean	To show data point for the particular item
dataPointHeight	number	Height of the data point (when data point's shape is rectangular)
dataPointWidth	number	Width of the data point (when data point's shape is rectangular)
dataPointRadius	number	Radius of the data point (when data points' shape is circular)
dataPointColor	ColorValue	Color of the data point
dataPointShape	string	Shape of the data point (rectangular or circular) defaults to circular
showVerticalLine	Boolean	When set to true, a vertical line will be displayed along that data point
verticalLineColor	ColorValue	Color of the vertical Line displayed along the data point
verticalLineThickness	number	Thickness of the vertical Line displayed along the data point

Alert!
If you are adding showDataPoint to an item, you must set hideDataPoints prop to true

---

Axes and rules related props

Prop	Type	Description	Default value
xAxisColor	ColorValue	X axis color	black
xAxisThickness	number	X axis thickness	1
yAxisColor	ColorValue	Y axis color	black
yAxisThickness	number	Y axis thickness	1
yAxisLabelWidth	number	Width of the Y axis Label container	35
yAxisTextStyle	object	Style object for the Y axis text style	_
showFractionalValues	Boolean	Allow fractional values for the Y axis label	false
roundToDigits	number	Rounds the y axis values to given number of digits after decimal point	1
hideYAxisText	Boolean	To hide Y axis label text	false
rulesColor	ColorValue	Color of the horizontal rules	lightgray
rulesThickness	number	Thickness of the horizontal rules	1
hideRules	Boolean	To hide the horizontal rules	false
rulesType	String	solid or dotted/dashed	solid
dashWidth	number	width of each dash	4
dashGap	number	gap between 2 dashes	8
showReferenceLine1	Boolean	show reference line	false
referenceLine1Config	referenceConfigType	properties of reference line like thickness, color etc (described below the table)	_
referenceLine1Position	number	position of reference line	containerHeight / 2
showReferenceLine2	Boolean	show second reference line	false
referenceLine2Config	referenceConfigType	properties of reference line like thickness, color etc (described below the table)	_
referenceLine2Position	number	position of second reference line	3*containerHeight / 2
showReferenceLine3	Boolean	show third reference line	false
referenceLine3Config	referenceConfigType	properties of reference line like thickness, color etc (described below the table)	_
referenceLine3Position	number	position of third reference line	containerHeight / 3
showVerticalLines	Boolean	To show vertical lines	false
verticalLinesColor	ColorValue	Color of the vertical lines	lightgray
verticallinesThickness	number	Thickness of the vertical lines	1
verticalLinesZIndex	number	Z index of the vertical lines	-1
showXAxisIndices	Boolean	To show the pointers on the X axis	false
xAxisIndicesHeight	number	Height of the pointers on the X axis	2
xAxisIndicesWidth	number	Width of the pointers on the X axis	4
xAxisIndicesColor	ColorValue	Color of the pointers on the X axis	black
showYAxisIndices	Boolean	To show the pointers on the Y axis	false
yAxisIndicesHeight	number	Height of the pointers on the Y axis	2
yAxisIndicesWidth	number	Width of the pointers on the Y axis	4
yAxisIndicesColor	ColorValue	Color of the pointers on the X axis	black
yAxisIndicesColor	Boolean	To hide axes, rules, labels altogether	false
yAxisLabelTexts	Array	Array of label texts to be displayed along y axis	null
rotateLabel	Boolean	To rotate the X axis labels (by 60deg)	false
hideOrigin	Boolean	To hide the y Axis label at origin (i.e. 0)	false

ReferenceConfigType has following properties-

type referenceConfigType = {
  thickness: number,
  width: number,
  color: ColorValue | String | any,
  type: String,
  dashWidth: number,
  dashGap: number,
};

---

Line related props

Prop	Type	Description	Default value
color	ColorValue	Color of the lines joining the data points	black
color1	ColorValue	Color of the lines joining the first set of data points	color (from props)
color2	ColorValue	Color of the lines joining the second set of data points	color (from props)
color3	ColorValue	Color of the lines joining the third set of data points	color (from props)
thickness	number	Thickness of the lines joining the data points	2
thickness1	number	Thickness of the lines joining the first set of data points	thickness (from props)
thickness2	number	Thickness of the lines joining the second set of data points	thickness (from props)
thickness3	number	Thickness of the lines joining the third set of data points	thickness (from props)
curved	Boolean	To show curved line joining the data points	false

---

Data points related props

Prop	Type	Description	Default value
hideDataPoints	Boolean	To hide data points	false
dataPointsHeight	number	Height of data points (when data points' shape is rectangular)	2
dataPointsWidth	number	Width of data points (when data points' shape is rectangular)	2
dataPointsRadius	number	Radius of data points (when data points' shape is circular)	3
dataPointsColor	ColorValue	Color of the data points	black
dataPointsShape	string	Shape of the data points ('rectangular' or 'circular')	'circular'
hideDataPoints1	Boolean	To hide data points for the first set of data	false
dataPointsHeight1	number	Height of data points for the first dataset (when data points' shape is rectangular)	2
dataPointsWidth1	number	Width of data points for the first dataset (when data points' shape is rectangular)	2
dataPointsRadius1	number	Radius of data points for the first dataset (when data points' shape is circular)	3
dataPointsColor1	ColorValue	Color of data points for the first dataset	black
dataPointsShape1	string	Shape of data points for the first dataset	'circular'
hideDataPoints2	Boolean	To hide data points for the second set of data	false
dataPointsHeight2	number	Height of data points for the second dataset (when data points' shape is rectangular)	2
dataPointsWidth2	number	Width of data points for the second dataset (when data points' shape is rectangular)	2
dataPointsRadius2	number	Radius of data points for the second dataset (when data points' shape is circular)	3
dataPointsColor2	ColorValue	Color of data points for the second dataset	blue
dataPointsShape2	string	Shape of data points for the second dataset ('rectangular' or 'circular')	'circular'
hideDataPoints3	Boolean	To hide data points for the third set of data	false
dataPointsHeight3	number	Height of data points for the third dataset (when data points' shape is rectangular)	2
dataPointsWidth3	number	Width of data points for the third dataset (when data points' shape is rectangular)	2
dataPointsRadius3	number	Radius of data points for the third dataset (when data points' shape is circular)	3
dataPointsColor3	ColorValue	Color of data points for the third dataset	red
dataPointsShape3	string	Shape of data points for the third dataset ('rectangular' or 'circular')	'circular'
textColor	ColorValue	Color of the dataPointText	'black'
textFontSize	number	Font size of the dataPointText	_
textShiftX	number	To shift the dataPointText text horizontally	0
textShiftY	number	To shift the dataPointText text vertically	0

---

onPress and strip related props

Line or Area charts can be made interactive by allowing users to press on the chart and highlight that particular data point. For example-

To achieve this the pressEnabled props must be set to true. In addition, use below props to handle the press event.

Prop	Type	Description	Default value
pressEnabled	Boolean	If set true, allows users to press on the chart (press event can be then handled using the onPress prop)	false
showDataPointOnPress	Boolean	If set true, it shows the data point corresponding to the pressed area of the chart	false
showStripOnPress	Boolean	If set true, it shows a vertical strip corresponding to the pressed area of the chart	false
showTextOnPress	Boolean	If set true, it shows the data point text corresponding to the pressed area of the chart	false
stripHeight	number	Height of the vertical strip that becomes visible on pressing the corresponding area of the chart	height of the data point
stripWidth	number	Width of the vertical strip that becomes visible on pressing the corresponding area of the chart	2
stripColor	ColorValue	Color of the vertical strip that becomes visible on pressing the corresponding area of the chart	color of the line
stripOpacity	number	Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart	(startOpacity+endOpacity)/2
onPress	Function	The callback function that handles the press event. item and index are received as props	_
unFocusOnPressOut	Boolean	If set true, it unselects/unfocuses the focused/selected data point	true
delayBeforeUnFocus	number	Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point	300

Example of onPress :

onPress={(item, index) => {
  setData(data => {
    item.dataPointColor = 'green';
    item.dataPointRadius = 6;
    item.dataPointText = item.value;
    data[index] = item;
    return data;
  });
}}

Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on th onPress event, the data must be a state variable.

---

Props for Area Chart

Prop	Type	Description	Default value
areaChart	Boolean	If set true, renders area chart instead of line chart	false
startFillColor	ColorValue	Start gradient color for the area chart	gray
endFillColor	ColorValue	End gradient color for the area chart	white
startOpacity	number	Start gradient opacity for the area chart	1
endOpacity	number	End gradient opacity for the area chart	1
startFillColor1	ColorValue	Start gradient color for the first dataset of the area chart	gray
endFillColor1	ColorValue	End gradient color for the first dataset of the area chart	white
startOpacity1	number	Start gradient opacity for the first dataset of the area chart	1
endOpacity1	number	End gradient opacity for the first dataset of the area chart	1
startFillColor2	ColorValue	Start gradient color for the second dataset of the area chart	gray
endFillColor2	ColorValue	End gradient color for the second dataset of the area chart	white
startOpacity2	number	Start gradient color for the second dataset of the area chart	1
endOpacity2	number	End gradient opacity for the second dataset of the area chart	1
startFillColor3	ColorValue	Start gradient color for the third dataset of the area chart	gray
endFillColor3	ColorValue	End gradient color for the third dataset of the area chart	white
startOpacity3	number	Start gradient color for the third dataset of the area chart	1
endOpacity3	number	End gradient opacity for the third dataset of the area chart	1
gradientDirection	string	Direction of the gradient ('horizontal' or 'vertical')	'vertical'

---