enhanced Line and Pie charts

App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import {LineChart} from './src';
+import {BarChart, LineChart, PieChart} from './src';
 
 const App = () => {
   const lineData = [
@@ -18,8 +18,19 @@ const App = () => {
     {value: 100, text: 'May'},
   ];
 
+  const data = [{value: 50}, {value: 80}, {value: 90}, {value: 70}];
+
   return (
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      {/* <LineChart data={data} curved /> */}
+      {/* <BarChart
+        data={data}
+        frontColor="lightgray"
+        cappedBars
+        capThickness={2}
+        capColor="gray"
+      /> */}
+      {/* <PieChart data={data} donut isThreeD shadow /> */}
       <LineChart
         xAxisColor="red"
         xAxisThickness={2}
@@ -30,14 +41,15 @@ const App = () => {
         animationDuration={1200}
         height={300}
         rotateLabel
-        thickness={1}
+        // thickness={1}
         dataPointsHeight={8}
         dataPointsWidth={8}
+        animateTogether
         // textColor="skyblue"
         // dataPointsShape="rectangular"
         spacing={84}
         initialSpacing={4}
-        areaChart
+        // areaChart
         color1="skyblue"
         color2="orange"
         data={[...lineData]}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gifted-charts",
   "version": "0.0.1",
-  "description": "The most complete library for Bar, Line, Area and Pie charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
+  "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "scripts": {
     "android": "react-native run-android",

src/LineChart/index.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {
   View,
   ScrollView,
@@ -228,17 +228,17 @@ export const LineChart = (props: propTypes) => {
     props.dataPointsHeight1 || props.dataPointsHeight || 2;
   const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2;
   const dataPointsRadius1 =
-    props.dataPointsRadius1 || props.dataPointsRadius || 2;
+    props.dataPointsRadius1 || props.dataPointsRadius || 3;
   const dataPointsColor1 =
     props.dataPointsColor1 || props.dataPointsColor || 'black';
-  const dataPointsShape =
+  const dataPointsShape1 =
-    props.dataPointsShape || props.dataPointsShape || 'circular';
+    props.dataPointsShape1 || props.dataPointsShape || 'circular';
 
   const dataPointsHeight2 =
     props.dataPointsHeight2 || props.dataPointsHeight || 2;
   const dataPointsWidth2 = props.dataPointsWidth2 || props.dataPointsWidth || 2;
   const dataPointsRadius2 =
-    props.dataPointsRadius2 || props.dataPointsRadius || 2;
+    props.dataPointsRadius2 || props.dataPointsRadius || 3;
   const dataPointsColor2 =
     props.dataPointsColor2 || props.dataPointsColor || 'blue';
   const dataPointsShape2 =
@@ -648,6 +648,91 @@ export const LineChart = (props: propTypes) => {
     );
   };
 
+  const renderDataPoints = (
+    dataForRender,
+    dataPointsShape,
+    dataPointsWidth,
+    dataPointsHeight,
+    dataPointsColor,
+    dataPointsRadius,
+    textColor,
+    textFontSize,
+  ) => {
+    return dataForRender.map((item: itemType, index: number) => {
+      // console.log('comes in');
+      if (dataPointsShape === 'rectangular') {
+        return (
+          <Fragment key={index}>
+            <Rect
+              x={initialSpacing - dataPointsWidth + spacing * index}
+              y={
+                containerHeight -
+                dataPointsHeight / 2 +
+                10 -
+                (item.value * containerHeight) / maxValue
+              }
+              width={dataPointsWidth}
+              height={dataPointsHeight}
+              fill={dataPointsColor}
+            />
+            {item.text && (
+              <CanvasText
+                fill={item.textColor || textColor}
+                fontSize={item.textFontSize || textFontSize}
+                x={
+                  initialSpacing -
+                  dataPointsWidth +
+                  spacing * index +
+                  (item.textShiftX || 0)
+                }
+                y={
+                  containerHeight -
+                  dataPointsHeight / 2 +
+                  10 -
+                  (item.value * containerHeight) / maxValue +
+                  (item.textShiftY || 0)
+                }>
+                {item.text}
+              </CanvasText>
+            )}
+          </Fragment>
+        );
+      }
+      return (
+        <Fragment key={index}>
+          <Circle
+            cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
+            cy={
+              containerHeight + 10 - (item.value * containerHeight) / maxValue
+            }
+            r={dataPointsRadius}
+            fill={dataPointsColor}
+          />
+          {item.text && (
+            <CanvasText
+              fill={item.textColor || textColor}
+              fontSize={item.textFontSize || textFontSize}
+              x={
+                initialSpacing -
+                dataPointsWidth +
+                spacing * index +
+                (item.textShiftX || 0)
+              }
+              y={
+                containerHeight -
+                dataPointsHeight / 2 +
+                10 -
+                (item.value * containerHeight) / maxValue +
+                (item.textShiftY || 0)
+              }>
+              {item.text}
+            </CanvasText>
+          )}
+        </Fragment>
+      );
+    });
+  };
+
   const renderLine = (
     points: any,
     currentLineThickness: number | undefined,
@@ -702,6 +787,28 @@ export const LineChart = (props: propTypes) => {
               strokeWidth={currentLineThickness || thickness}
             />
           )}
+          {!hideDataPoints1 &&
+            renderDataPoints(
+              data,
+              dataPointsShape1,
+              dataPointsWidth1,
+              dataPointsHeight1,
+              dataPointsColor1,
+              dataPointsRadius1,
+              textColor1,
+              textFontSize1,
+            )}
+          {!hideDataPoints2 &&
+            renderDataPoints(
+              data2,
+              dataPointsShape2,
+              dataPointsWidth2,
+              dataPointsHeight2,
+              dataPointsColor2,
+              dataPointsRadius2,
+              textColor2,
+              textFontSize2,
+            )}
         </Svg>
       </View>
     );
@@ -764,155 +871,27 @@ export const LineChart = (props: propTypes) => {
             />
           )}
           {!hideDataPoints1 &&
-            data.map((item: itemType, index: number) => {
+            renderDataPoints(
-              if (dataPointsShape === 'rectangular') {
+              data,
-                return (
+              dataPointsShape1,
-                  <>
+              dataPointsWidth1,
-                    <Rect
+              dataPointsHeight1,
-                      x={initialSpacing - dataPointsWidth1 + spacing * index}
+              dataPointsColor1,
-                      y={
+              dataPointsRadius1,
-                        containerHeight -
+              textColor1,
-                        dataPointsHeight1 / 2 +
+              textFontSize1,
-                        10 -
+            )}
-                        (item.value * containerHeight) / maxValue
-                      }
-                      width={dataPointsWidth1}
-                      height={dataPointsHeight1}
-                      fill={dataPointsColor1}
-                    />
-                    {item.text && (
-                      <CanvasText
-                        fill={item.textColor || textColor1}
-                        fontSize={item.textFontSize || textFontSize1}
-                        x={
-                          initialSpacing -
-                          dataPointsWidth1 +
-                          spacing * index +
-                          (item.textShiftX || 0)
-                        }
-                        y={
-                          containerHeight -
-                          dataPointsHeight1 / 2 +
-                          10 -
-                          (item.value * containerHeight) / maxValue +
-                          (item.textShiftY || 0)
-                        }>
-                        {item.text}
-                      </CanvasText>
-                    )}
-                  </>
-                );
-              }
-              return (
-                <>
-                  <Circle
-                    cx={initialSpacing - dataPointsWidth1 / 2 + spacing * index}
-                    cy={
-                      containerHeight +
-                      10 -
-                      (item.value * containerHeight) / maxValue
-                    }
-                    r={dataPointsRadius1}
-                    fill={dataPointsColor1}
-                  />
-                  {item.text && (
-                    <CanvasText
-                      fill={item.textColor || textColor1}
-                      fontSize={item.textFontSize || textFontSize1}
-                      x={
-                        initialSpacing -
-                        dataPointsWidth1 +
-                        spacing * index +
-                        (item.textShiftX || 0)
-                      }
-                      y={
-                        containerHeight -
-                        dataPointsHeight1 / 2 +
-                        10 -
-                        (item.value * containerHeight) / maxValue +
-                        (item.textShiftY || 0)
-                      }>
-                      {item.text}
-                    </CanvasText>
-                  )}
-                </>
-              );
-            })}
           {!hideDataPoints2 &&
-            data2.map((item: itemType, index: number) => {
+            renderDataPoints(
-              if (dataPointsShape2 === 'rectangular') {
+              data2,
-                return (
+              dataPointsShape2,
-                  <>
+              dataPointsWidth2,
-                    <Rect
+              dataPointsHeight2,
-                      x={initialSpacing - dataPointsWidth2 + spacing * index}
+              dataPointsColor2,
-                      y={
+              dataPointsRadius2,
-                        containerHeight -
+              textColor2,
-                        dataPointsHeight2 / 2 +
+              textFontSize2,
-                        10 -
+            )}
-                        (item.value * containerHeight) / maxValue
-                      }
-                      width={dataPointsWidth2}
-                      height={dataPointsHeight2}
-                      fill={dataPointsColor2}
-                    />
-                    {item.text && (
-                      <CanvasText
-                        fill={item.textColor || textColor2}
-                        fontSize={item.textFontSize || textFontSize2}
-                        x={
-                          initialSpacing -
-                          dataPointsWidth2 +
-                          spacing * index +
-                          (item.textShiftX || 0)
-                        }
-                        y={
-                          containerHeight -
-                          dataPointsHeight2 / 2 +
-                          10 -
-                          (item.value * containerHeight) / maxValue +
-                          (item.textShiftY || 0)
-                        }>
-                        {item.text}
-                      </CanvasText>
-                    )}
-                  </>
-                );
-              }
-              return (
-                <>
-                  <Circle
-                    cx={initialSpacing - dataPointsWidth2 / 2 + spacing * index}
-                    cy={
-                      containerHeight +
-                      10 -
-                      (item.value * containerHeight) / maxValue
-                    }
-                    r={dataPointsRadius2}
-                    fill={dataPointsColor2}
-                  />
-                  {item.text && (
-                    <CanvasText
-                      fill={item.textColor || textColor2}
-                      fontSize={item.textFontSize || textFontSize2}
-                      x={
-                        initialSpacing -
-                        dataPointsWidth2 +
-                        spacing * index +
-                        (item.textShiftX || 0)
-                      }
-                      y={
-                        containerHeight -
-                        dataPointsHeight2 / 2 +
-                        10 -
-                        (item.value * containerHeight) / maxValue +
-                        (item.textShiftY || 0)
-                      }>
-                      {item.text}
-                    </CanvasText>
-                  )}
-                </>
-              );
-            })}
         </Svg>
       </Animated.View>
     );

