react-native-gifted-charts 1.4.18 → 1.4.20

package/README.md

@@ -23,6 +23,8 @@ The exact same piece of code that you write to render charts in react-native, ca
 
 ## [Release notes 🎉](release-notes/release-notes.md)
 
+See the **[release changes by version here.](release-notes/release-notes.md)**
+
 
 <img src='/demos/bars.png' alt=''/>
 <img src='/demos/lineArea.png' alt=''/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.16"
+    "gifted-charts-core": "^0.1.19"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -139,6 +139,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         {showYAxisIndices && index !== noOfSections ? (
           <View
             style={{
+              position: 'absolute',
               height: yAxisIndicesHeight,
               width: yAxisIndicesWidth,
               left:

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx

@@ -4,8 +4,10 @@ import Svg, {Path} from 'react-native-svg';
 import {renderSpecificVerticalLines} from './renderSpecificVerticalLines';
 import {renderDataPoints} from './renderDataPoints';
 import {renderSpecificDataPoints} from './renderSpecificDataPoints';
+import {LineInBarChartPropsType} from 'gifted-charts-core';
+import {DataPointProps} from 'gifted-charts-core';
 
-const RenderLineInBarChart = (props: any) => {
+const RenderLineInBarChart = (props: LineInBarChartPropsType) => {
   const {
     yAxisLabelWidth,
     initialSpacing,
@@ -22,11 +24,12 @@ const RenderLineInBarChart = (props: any) => {
     barWidth,
     labelsExtraHeight,
     xAxisLabelsVerticalShift,
+    selectedIndex,
   } = props;
 
   const firstBarWidth = data[0].barWidth ?? barWidth;
 
-  const dataPointsProps = {
+  const dataPointsProps: DataPointProps = {
     data,
     lineConfig,
     barWidth,
@@ -35,6 +38,7 @@ const RenderLineInBarChart = (props: any) => {
     firstBarWidth,
     yAxisLabelWidth,
     spacing,
+    selectedIndex,
   };
 
   const specificVerticalLinesProps = {
@@ -89,9 +93,9 @@ const RenderLineInBarChart = (props: any) => {
           {lineConfig.showArrow && (
             <Path
               d={arrowPoints}
-              fill={lineConfig.arrowConfig.fillColor}
-              stroke={lineConfig.arrowConfig.strokeColor}
-              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+              fill={lineConfig.arrowConfig?.fillColor}
+              stroke={lineConfig.arrowConfig?.strokeColor}
+              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
             />
           )}
         </Svg>
@@ -127,9 +131,9 @@ const RenderLineInBarChart = (props: any) => {
           {lineConfig.showArrow && (
             <Path
               d={arrowPoints}
-              fill={lineConfig.arrowConfig.fillColor}
-              stroke={lineConfig.arrowConfig.strokeColor}
-              strokeWidth={lineConfig.arrowConfig.strokeWidth}
+              fill={lineConfig.arrowConfig?.fillColor}
+              stroke={lineConfig.arrowConfig?.strokeColor}
+              strokeWidth={lineConfig.arrowConfig?.strokeWidth}
             />
           )}
         </Svg>

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx

@@ -3,8 +3,9 @@ import {styles} from '../../../BarChart/styles';
 import {View} from 'react-native';
 import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
 import {Rect, Text as CanvasText, Circle} from 'react-native-svg';
+import {DataPointProps} from 'gifted-charts-core';
 
-export const renderDataPoints = (props: any) => {
+export const renderDataPoints = (props: DataPointProps) => {
   const {
     data,
     lineConfig,
@@ -14,13 +15,29 @@ export const renderDataPoints = (props: any) => {
     firstBarWidth,
     yAxisLabelWidth,
     spacing,
+    selectedIndex,
   } = props;
   return data.map((item: any, index: number) => {
-    if (index < lineConfig.startIndex || index > lineConfig.endIndex || item.hideDataPoint) {
+    if (
+      index < lineConfig.startIndex ||
+      index > lineConfig.endIndex ||
+      item.hideDataPoint
+    ) {
       return null;
     }
     const currentBarWidth = item.barWidth || barWidth || 30;
     const customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+    const dataPointColor =
+      lineConfig.focusEnabled &&
+      index === (lineConfig.focusedDataPointIndex ?? selectedIndex)
+        ? lineConfig.focusedDataPointColor
+        : lineConfig.dataPointsColor;
+
+    const dataPointRadius =
+      lineConfig.focusEnabled &&
+      index === (lineConfig.focusedDataPointIndex ?? selectedIndex)
+        ? lineConfig.focusedDataPointRadius
+        : lineConfig.dataPointsRadius;
     const value =
       item.value ??
       item.stacks.reduce((total: number, item: any) => total + item.value, 0);
@@ -73,7 +90,7 @@ export const renderDataPoints = (props: any) => {
             }
             width={lineConfig.dataPointsWidth}
             height={lineConfig.dataPointsHeight}
-            fill={lineConfig.dataPointsColor}
+            fill={dataPointColor}
           />
           {item.dataPointText && (
             <CanvasText
@@ -122,8 +139,8 @@ export const renderDataPoints = (props: any) => {
             containerHeight,
             maxValue,
           )}
-          r={lineConfig.dataPointsRadius}
-          fill={lineConfig.dataPointsColor}
+          r={dataPointRadius}
+          fill={dataPointColor}
         />
         {item.dataPointText && (
           <CanvasText

package/src/LineChart/index.tsx

@@ -34,6 +34,7 @@ import {
   useLineChart,
   adjustToOffset,
   LineProperties,
+  LineDefaults,
 } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
@@ -299,6 +300,7 @@ export const LineChart = (props: LineChartPropsType) => {
     stripWidth,
     stripColor,
     stripOpacity,
+    stripStrokeDashArray,
     unFocusOnPressOut,
     delayBeforeUnFocus,
     containerHeightIncludingBelowXAxis,
@@ -625,7 +627,9 @@ export const LineChart = (props: LineChartPropsType) => {
           item.dataPointHeight ||
           dataPtsHeight;
         dataPointsColor =
-          item.focusedDataPointColor || props.focusedDataPointColor || 'orange';
+          item.focusedDataPointColor ||
+          props.focusedDataPointColor ||
+          LineDefaults.focusedDataPointColor;
         dataPointsRadius =
           item.focusedDataPointRadius ||
           props.focusedDataPointRadius ||
@@ -661,9 +665,22 @@ export const LineChart = (props: LineChartPropsType) => {
       const currentStripHeight = item.stripHeight ?? stripHeight;
       const currentStripWidth = item.stripWidth ?? stripWidth;
       const currentStripOpacity = item.stripOpacity ?? stripOpacity;
+      const currentStripStrokeDashArray =
+        item.stripStrokeDashArray ?? stripStrokeDashArray ?? '';
       const currentStripColor = item.stripColor || stripColor;
       const position = I18nManager.isRTL ? 'right' : 'left';
 
+      const y1 = currentStripHeight
+        ? containerHeight - currentStripHeight + 8
+        : containerHeight -
+          dataPointsHeight / 2 +
+          14 -
+          (item.value * containerHeight) / maxValue;
+
+      const actualStripHeight =
+        currentStripHeight ||
+        (item.value * containerHeight) / maxValue - 2 + overflowTop;
+
       return (
         <Fragment key={index}>
           {focusEnabled ? (
@@ -694,23 +711,15 @@ export const LineChart = (props: LineChartPropsType) => {
           ) : null}
           {item.showStrip ||
           (focusEnabled && index === selectedIndex && showStripOnFocus) ? (
-            <Rect
-              x={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
-              y={
-                currentStripHeight
-                  ? containerHeight - currentStripHeight + 8
-                  : containerHeight -
-                    dataPointsHeight / 2 +
-                    14 -
-                    (item.value * containerHeight) / maxValue
-              }
-              width={currentStripWidth}
-              height={
-                currentStripHeight ||
-                (item.value * containerHeight) / maxValue - 2 + overflowTop
-              }
+            <Line
+              x1={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+              y1={y1}
+              x2={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+              y2={y1 + actualStripHeight}
+              strokeWidth={currentStripWidth}
+              stroke={currentStripColor}
+              strokeDasharray={currentStripStrokeDashArray}
               opacity={currentStripOpacity}
-              fill={currentStripColor}
             />
           ) : null}
           {hideDataPoints ? null : (
@@ -1211,7 +1220,7 @@ export const LineChart = (props: LineChartPropsType) => {
             set.textFontSize ?? textFontSize1,
             set.startIndex ?? 0,
             set.endIndex ?? set.data.length - 1,
-            false,
+            set.isSecondary,
             showValuesAsDataPointsText,
           );
         }) ?? null}