added the prop customDataPoint to render a custom component as the data points

App.js

@@ -51,7 +51,7 @@ const App = () => {
           height={300}
           maxValue={360}
           showLine
-          initialSpacing={20}
+          initialSpacing={30}
           // showVerticalLines
           lineConfig={{
             // isAnimated: true,
@@ -135,12 +135,26 @@ const App = () => {
           data={data}
           // data2={lineData1}
           areaChart
-          initialSpacing={10}
+          initialSpacing={20}
+          customDataPoint={() => {
+            return (
+              <View
+                style={{
+                  height: 10,
+                  width: 10,
+                  backgroundColor: 'red',
+                  borderWidth: 2,
+                  borderColor: 'blue',
+                  borderRadius: 5,
+                }}
+              />
+            );
+          }}
           onPress={(item, index) => {
             console.log('index-->', index);
             setData(data => {
               item.dataPointColor = 'green';
-              item.dataPointRadius = 6;
+              // item.dataPointRadius = 5;
               item.dataPointText = item.value;
               // item.dataPointShape = 'rectangular';
               // item.dataPointWidth = 10;
@@ -160,9 +174,9 @@ const App = () => {
           textFontSize={18}
           textColor={'green'}
           stripWidth={1}
-          stripHeight={200}
           // stripHeight={200}
-          stripOpacity={0.4}
+          // stripHeight={200}
+          stripOpacity={1}
           curved
           isAnimated
           animationDuration={2000}
@@ -172,9 +186,9 @@ const App = () => {
           color={'rgb(78, 0, 142)'}
           yAxisColor={'rgb(78, 0, 142)'}
           xAxisColor={'rgb(78, 0, 142)'}
-          dataPointsColor={'rgb(78, 0, 142)'}
+          // dataPointsColor={'yellow'}
-          dataPointsWidth={8}
+          dataPointsWidth={22}
-          dataPointsHeight={8}
+          dataPointsHeight={22}
           xAxisThickness={3}
           yAxisThickness={3}
           dataPointsRadius={4}

docs/LineChart/LineChartProps.md

@@ -174,6 +174,7 @@ type referenceConfigType = {
 | 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                   | \_            |
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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",
   "files": [

src/LineChart/index.tsx

@@ -138,6 +138,7 @@ type propTypes = {
   dataPointsRadius3?: number;
   dataPointsColor3?: string;
   dataPointsShape3?: string;
+  customDataPoint?: Function;
 
   startFillColor?: string;
   endFillColor?: string;
@@ -1182,24 +1183,18 @@ export const LineChart = (props: propTypes) => {
               )}
               {index === selectedIndex && showStripOnPress ? (
                 <Rect
-                  x={
+                  x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
-                    initialSpacing / 2 +
-                    (spacing * index - stripWidth) +
-                    stripWidth / 2 +
-                    1
-                  }
                   y={
                     stripHeight
                       ? containerHeight - stripHeight + 8
                       : containerHeight -
                         dataPointsHeight / 2 +
-                        15 -
+                        20 -
                         (item.value * containerHeight) / maxValue
                   }
                   width={stripWidth}
                   height={
-                    stripHeight ||
+                    stripHeight || containerHeight - dataPointsHeight / 2 + 20
-                    containerHeight - dataPointsHeight / 2 + 10 - 0
                   }
                   opacity={stripOpacity}
                   fill={stripColor}
@@ -1207,26 +1202,44 @@ export const LineChart = (props: propTypes) => {
               ) : null}
             </>
           ) : null}
+          {props.customDataPoint ? (
+            <View
+              style={{
+                position: 'absolute',
+                height: dataPointsHeight,
+                width: dataPointsWidth,
+                // backgroundColor: 'orange',
+                top:
+                  containerHeight - (item.value * containerHeight) / maxValue,
+                left: initialSpacing - dataPointsWidth + spacing * index,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              {props.customDataPoint()}
+            </View>
+          ) : null}
           {dataPointsShape === 'rectangular' ? (
             <Fragment key={index}>
-              <Rect
+              {props.customDataPoint ? null : (
-                x={initialSpacing - dataPointsWidth + spacing * index}
+                <Rect
-                y={
+                  x={initialSpacing - dataPointsWidth + spacing * index}
-                  containerHeight -
+                  y={
-                  dataPointsHeight / 2 +
+                    containerHeight -
-                  10 -
+                    dataPointsHeight / 2 +
-                  (item.value * containerHeight) / maxValue
+                    10 -
-                }
+                    (item.value * containerHeight) / maxValue
-                width={dataPointsWidth}
+                  }
-                height={dataPointsHeight}
+                  width={dataPointsWidth}
-                fill={
+                  height={dataPointsHeight}
-                  showDataPointOnPress
+                  fill={
-                    ? index === selectedIndex
+                    showDataPointOnPress
-                      ? dataPointsColor
+                      ? index === selectedIndex
-                      : 'none'
+                        ? dataPointsColor
-                    : dataPointsColor
+                        : 'none'
-                }
+                      : dataPointsColor
-              />
+                  }
+                />
+              )}
               {text ? (
                 !showTextOnPress || index === selectedIndex ? (
                   <CanvasText
@@ -1255,22 +1268,24 @@ export const LineChart = (props: propTypes) => {
             </Fragment>
           ) : (
             <Fragment key={index}>
-              <Circle
+              {props.customDataPoint ? null : (
-                cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
+                <Circle
-                cy={
+                  cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
-                  containerHeight +
+                  cy={
-                  10 -
+                    containerHeight +
-                  (item.value * containerHeight) / maxValue
+                    10 -
-                }
+                    (item.value * containerHeight) / maxValue
-                r={dataPointsRadius}
+                  }
-                fill={
+                  r={dataPointsRadius}
-                  showDataPointOnPress
+                  fill={
-                    ? index === selectedIndex
+                    showDataPointOnPress
-                      ? dataPointsColor
+                      ? index === selectedIndex
-                      : 'none'
+                        ? dataPointsColor
-                    : dataPointsColor
+                        : 'none'
-                }
+                      : dataPointsColor
-              />
+                  }
+                />
+              )}
               {text ? (
                 !showTextOnPress || index === selectedIndex ? (
                   <CanvasText