src/PieChart/index.tsx

@@ -6,7 +6,7 @@ const pi = Math.PI;
 
 type propTypes = {
   radius?: number;
-  is3D?: Boolean;
+  isThreeD?: Boolean;
   donut?: Boolean;
   innerRadius?: number;
   shadow?: Boolean;
@@ -32,7 +32,7 @@ type itemType = {
   textColor?: string;
 };
 export const PieChart = (props: propTypes) => {
-  const {data, is3D, textColor} = props;
+  const {data, isThreeD, textColor} = props;
   const radius = props.radius || 120;
   const shadowWidth = props.shadowWidth || (4 * radius) / 3;
   const backgroundColor = props.backgroundColor || 'white';
@@ -59,7 +59,7 @@ export const PieChart = (props: propTypes) => {
     }
   });
 
-  const canvasHeight = is3D ? radius * 2.5 + 60 : radius * 2 + 60;
+  const canvasHeight = isThreeD ? radius * 2.5 + 60 : radius * 2 + 60;
   const canvasWidth = radius * 2 + 60;
 
   const [visibility, setVisibility] = useState(false);
@@ -73,7 +73,7 @@ export const PieChart = (props: propTypes) => {
       return null;
     }
 
-    if (is3D) {
+    if (isThreeD) {
       canvas.height = canvasHeight;
     } else {
       canvas.height = canvasHeight;
@@ -86,7 +86,7 @@ export const PieChart = (props: propTypes) => {
     const initialValue = 30;
 
     /******************       SHADOW        ***************/
-    if (is3D && shadow) {
+    if (isThreeD && shadow) {
       ctx.beginPath();
       ctx.moveTo(initialValue, radius + initialValue);
       ctx.lineTo(initialValue, shadowWidth + initialValue);
@@ -128,7 +128,7 @@ export const PieChart = (props: propTypes) => {
       /****************     being visible inside the chart content if          ***************/
       /****************     the color of sections is transparent               ***************/
 
-      if (is3D && shadow) {
+      if (isThreeD && shadow) {
         ctx.beginPath();
 
         ctx.moveTo(
@@ -211,7 +211,7 @@ export const PieChart = (props: propTypes) => {
   };
 
   return (
-    <View style={is3D && {transform: [{scaleY: 0.5}]}}>
+    <View style={isThreeD && {transform: [{scaleY: 0.5}]}}>
       <Canvas ref={handleCanvas} />
       {visibility && donut && !isDataShifted && (
         <View
@@ -225,13 +225,13 @@ export const PieChart = (props: propTypes) => {
               left: canvasWidth / 2 - innerRadius + shiftCenterX,
               top:
                 canvasHeight / 2 -
-                innerRadius * (is3D ? 1.5 : 1) +
+                innerRadius * (isThreeD ? 1.5 : 1) +
                 shiftCenterY,
               borderWidth: innerCircleBorderWidth,
               borderColor: innerCircleBorderColor,
               backgroundColor: innerCircleColor,
             },
-            is3D && {
+            isThreeD && {
               borderTopWidth: innerCircleBorderWidth * 5,
               borderLeftWidth: shiftCenterX
                 ? innerCircleBorderWidth * 2