Merge pull request #13 from Abhinandan-Kushwaha/development

Added textShiftX and textShiftY props to LineChart

App.js

@@ -71,26 +71,32 @@ const App = () => {
     },
   ];
 
-  // const barData1 = [
+  const barData1 = [
-  //   {value: 250, label: 'M'},
+    {value: 250, label: 'M'},
-  //   {value: 500, label: 'T', frontColor: '#177AD5'},
+    {value: 500, label: 'T', frontColor: '#177AD5'},
-  //   {value: 745, label: 'W', frontColor: '#177AD5'},
+    {value: 745, label: 'W', frontColor: '#177AD5'},
-  //   {value: 320, label: 'T'},
+    {value: 320, label: 'T'},
-  //   {value: 600, label: 'F', frontColor: '#177AD5'},
+    {value: 600, label: 'F', frontColor: '#177AD5'},
-  //   {value: 256, label: 'S'},
+    {value: 256, label: 'S'},
-  //   {value: 300, label: 'S'},
+    {value: 300, label: 'S'},
-  // ];
+  ];
 
-  // const lineData1 = [
+  const lineData1 = [
-  //   {value: 0},
+    {value: 0, dataPointText: '0'},
-  //   {value: 20},
+    {value: 20, dataPointText: '20'},
-  //   {value: 18},
+    {value: 18, dataPointText: '18'},
-  //   {value: 40},
+    {value: 40, dataPointText: '40'},
-  //   {value: 36},
+    {value: 36, dataPointText: '36'},
-  //   {value: 60},
+    {value: 60, dataPointText: '60'},
-  //   {value: 54},
+    {value: 54, dataPointText: '54'},
-  //   {value: 85},
+    {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}

README.md

@@ -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

docs/LineChart/LineChartProps.md

@@ -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             |
 
 ---
 

src/LineChart/index.tsx

@@ -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>