status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added textShiftX and textShiftY props to LineChart

This commit is contained in:
Abhinandan Kushwaha 2021-08-13 20:08:57 +05:30
parent a8c17b7b4c
commit 00b04666f6
4 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
App.js
View File

@ -71,26 +71,32 @@ const App = () => {
},
];
// const barData1 = [
// {value: 250, label: 'M'},
// {value: 500, label: 'T', frontColor: '#177AD5'},
// {value: 745, label: 'W', frontColor: '#177AD5'},
// {value: 320, label: 'T'},
// {value: 600, label: 'F', frontColor: '#177AD5'},
// {value: 256, label: 'S'},
// {value: 300, label: 'S'},
// ];
const barData1 = [
{value: 250, label: 'M'},
{value: 500, label: 'T', frontColor: '#177AD5'},
{value: 745, label: 'W', frontColor: '#177AD5'},
{value: 320, label: 'T'},
{value: 600, label: 'F', frontColor: '#177AD5'},
{value: 256, label: 'S'},
{value: 300, label: 'S'},
];
// const lineData1 = [
// {value: 0},
// {value: 20},
// {value: 18},
// {value: 40},
// {value: 36},
// {value: 60},
// {value: 54},
// {value: 85},
// ];
const lineData1 = [
{value: 0, dataPointText: '0'},
{value: 20, dataPointText: '20'},
{value: 18, dataPointText: '18'},
{value: 40, dataPointText: '40'},
{value: 36, dataPointText: '36'},
{value: 60, dataPointText: '60'},
{value: 54, dataPointText: '54'},
{value: 85, dataPointText: '85'},
];
const ldata = [
{value: 15, label: '15'},
{value: 30, label: '30'},
{value: 26, label: '26'},
{value: 40, label: '40'},
];
// const MyComponent = () => {
// return (
@ -107,14 +113,28 @@ const App = () => {
{value: 250, label: 'Apr', frontColor: '#4ADDBA'},
{value: 320, label: 'May', frontColor: '#91E3E3'},
];
const lineData = [
{value: 0},
{value: 20},
{value: 18},
{value: 40},
{value: 36},
{value: 60},
{value: 54},
{value: 85},
];
return (
<View
style={{
marginTop: 200,
paddingVertical: 50,
backgroundColor: '#1A3461',
}}>
{/* <LineChart data={ldata} /> */}
{/* <BarChart
data={data}
horizontal
showGradient
cappedBars
capColor={'rgba(78, 0, 142)'}
@ -124,7 +144,7 @@ const App = () => {
frontColor={'rgba(219, 182, 249,0.2)'}
/> */}
<BarChart
{/* <BarChart
width={340}
rotateLabel
barWidth={12}
@ -132,16 +152,16 @@ const App = () => {
noOfSections={4}
barBorderRadius={6}
stackData={stackData}
/>
/> */}
{/* <BarChart
frontColor={'#177AD5'}
barWidth={22}
data={[{value: 15}, {value: 30}, {value: 26}, {value: 40}]}
/> */}
{/* <LineChart
curved
initialSpacing={0}
data={lineData1}
data={lineData}
spacing={30}
hideDataPoints
thickness={5}
@ -153,9 +173,30 @@ const App = () => {
xAxisColor="#0BA5A4"
color="#0BA5A4"
/> */}
<LineChart
initialSpacing={0}
data={lineData1}
spacing={40}
textShiftY={-10}
textShiftX={-5}
// hideDataPoints
textColor="yellow"
textFontSize={12}
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
{/* <View style={{marginLeft: 20}}>
<BarChart
barWidth={22}
horizontal
yAxisAtTop
// spacing={16}
// height={260}
noOfSections={3}

5
README.md
View File

@ -4,7 +4,7 @@ The most complete library for Bar, Line, Area, Pie, and Donut charts in React Na
### Yet another chart library? Why?
**_To bring Life to your data_**
**_To bring Life to your data_**
1. Plenty of features with minimal code
2. Apply animations to your charts on load and on value change, just by adding a prop
@ -37,7 +37,7 @@ For Pie chart and Donut chart, these additional packages should be installed-
npm i react-native-canvas react-native-webview
```
You can omit the above packages if you don't intend to use Pie chart or Donuut chart.
You can omit the above packages if you don't intend to use Pie chart or Donut chart.
For iOS-
@ -46,6 +46,7 @@ cd ios && pod install
```
# Docs
[Documentation and gallery](https://gifted-charts.web.app/)
## Usage

4
docs/LineChart/LineChartProps.md
View File

@ -133,6 +133,10 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
| 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' |
| 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 |
---

18
src/LineChart/index.tsx
View File

@ -119,6 +119,8 @@ type propTypes = {
textFontSize2?: number;
textColor2?: string;
hideOrigin?: Boolean;
textShiftX?: number;
textShiftY?: number;
};
type itemType = {
value?: number;
@ -712,14 +714,14 @@ export const LineChart = (props: propTypes) => {
initialSpacing -
(item.dataPointWidth || 2) +
spacing * index +
(item.textShiftX || 0)
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
(item.dataPointHeight || 2) / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>
@ -751,14 +753,14 @@ export const LineChart = (props: propTypes) => {
initialSpacing -
(item.dataPointWidth || 2) +
spacing * index +
(item.textShiftX || 0)
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
(item.dataPointHeight || 2) / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>
@ -806,14 +808,14 @@ export const LineChart = (props: propTypes) => {
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || 0)
(item.textShiftX || props.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>
@ -839,14 +841,14 @@ export const LineChart = (props: propTypes) => {
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || 0)
(item.textShiftX || props.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
(item.textShiftY || props.textShiftY || 0)
}>
{item.dataPointText}
</CanvasText>