269 lines
31 KiB
Markdown
Raw Normal View History

2021-08-03 17:54:08 +05:30
# 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 animated Line or Area Chart. Animation occurs when the chart load for the first time | false |
| animateOnDataChange | Boolean | To show animation on change in data. A smooth transition takes place between the iold and new line | false |
| onDataChangeAnimationDuration | number | Duration (milliseconds) in which the transition animation takes place on a change in data | 400 |
2021-08-03 17:54:08 +05:30
2021-08-11 14:55:56 +05:30
---
2021-08-05 16:04:36 +05:30
**Alert!**\
These props are correlated:
2021-08-05 15:56:02 +05:30
1. maxValue
2. noOfSections
3. stepValue
They must follow the relation:
```js
2021-08-11 14:55:56 +05:30
maxValue = noOfSections * stepValue;
2021-08-05 16:04:36 +05:30
```
2021-08-05 15:56:02 +05:30
So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
2021-08-11 14:55:56 +05:30
---
2021-08-03 17:54:08 +05:30
### 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 |
| labelComponent | Function | custom label component 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 |
| 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 |
| hideDataPoint | Boolean | To hide the data point |
| 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 |
| dataPointLabelWidth | number | width of the label shown beside a data point |
| dataPointLabelShiftX | number | horizontal shift of a label from its corresponding data point |
| dataPointLabelShiftY | number | vertical shift of a label from its corresponding data point |
| dataPointLabelComponent | Function | custom component rendered above a data point |
| focusedDataPointLabelComponent | Function | custom component rendered above a data point only when focused/selected (when the user presses) |
| showStrip | Boolean | To show a vertical strip along the data point (even if it's not focused/selected) |
| stripHeight | number | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripWidth | number | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripColor | ColorValue | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
| stripOpacity | number | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true |
**Alert**\
When you are using the `dataPointLabelComponent`, make sure to provide the `dataPointsHeight` and `dataPointsWidth` values too (either in the corresponding item object, or directly as a props of the <LineChart> component). Otherwise the data points might appear shifted from their intended positions.
2021-08-06 01:43:48 +05:30
2021-08-11 14:55:56 +05:30
---
2021-08-05 16:14:15 +05:30
2021-08-03 17:54:08 +05:30
### 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 |
| yAxisLabelPrefix | String | The String prepended to the y axis label text (for example- '$') | '' |
| yAxisLabelSuffix | String | The String appended to the y axis label text | '' |
| 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<string> | 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-
```js
type referenceConfigType = {
thickness: number,
width: number,
color: ColorValue | String | any,
type: String,
dashWidth: number,
dashGap: number,
};
```
2021-08-03 17:54:08 +05:30
2021-08-11 14:55:56 +05:30
---
2021-08-05 16:14:15 +05:30
2021-08-03 17:54:08 +05:30
### 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) |
2021-08-03 17:54:08 +05:30
| 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) |
2021-08-03 17:54:08 +05:30
| curved | Boolean | To show curved line joining the data points | false |
2021-08-11 14:55:56 +05:30
---
2021-08-05 16:14:15 +05:30
2021-08-03 17:54:08 +05:30
### 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' |
| focusedDataPointShape | String | Shape of the data points when focused due to press event | item.dataPointsShape OR dataPointsShape |
| focusedDataPointWidth | number | Width of the data points when focused due to press event | item.dataPointsWidth OR dataPointsWidth |
| focusedDataPointHeight | number | Height of the data points when focused due to press event | item.dataPointsHeight OR dataPointsHeight |
| focusedDataPointColor | ColorValue | Color of the data points when focused due to press event | item.dataPointsColor OR dataPointsColor |
| focusedDataPointRadius | number | Radius of the data points when focused due to press event | item.dataPointsRadius OR dataPointsRadius |
| focusedCustomDataPoint | Function | Custom data point when focused due to press event | item.customDataPoint OR customDataPoint |
| 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 |
| customDataPoint | Function | A callback function to render a custom component as the data points | \_ |
| dataPointLabelWidth | number | width of the label shown beside a data point | 30 |
| dataPointLabelShiftX | number | horizontal shift of a label from its corresponding data point | 0 |
| dataPointLabelShiftY | number | vertical shift of a label from its corresponding data point | 0 |
2021-08-03 17:54:08 +05:30
2021-08-11 14:55:56 +05:30
---
2021-08-05 16:14:15 +05:30
2021-12-02 17:21:19 +05:30
### 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-
2021-12-02 17:29:36 +05:30
<img src='../../demos/focusPoint.gif' alt='' height=450 width=300/>
2021-12-02 17:21:19 +05:30
To achieve this the `pressEnabled` props must be set to true. In addition, use below props like `focusedDataPointShape`, `focusedDataPointColor`, `focusedDataPointRadius` to focus the pressed data point. The prop `onPress` can be used to pass a function that will be called when the press event is triggered.
| 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 |
| focusedDataPointShape | String | Shape of the data points when focused due to press event | item.dataPointsShape OR dataPointsShape |
| focusedDataPointWidth | number | Width of the data points when focused due to press event | item.dataPointsWidth OR dataPointsWidth |
| focusedDataPointHeight | number | Height of the data points when focused due to press event | item.dataPointsHeight OR dataPointsHeight |
| focusedDataPointColor | ColorValue | Color of the data points when focused due to press event | item.dataPointsColor OR dataPointsColor |
| focusedDataPointRadius | number | Radius of the data points when focused due to press event | item.dataPointsRadius OR dataPointsRadius |
| focusedCustomDataPoint | Function | Custom data point when focused due to press event | item.customDataPoint OR customDataPoint |
2021-12-02 17:21:19 +05:30
#### Example of onPress :
```js
onPress={(item, index) => {
Alert.alert(item.value)
2021-12-02 17:21:19 +05:30
}}
```
Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on the onPress event, the data must be a state variable.
2021-12-02 17:21:19 +05:30
---
2021-08-03 17:54:08 +05:30
### 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 |
2021-08-03 17:54:08 +05:30
| gradientDirection | string | Direction of the gradient (_'horizontal'_ or _'vertical'_) | 'vertical' |
2021-08-11 14:55:56 +05:30
2021-12-02 17:34:14 +05:30
---