gifted-charts-core 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "./src/index.js",
   "files": [
@@ -12,20 +12,20 @@
     "lint": "eslint src/**/*.ts"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-native": "^0.72.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-native": "^0.73.0",
     "eslint": "^8.56.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-config-love": "^62.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": "*",

package/src/BarChart/RenderStackBars.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { type StackedBarChartPropsType, type stackDataItem } from './types';
 export declare const useRenderStackBars: (props: StackedBarChartPropsType) => {
     cotainsNegative: boolean;
     noAnimation: boolean;
-    localBarInnerComponent: ((item?: stackDataItem | undefined, index?: number | undefined) => import("react").ReactNode) | undefined;
+    localBarInnerComponent: ((item?: stackDataItem, index?: number) => import("react").ReactNode) | undefined;
     borderRadius: number | undefined;
     borderTopLeftRadius: number | undefined;
     borderTopRightRadius: number | undefined;

package/src/BarChart/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type lineConfigType, type BarChartPropsType, type barDataItem, type stackDataItem } from './types';
 import { type BarAndLineChartsWrapperTypes, type secondaryYAxisType } from '../utils/types';
 import { type Animated } from 'react-native';
@@ -75,7 +74,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
     rtl: boolean;
     intactTopLabel: boolean;
     barBorderColor: import("react-native").ColorValue;
-    barInnerComponent: ((item?: barDataItem | stackDataItem | undefined, index?: number | undefined) => import("react").ReactNode) | undefined;
+    barInnerComponent: ((item?: stackDataItem | barDataItem, index?: number) => import("react").ReactNode) | undefined;
     xAxisTextNumberOfLines: number;
     selectedIndex: number;
     setSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
@@ -148,7 +147,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
         barBorderTopRightRadius: number | undefined;
         barBorderBottomLeftRadius: number | undefined;
         barBorderBottomRightRadius: number | undefined;
-        barInnerComponent: ((item?: barDataItem | stackDataItem | undefined, index?: number | undefined) => import("react").ReactNode) | undefined;
+        barInnerComponent: ((item?: stackDataItem | barDataItem, index?: number) => import("react").ReactNode) | undefined;
         color: import("react-native").ColorValue | undefined;
         showGradient: boolean | undefined;
         gradientColor: import("react-native").ColorValue | undefined;

package/src/BarChart/index.js

@@ -490,6 +490,7 @@ export var useBarChart = function (props) {
         scrollAnimation: scrollAnimation,
         scrollEventThrottle: scrollEventThrottle,
         indicatorColor: props.indicatorColor,
+        selectedIndex: selectedIndex,
         setSelectedIndex: setSelectedIndex,
         spacing: spacing,
         showLine: showLine,

package/src/BarChart/index.ts

@@ -742,6 +742,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     scrollAnimation,
     scrollEventThrottle,
     indicatorColor: props.indicatorColor,
+    selectedIndex,
     setSelectedIndex,
     spacing,
     showLine,

package/src/BarChart/types.d.ts

@@ -335,6 +335,10 @@ export interface lineConfigType {
     arrowConfig?: arrowType;
     customDataPoint?: Function;
     isSecondary?: boolean;
+    focusEnabled?: boolean;
+    focusedDataPointColor?: ColorValue;
+    focusedDataPointRadius?: number;
+    focusedDataPointIndex?: number;
 }
 export interface defaultLineConfigType {
     initialSpacing: number;
@@ -364,6 +368,9 @@ export interface defaultLineConfigType {
     arrowConfig: arrowType;
     customDataPoint?: Function;
     isSecondary: boolean;
+    focusEnabled: boolean;
+    focusedDataPointColor: ColorValue;
+    focusedDataPointRadius: number;
 }
 interface arrowType {
     length?: number;

package/src/BarChart/types.ts

@@ -374,6 +374,10 @@ export interface lineConfigType {
   arrowConfig?: arrowType
   customDataPoint?: Function
   isSecondary?: boolean
+  focusEnabled?: boolean
+  focusedDataPointColor?: ColorValue
+  focusedDataPointRadius?: number
+  focusedDataPointIndex?: number
 }
 export interface defaultLineConfigType {
   initialSpacing: number
@@ -403,6 +407,9 @@ export interface defaultLineConfigType {
   arrowConfig: arrowType
   customDataPoint?: Function
   isSecondary: boolean
+  focusEnabled: boolean
+  focusedDataPointColor: ColorValue
+  focusedDataPointRadius: number
 }
 interface arrowType {
   length?: number

package/src/LineChart/LineChartBiColor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type LineChartBicolorPropsType, type bicolorLineDataItem } from './types';
 import { type BarAndLineChartsWrapperTypes } from '../utils/types';
 interface Points {

package/src/LineChart/LineChartBiColor.js

@@ -398,6 +398,7 @@ export var useLineChartBiColor = function (props) {
         scrollAnimation: scrollAnimation,
         scrollEventThrottle: scrollEventThrottle,
         indicatorColor: props.indicatorColor,
+        selectedIndex: selectedIndex,
         setSelectedIndex: setSelectedIndex,
         spacing: spacing,
         showLine: false,

package/src/LineChart/LineChartBiColor.ts

@@ -477,6 +477,7 @@ export const useLineChartBiColor = (
     scrollAnimation,
     scrollEventThrottle,
     indicatorColor: props.indicatorColor,
+    selectedIndex,
     setSelectedIndex,
     spacing,
     showLine: false,

package/src/LineChart/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type LineChartPropsType, type lineDataItem } from './types';
 import { type BarAndLineChartsWrapperTypes, EdgePosition, type LineSegment } from '../utils/types';
 import { type Animated } from 'react-native';

package/src/LineChart/index.js

@@ -1081,6 +1081,7 @@ export var useLineChart = function (props) {
         scrollAnimation: scrollAnimation,
         scrollEventThrottle: scrollEventThrottle,
         indicatorColor: props.indicatorColor,
+        selectedIndex: selectedIndex,
         setSelectedIndex: setSelectedIndex,
         spacing: spacing,
         showLine: false,

package/src/LineChart/index.ts

@@ -1807,6 +1807,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     scrollAnimation,
     scrollEventThrottle,
     indicatorColor: props.indicatorColor,
+    selectedIndex,
     setSelectedIndex,
     spacing,
     showLine: false,

package/src/PopulationPyramid/index.d.ts

@@ -110,10 +110,10 @@ export declare const usePopulationPyramid: (props: extendedPopulationPyramidProp
     leftXAfterMid: number;
     rightXAfterMid: number;
     yAxisLineProps: {
-        framework?: Framework.reactNative | undefined;
+        framework?: Framework.reactNative;
     } & import("./types").RulesProps;
     midAxisLineCommonProps: {
-        framework?: Framework.reactNative | undefined;
+        framework?: Framework.reactNative;
     } & import("./types").RulesProps;
     xAxisLabelY: number;
     xAxisIndicesCommonProps: {
@@ -123,7 +123,7 @@ export declare const usePopulationPyramid: (props: extendedPopulationPyramidProp
         strokeWidth: number;
     };
     verticalLinesCommonProps: {
-        framework?: Framework.reactNative | undefined;
+        framework?: Framework.reactNative;
     } & import("./types").RulesProps;
     xAxisLabelsCommonProps: {
         y: number;

package/src/components/AnimatedThreeDBar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type animatedBarPropTypes } from '../../BarChart/types';
 export declare const useAnimatedThreeDBar: (props: animatedBarPropTypes) => {
     showGradient: boolean;

package/src/components/BarAndLineChartsWrapper/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type BarAndLineChartsWrapperTypes, type horizSectionPropTypes } from '../../utils/types';
+import { LineInBarChartPropsType, type BarAndLineChartsWrapperTypes, type horizSectionPropTypes } from '../../utils/types';
 import { type NativeScrollEvent } from 'react-native';
 export declare const useBarAndLineChartsWrapper: (props: BarAndLineChartsWrapperTypes) => {
     containerHeightIncludingBelowXAxis: any;
@@ -59,40 +58,6 @@ export declare const useBarAndLineChartsWrapper: (props: BarAndLineChartsWrapper
         totalWidth: number;
         xAxisLabelsVerticalShift: any;
     };
-    lineInBarChartProps: {
-        yAxisLabelWidth: number;
-        initialSpacing: number;
-        spacing: number;
-        containerHeight: number;
-        lineConfig: any;
-        maxValue: any;
-        animatedWidth: any;
-        lineBehindBars: boolean;
-        points: string | any[];
-        arrowPoints: any;
-        data: any[];
-        totalWidth: number;
-        barWidth: number | undefined;
-        labelsExtraHeight: number;
-        scrollEventThrottle: number;
-        xAxisLabelsVerticalShift: any;
-    };
-    lineInBarChartProps2: {
-        lineConfig: any;
-        points: string | any[];
-        data: (import("../..").lineDataItem | import("../..").barDataItem | import("../..").stackDataItem)[] | undefined;
-        yAxisLabelWidth: number;
-        initialSpacing: number;
-        spacing: number;
-        containerHeight: number;
-        maxValue: any;
-        animatedWidth: any;
-        lineBehindBars: boolean;
-        arrowPoints: any;
-        totalWidth: number;
-        barWidth: number | undefined;
-        labelsExtraHeight: number;
-        scrollEventThrottle: number;
-        xAxisLabelsVerticalShift: any;
-    };
+    lineInBarChartProps: LineInBarChartPropsType;
+    lineInBarChartProps2: LineInBarChartPropsType;
 };

package/src/components/BarAndLineChartsWrapper/index.js

@@ -38,7 +38,7 @@ import { useEffect, useState } from 'react';
 import { AxesAndRulesDefaults, BarDefaults } from '../../utils/constants';
 export var useBarAndLineChartsWrapper = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
-    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, rtl = props.rtl, shiftX = props.shiftX, shiftY = props.shiftY, initialSpacing = props.initialSpacing, data = props.data, stackData = props.stackData, secondaryData = props.secondaryData, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, spacing = props.spacing, lineConfig = props.lineConfig, lineConfig2 = props.lineConfig2, maxValue = props.maxValue, lineData = props.lineData, lineData2 = props.lineData2, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, points2 = props.points2, arrowPoints = props.arrowPoints, width = props.width, horizSections = props.horizSections, endSpacing = props.endSpacing, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, showFractionalValues = props.showFractionalValues, axesAndRulesProps = props.axesAndRulesProps, yAxisLabelTexts = props.yAxisLabelTexts, yAxisOffset = props.yAxisOffset, rotateYAxisTexts = props.rotateYAxisTexts, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, scrollEventThrottle = props.scrollEventThrottle, endReachedOffset = props.endReachedOffset, isRTL = props.isRTL;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, rtl = props.rtl, shiftX = props.shiftX, shiftY = props.shiftY, initialSpacing = props.initialSpacing, data = props.data, stackData = props.stackData, secondaryData = props.secondaryData, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, spacing = props.spacing, lineConfig = props.lineConfig, lineConfig2 = props.lineConfig2, maxValue = props.maxValue, lineData = props.lineData, lineData2 = props.lineData2, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, points2 = props.points2, arrowPoints = props.arrowPoints, width = props.width, horizSections = props.horizSections, endSpacing = props.endSpacing, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, showFractionalValues = props.showFractionalValues, axesAndRulesProps = props.axesAndRulesProps, yAxisLabelTexts = props.yAxisLabelTexts, yAxisOffset = props.yAxisOffset, rotateYAxisTexts = props.rotateYAxisTexts, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, scrollEventThrottle = props.scrollEventThrottle, endReachedOffset = props.endReachedOffset, isRTL = props.isRTL, selectedIndex = props.selectedIndex;
     var yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop;
     var hideOrigin = (_a = axesAndRulesProps.hideOrigin) !== null && _a !== void 0 ? _a : AxesAndRulesDefaults.hideOrigin;
     var yAxisSide = (_b = axesAndRulesProps.yAxisSide) !== null && _b !== void 0 ? _b : AxesAndRulesDefaults.yAxisSide;
@@ -169,9 +169,10 @@ export var useBarAndLineChartsWrapper = function (props) {
         barWidth: barWidth,
         labelsExtraHeight: labelsExtraHeight,
         scrollEventThrottle: scrollEventThrottle,
-        xAxisLabelsVerticalShift: xAxisLabelsVerticalShift
+        xAxisLabelsVerticalShift: xAxisLabelsVerticalShift,
+        selectedIndex: selectedIndex
     };
-    var lineInBarChartProps2 = __assign(__assign({}, lineInBarChartProps), { lineConfig: lineConfig2, points: points2, data: lineData2 });
+    var lineInBarChartProps2 = __assign(__assign({}, lineInBarChartProps), { lineConfig: lineConfig2, points: points2, data: lineData2 !== null && lineData2 !== void 0 ? lineData2 : [] });
     var extendedContainerHeight = containerHeight + overflowTop + 10;
     var containerHeightIncludingBelowXAxis = extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
     var verticalLinesProps = {

package/src/components/BarAndLineChartsWrapper/index.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { AxesAndRulesDefaults, BarDefaults } from '../../utils/constants'
 import {
+  LineInBarChartPropsType,
   type BarAndLineChartsWrapperTypes,
   type horizSectionPropTypes
 } from '../../utils/types'
@@ -61,7 +62,8 @@ export const useBarAndLineChartsWrapper = (
 
     scrollEventThrottle,
     endReachedOffset,
-    isRTL
+    isRTL,
+    selectedIndex
   } = props
 
   const yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop
@@ -237,7 +239,7 @@ export const useBarAndLineChartsWrapper = (
     secondaryXAxis
   }
 
-  const lineInBarChartProps = {
+  const lineInBarChartProps: LineInBarChartPropsType = {
     yAxisLabelWidth,
     initialSpacing,
     spacing,
@@ -253,13 +255,14 @@ export const useBarAndLineChartsWrapper = (
     barWidth,
     labelsExtraHeight,
     scrollEventThrottle,
-    xAxisLabelsVerticalShift
+    xAxisLabelsVerticalShift,
+    selectedIndex
   }
-  const lineInBarChartProps2 = {
+  const lineInBarChartProps2: LineInBarChartPropsType = {
     ...lineInBarChartProps,
     lineConfig: lineConfig2,
     points: points2,
-    data: lineData2
+    data: lineData2 ?? []
   }
   const extendedContainerHeight = containerHeight + overflowTop + 10
   const containerHeightIncludingBelowXAxis =

package/src/index.d.ts

@@ -35,4 +35,4 @@ export { getTopAndLeftForStripAndLabel } from './components/common/StripAndLabel
 /***********************************************************************************************************************/
 export { getCumulativeWidth, getLighterColor, svgQuadraticCurvePath, svgPath, bezierCommand, getSegmentString, getCurvePathWithSegments, getPreviousSegmentsLastPoint, getPathWithHighlight, getRegionPathObjects, getSegmentedPathObjects, getArrowPoints, getAxesAndRulesProps, getExtendedContainerHeightWithPadding, getSecondaryDataWithOffsetIncluded, getArrowProperty, getAllArrowProperties, maxAndMinUtil, computeMaxAndMinItems, getLabelTextUtil, getXForLineInBar, getYForLineInBar, clone, getLineConfigForBarChart, adjustToOffset } from './utils';
 export { chartTypes, yAxisSides, loc, SEGMENT_START, SEGMENT_END, RANGE_ENTER, RANGE_EXIT, STOP, ruleTypes, AxesAndRulesDefaults, defaultArrowConfig, BarDefaults, defaultLineConfig, LineDefaults, defaultPointerConfig, pieColors, populationDefaults, defaultAnimationDuration } from './utils/constants';
-export { type RuleType, type RuleTypes, type RulesConfig, CurveType, EdgePosition, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type horizSectionPropTypes, type HorizSectionsType, type BarAndLineChartsWrapperTypes, type Pointer, type HighlightedRange, type LineSegment, type LineSvgProps, type LineProperties, type DataSet, Framework, type XAxisConfig } from './utils/types';
+export { type RuleType, type RuleTypes, type RulesConfig, CurveType, EdgePosition, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type horizSectionPropTypes, type HorizSectionsType, type BarAndLineChartsWrapperTypes, type Pointer, type HighlightedRange, type LineSegment, type LineSvgProps, type LineProperties, type DataSet, Framework, type XAxisConfig, type LineInBarChartPropsType, type DataPointProps } from './utils/types';

package/src/index.ts

@@ -146,5 +146,7 @@ export {
   type LineProperties,
   type DataSet,
   Framework,
-  type XAxisConfig
+  type XAxisConfig,
+  type LineInBarChartPropsType,
+  type DataPointProps
 } from './utils/types'

package/src/utils/constants.d.ts

@@ -119,7 +119,6 @@ export declare const BarDefaults: {
     focusedBarSideColor: string;
     focusedBarTopColor: string;
 };
-export declare const defaultLineConfig: defaultLineConfigType;
 export declare const LineDefaults: {
     color: string;
     curvature: number;
@@ -145,6 +144,7 @@ export declare const LineDefaults: {
     dataPointsColor2: string;
     dataPointsColor3: string;
     dataPointsShape: string;
+    focusedDataPointColor: string;
     textFontSize: number;
     textColor: string;
     startFillColor: string;
@@ -165,6 +165,7 @@ export declare const LineDefaults: {
     edgePosition: EdgePosition;
     endReachedOffset: number;
 };
+export declare const defaultLineConfig: defaultLineConfigType;
 export declare const defaultPointerConfig: {
     height: number;
     width: number;

package/src/utils/constants.js

@@ -130,34 +130,6 @@ export var BarDefaults = {
     focusedBarSideColor: '#776913',
     focusedBarTopColor: '#C8D565'
 };
-export var defaultLineConfig = {
-    initialSpacing: BarDefaults.spacing, // gets updated to spacing before being used
-    curved: false,
-    curvature: defaultCurvature,
-    curveType: defaultCurveType,
-    isAnimated: false,
-    animationDuration: defaultAnimationDuration,
-    thickness: 1,
-    color: 'black',
-    hideDataPoints: false,
-    dataPointsShape: 'circular',
-    dataPointsWidth: 4,
-    dataPointsHeight: 4,
-    dataPointsColor: 'black',
-    dataPointsRadius: 3,
-    textColor: 'gray',
-    textFontSize: 10,
-    textShiftX: 0,
-    textShiftY: 0,
-    shiftX: 0,
-    shiftY: 0,
-    delay: 0,
-    startIndex: 0,
-    endIndex: 0, // gets updated to lineData.length - 1
-    showArrow: false,
-    arrowConfig: defaultArrowConfig,
-    isSecondary: false
-};
 // Line chart specific
 export var LineDefaults = {
     color: 'black',
@@ -184,6 +156,7 @@ export var LineDefaults = {
     dataPointsColor2: 'blue',
     dataPointsColor3: 'red',
     dataPointsShape: 'circular',
+    focusedDataPointColor: 'orange',
     textFontSize: 10,
     textColor: 'gray',
     startFillColor: 'gray',
@@ -204,6 +177,37 @@ export var LineDefaults = {
     edgePosition: EdgePosition.AFTER_DATA_POINT,
     endReachedOffset: defaultEndReachedOffset
 };
+export var defaultLineConfig = {
+    initialSpacing: BarDefaults.spacing, // gets updated to spacing before being used
+    curved: false,
+    curvature: defaultCurvature,
+    curveType: defaultCurveType,
+    isAnimated: false,
+    animationDuration: defaultAnimationDuration,
+    thickness: 1,
+    color: 'black',
+    hideDataPoints: false,
+    dataPointsShape: 'circular',
+    dataPointsWidth: 4,
+    dataPointsHeight: 4,
+    dataPointsColor: 'black',
+    dataPointsRadius: 3,
+    textColor: 'gray',
+    textFontSize: 10,
+    textShiftX: 0,
+    textShiftY: 0,
+    shiftX: 0,
+    shiftY: 0,
+    delay: 0,
+    startIndex: 0,
+    endIndex: 0, // gets updated to lineData.length - 1
+    showArrow: false,
+    arrowConfig: defaultArrowConfig,
+    isSecondary: false,
+    focusEnabled: false,
+    focusedDataPointColor: LineDefaults.focusedDataPointColor,
+    focusedDataPointRadius: LineDefaults.dataPointsRadius,
+};
 export var defaultPointerConfig = {
     height: 0,
     width: 0,

package/src/utils/constants.ts

@@ -156,35 +156,6 @@ export const BarDefaults = {
   focusedBarTopColor: '#C8D565'
 }
 
-export const defaultLineConfig: defaultLineConfigType = {
-  initialSpacing: BarDefaults.spacing, // gets updated to spacing before being used
-  curved: false,
-  curvature: defaultCurvature,
-  curveType: defaultCurveType,
-  isAnimated: false,
-  animationDuration: defaultAnimationDuration,
-  thickness: 1,
-  color: 'black',
-  hideDataPoints: false,
-  dataPointsShape: 'circular',
-  dataPointsWidth: 4,
-  dataPointsHeight: 4,
-  dataPointsColor: 'black',
-  dataPointsRadius: 3,
-  textColor: 'gray',
-  textFontSize: 10,
-  textShiftX: 0,
-  textShiftY: 0,
-  shiftX: 0,
-  shiftY: 0,
-  delay: 0,
-  startIndex: 0,
-  endIndex: 0, // gets updated to lineData.length - 1
-  showArrow: false,
-  arrowConfig: defaultArrowConfig,
-  isSecondary: false
-}
-
 // Line chart specific
 
 export const LineDefaults = {
@@ -213,6 +184,7 @@ export const LineDefaults = {
   dataPointsColor2: 'blue',
   dataPointsColor3: 'red',
   dataPointsShape: 'circular',
+  focusedDataPointColor: 'orange',
 
   textFontSize: 10,
   textColor: 'gray',
@@ -237,6 +209,38 @@ export const LineDefaults = {
   endReachedOffset: defaultEndReachedOffset
 }
 
+export const defaultLineConfig: defaultLineConfigType = {
+  initialSpacing: BarDefaults.spacing, // gets updated to spacing before being used
+  curved: false,
+  curvature: defaultCurvature,
+  curveType: defaultCurveType,
+  isAnimated: false,
+  animationDuration: defaultAnimationDuration,
+  thickness: 1,
+  color: 'black',
+  hideDataPoints: false,
+  dataPointsShape: 'circular',
+  dataPointsWidth: 4,
+  dataPointsHeight: 4,
+  dataPointsColor: 'black',
+  dataPointsRadius: 3,
+  textColor: 'gray',
+  textFontSize: 10,
+  textShiftX: 0,
+  textShiftY: 0,
+  shiftX: 0,
+  shiftY: 0,
+  delay: 0,
+  startIndex: 0,
+  endIndex: 0, // gets updated to lineData.length - 1
+  showArrow: false,
+  arrowConfig: defaultArrowConfig,
+  isSecondary: false,
+  focusEnabled: false,
+  focusedDataPointColor: LineDefaults.focusedDataPointColor,
+  focusedDataPointRadius: LineDefaults.dataPointsRadius,
+}
+
 export const defaultPointerConfig = {
   height: 0,
   width: 0,

package/src/utils/index.d.ts

@@ -81,7 +81,7 @@ interface MaxAndMin {
 }
 export declare const maxAndMinUtil: (maxItem: number, minItem: number, roundToDigits?: number, showFractionalValues?: boolean) => MaxAndMin;
 export declare const computeMaxAndMinItems: (data: any[] | undefined, roundToDigits?: number, showFractionalValues?: boolean) => MaxAndMin;
-export declare const getLabelTextUtil: (val: string, index: number, showFractionalValues?: boolean, yAxisLabelTexts?: string[], yAxisOffset?: number, yAxisLabelPrefix?: string, yAxisLabelSuffix?: string, roundToDigits?: number, formatYLabel?: ((label: string) => string) | undefined) => string;
+export declare const getLabelTextUtil: (val: string, index: number, showFractionalValues?: boolean, yAxisLabelTexts?: string[], yAxisOffset?: number, yAxisLabelPrefix?: string, yAxisLabelSuffix?: string, roundToDigits?: number, formatYLabel?: (label: string) => string) => string;
 export declare const getXForLineInBar: (index: number, firstBarWidth: number, currentBarWidth: number, yAxisLabelWidth: number, lineConfig: any, spacing: number) => number;
 export declare const getYForLineInBar: (value: number | undefined, shiftY: number | undefined, containerHeight: number, maxValue: number) => number;
 export declare const clone: (obj: any) => any;

package/src/utils/index.js

@@ -749,7 +749,7 @@ export var clone = function (obj) {
     return temp;
 };
 export var getLineConfigForBarChart = function (lineConfig, barInitialSpacing) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
     return {
         initialSpacing: (_b = (_a = lineConfig.initialSpacing) !== null && _a !== void 0 ? _a : barInitialSpacing) !== null && _b !== void 0 ? _b : defaultLineConfig.initialSpacing,
         spacing: lineConfig.spacing,
@@ -787,7 +787,11 @@ export var getLineConfigForBarChart = function (lineConfig, barInitialSpacing) {
             showArrowBase: (_17 = (_16 = lineConfig.arrowConfig) === null || _16 === void 0 ? void 0 : _16.showArrowBase) !== null && _17 !== void 0 ? _17 : (_18 = defaultLineConfig.arrowConfig) === null || _18 === void 0 ? void 0 : _18.showArrowBase
         },
         customDataPoint: lineConfig.customDataPoint,
-        isSecondary: (_19 = lineConfig.isSecondary) !== null && _19 !== void 0 ? _19 : defaultLineConfig.isSecondary
+        isSecondary: (_19 = lineConfig.isSecondary) !== null && _19 !== void 0 ? _19 : defaultLineConfig.isSecondary,
+        focusEnabled: (_20 = lineConfig.focusEnabled) !== null && _20 !== void 0 ? _20 : defaultLineConfig.focusEnabled,
+        focusedDataPointColor: (_21 = lineConfig.focusedDataPointColor) !== null && _21 !== void 0 ? _21 : defaultLineConfig.focusedDataPointColor,
+        focusedDataPointRadius: (_22 = lineConfig.focusedDataPointRadius) !== null && _22 !== void 0 ? _22 : defaultLineConfig.focusedDataPointRadius,
+        focusedDataPointIndex: lineConfig.focusedDataPointIndex
     };
 };
 export var getNoOfSections = function (noOfSections, maxValue, stepValue) {

package/src/utils/index.ts

@@ -1241,7 +1241,15 @@ export const getLineConfigForBarChart = (
         defaultLineConfig.arrowConfig?.showArrowBase
     },
     customDataPoint: lineConfig.customDataPoint,
-    isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary
+    isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
+    focusEnabled: lineConfig.focusEnabled ?? defaultLineConfig.focusEnabled,
+    focusedDataPointColor:
+      lineConfig.focusedDataPointColor ??
+      defaultLineConfig.focusedDataPointColor,
+    focusedDataPointRadius:
+      lineConfig.focusedDataPointRadius ??
+      defaultLineConfig.focusedDataPointRadius,
+    focusedDataPointIndex: lineConfig.focusedDataPointIndex
   }
 }
 

package/src/utils/types.d.ts

@@ -1,7 +1,7 @@
 import { type ColorValue } from 'react-native';
 import { type chartTypes, type yAxisSides } from './constants';
 import { type lineDataItem } from '../LineChart/types';
-import { type barDataItem, type stackDataItem } from '../BarChart/types';
+import { lineConfigType, type barDataItem, type stackDataItem } from '../BarChart/types';
 export declare enum Framework {
     reactJS = 0,
     reactNative = 1
@@ -98,6 +98,41 @@ export interface secondaryLineConfigType {
     arrowConfig?: arrowConfigType;
     isSecondary?: boolean;
 }
+export interface ExtendedLineConfigType extends lineConfigType {
+    startIndex: number;
+    endIndex: number;
+    dataPointsHeight: number;
+}
+export interface LineInBarChartPropsType {
+    yAxisLabelWidth: number;
+    initialSpacing: number;
+    spacing: number;
+    containerHeight: number;
+    lineConfig: ExtendedLineConfigType;
+    maxValue: number;
+    animatedWidth: number;
+    lineBehindBars: boolean;
+    points: any;
+    arrowPoints: any;
+    data: any[];
+    totalWidth: number;
+    barWidth?: number;
+    labelsExtraHeight: number;
+    scrollEventThrottle: number;
+    xAxisLabelsVerticalShift: number;
+    selectedIndex: number;
+}
+export interface DataPointProps {
+    data: any[];
+    lineConfig: ExtendedLineConfigType;
+    barWidth?: number;
+    containerHeight: number;
+    maxValue: number;
+    firstBarWidth: number;
+    yAxisLabelWidth: number;
+    spacing: number;
+    selectedIndex: number;
+}
 export interface referenceConfigType {
     thickness?: number;
     width?: number;
@@ -213,6 +248,7 @@ export interface BarAndLineChartsWrapperTypes {
     scrollToIndex: number | undefined;
     scrollAnimation: boolean;
     indicatorColor: 'black' | 'default' | 'white' | undefined;
+    selectedIndex: number;
     setSelectedIndex: any;
     spacing: number;
     showLine: boolean;

package/src/utils/types.ts

@@ -1,7 +1,7 @@
 import { type ColorValue } from 'react-native'
 import { type chartTypes, type yAxisSides } from './constants'
 import { type lineDataItem } from '../LineChart/types'
-import { type barDataItem, type stackDataItem } from '../BarChart/types'
+import { lineConfigType, type barDataItem, type stackDataItem } from '../BarChart/types'
 
 export enum Framework {
   reactJS,
@@ -112,6 +112,44 @@ export interface secondaryLineConfigType {
   isSecondary?: boolean
 }
 
+export interface ExtendedLineConfigType extends lineConfigType {
+  startIndex: number
+  endIndex: number
+  dataPointsHeight: number
+}
+
+export interface LineInBarChartPropsType {
+  yAxisLabelWidth: number
+  initialSpacing: number
+  spacing: number
+  containerHeight: number
+  lineConfig: ExtendedLineConfigType
+  maxValue: number
+  animatedWidth: number
+  lineBehindBars: boolean
+  points: any
+  arrowPoints: any
+  data: any[]
+  totalWidth: number
+  barWidth?: number
+  labelsExtraHeight: number
+  scrollEventThrottle: number
+  xAxisLabelsVerticalShift: number
+  selectedIndex: number
+}
+
+export interface DataPointProps {
+  data: any[];
+  lineConfig: ExtendedLineConfigType;
+  barWidth?: number;
+  containerHeight: number;
+  maxValue: number;
+  firstBarWidth: number;
+  yAxisLabelWidth: number;
+  spacing: number;
+  selectedIndex: number;
+}
+
 export interface referenceConfigType {
   thickness?: number
   width?: number
@@ -239,6 +277,7 @@ export interface BarAndLineChartsWrapperTypes {
   scrollToIndex: number | undefined
   scrollAnimation: boolean
   indicatorColor: 'black' | 'default' | 'white' | undefined
+  selectedIndex: number
   setSelectedIndex: any
   spacing: number
   showLine: boolean