Added textShiftX and textShiftY props to LineChart
This commit is contained in:
Abhinandan Kushwaha
parent
a8c17b7b4c
commit
00b04666f6
87
App.js
87
App.js
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue