gifted-charts-core 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "./src/index.js",
   "files": [

package/src/BarChart/index.d.ts

@@ -172,7 +172,9 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
         noOfSectionsBelowXAxis: number;
         leftShiftForLastIndexTooltip: number;
         label: any;
+        secondaryLabel: any;
         labelTextStyle: any;
+        secondaryLabelTextStyle: any;
         pointerConfig: import("../utils/types").Pointer | undefined;
         yAxisExtraHeightAtTop: number;
         yAxisOffset: number;
@@ -181,6 +183,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
         stepValue: number;
         negativeStepHeight: number;
         negativeStepValue: number;
+        secondaryXAxis: import("../utils/types").XAxisConfig | undefined;
     };
     barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes;
     yAxisExtraHeightAtTop: number;

package/src/BarChart/index.js

@@ -394,7 +394,7 @@ export var useBarChart = function (props) {
         outputRange: [0, initialSpacing + totalWidth]
     });
     var getPropsCommonForBarAndStack = function (item, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         return {
             item: item,
             index: index,
@@ -449,15 +449,18 @@ export var useBarChart = function (props) {
             noOfSectionsBelowXAxis: noOfSectionsBelowXAxis,
             leftShiftForLastIndexTooltip: (_g = props.leftShiftForLastIndexTooltip) !== null && _g !== void 0 ? _g : 0,
             label: (_h = item.label) !== null && _h !== void 0 ? _h : (((_j = props.xAxisLabelTexts) === null || _j === void 0 ? void 0 : _j[index]) ? props.xAxisLabelTexts[index] : ''),
-            labelTextStyle: (_k = item.labelTextStyle) !== null && _k !== void 0 ? _k : props.xAxisLabelTextStyle,
+            secondaryLabel: (_o = (_k = item.secondaryLabel) !== null && _k !== void 0 ? _k : (_m = (_l = props.secondaryXAxis) === null || _l === void 0 ? void 0 : _l.labelTexts) === null || _m === void 0 ? void 0 : _m[index]) !== null && _o !== void 0 ? _o : '',
+            labelTextStyle: (_p = item.labelTextStyle) !== null && _p !== void 0 ? _p : props.xAxisLabelTextStyle,
+            secondaryLabelTextStyle: (_t = (_s = (_q = item.secondaryLabelTextStyle) !== null && _q !== void 0 ? _q : (_r = props.secondaryXAxis) === null || _r === void 0 ? void 0 : _r.labelsTextStyle) !== null && _s !== void 0 ? _s : item.labelTextStyle) !== null && _t !== void 0 ? _t : props.xAxisLabelTextStyle,
             pointerConfig: pointerConfig,
             yAxisExtraHeightAtTop: yAxisExtraHeightAtTop,
             yAxisOffset: yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0,
             focusedBarIndex: focusedBarIndex,
             stepHeight: stepHeight,
             stepValue: stepValue,
-            negativeStepHeight: (_l = props.negativeStepHeight) !== null && _l !== void 0 ? _l : stepHeight,
-            negativeStepValue: (_m = props.negativeStepValue) !== null && _m !== void 0 ? _m : stepValue
+            negativeStepHeight: (_u = props.negativeStepHeight) !== null && _u !== void 0 ? _u : stepHeight,
+            negativeStepValue: (_v = props.negativeStepValue) !== null && _v !== void 0 ? _v : stepValue,
+            secondaryXAxis: props.secondaryXAxis
         };
     };
     var barAndLineChartsWrapperProps = {

package/src/BarChart/index.ts

@@ -695,7 +695,14 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       label:
         item.label ??
         (props.xAxisLabelTexts?.[index] ? props.xAxisLabelTexts[index] : ''),
+      secondaryLabel:
+        item.secondaryLabel ?? props.secondaryXAxis?.labelTexts?.[index] ?? '',
       labelTextStyle: item.labelTextStyle ?? props.xAxisLabelTextStyle,
+      secondaryLabelTextStyle:
+        item.secondaryLabelTextStyle ??
+        props.secondaryXAxis?.labelsTextStyle ??
+        item.labelTextStyle ??
+        props.xAxisLabelTextStyle,
       pointerConfig,
       yAxisExtraHeightAtTop,
       yAxisOffset: yAxisOffset ?? 0,
@@ -703,7 +710,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       stepHeight,
       stepValue,
       negativeStepHeight: props.negativeStepHeight ?? stepHeight,
-      negativeStepValue: props.negativeStepValue ?? stepValue
+      negativeStepValue: props.negativeStepValue ?? stepValue,
+      secondaryXAxis: props.secondaryXAxis
     }
   }
 

package/src/BarChart/types.d.ts

@@ -1,6 +1,6 @@
 import { type ColorValue, type GestureResponderEvent, type ViewStyle } from 'react-native';
 import { type yAxisSides } from '../utils/constants';
-import { type CurveType, type Pointer, type RuleType, type RulesConfig, type referenceConfigType, type secondaryYAxisType } from '../utils/types';
+import { XAxisConfig, type CurveType, type Pointer, type RuleType, type RulesConfig, type referenceConfigType, type secondaryYAxisType } from '../utils/types';
 import { type Component, type ReactNode } from 'react';
 import { type lineDataItem } from '../LineChart/types';
 export interface stackDataItem {
@@ -292,6 +292,7 @@ export interface BarChartPropsType {
     focusedBarIndex?: number;
     adjustToWidth?: boolean;
     parentWidth?: number;
+    secondaryXAxis?: XAxisConfig;
 }
 export interface FocusedBarConfig {
     color?: ColorValue;
@@ -405,6 +406,9 @@ export interface barDataItem {
     topLabelComponentHeight?: number;
     spacing?: number;
     labelWidth?: number;
+    secondaryLabel?: string;
+    secondaryLabelComponent?: Function;
+    secondaryLabelTextStyle?: any;
     barBackgroundPattern?: () => ReactNode;
     patternId?: string;
     barMarginBottom?: number;
@@ -473,9 +477,11 @@ export interface RenderBarsPropsType {
     opacity?: number;
     side?: string;
     labelTextStyle?: any;
+    secondaryLabelTextStyle?: any;
     item: barDataItem;
     index: number;
     label: string;
+    secondaryLabel: string;
     containerHeight?: number;
     maxValue: number;
     spacing: number;
@@ -543,6 +549,7 @@ export interface RenderBarsPropsType {
     stepValue: number;
     negativeStepHeight: number;
     negativeStepValue: number;
+    secondaryXAxis?: XAxisConfig;
 }
 export interface trianglePropTypes {
     style: any;

package/src/BarChart/types.ts

@@ -5,6 +5,7 @@ import {
 } from 'react-native'
 import { type yAxisSides } from '../utils/constants'
 import {
+  XAxisConfig,
   type CurveType,
   type Pointer,
   type RuleType,
@@ -328,6 +329,7 @@ export interface BarChartPropsType {
 
   adjustToWidth?: boolean
   parentWidth?: number
+  secondaryXAxis?: XAxisConfig
 }
 
 export interface FocusedBarConfig {
@@ -445,6 +447,9 @@ export interface barDataItem {
   topLabelComponentHeight?: number
   spacing?: number
   labelWidth?: number
+  secondaryLabel?: string
+  secondaryLabelComponent?: Function
+  secondaryLabelTextStyle?: any
   barBackgroundPattern?: () => ReactNode
   patternId?: string
   barMarginBottom?: number
@@ -515,10 +520,12 @@ export interface RenderBarsPropsType {
   opacity?: number
   side?: string
   labelTextStyle?: any
+  secondaryLabelTextStyle?: any
 
   item: barDataItem
   index: number
   label: string
+  secondaryLabel: string
   containerHeight?: number
   maxValue: number
   spacing: number
@@ -590,6 +597,7 @@ export interface RenderBarsPropsType {
   stepValue: number
   negativeStepHeight: number
   negativeStepValue: number
+  secondaryXAxis?: XAxisConfig
 }
 
 export interface trianglePropTypes {

package/src/LineChart/index.d.ts

@@ -370,6 +370,7 @@ export declare const useLineChart: (props: extendedLineChartPropsType) => {
     stripWidth: number;
     stripColor: any;
     stripOpacity: number;
+    stripStrokeDashArray: number[] | undefined;
     unFocusOnPressOut: boolean;
     delayBeforeUnFocus: number;
     containerHeightIncludingBelowXAxis: number;

package/src/LineChart/index.js

@@ -237,7 +237,9 @@ export var useLineChart = function (props) {
     var _339 = computeMaxAndMinItems(data0 !== null && data0 !== void 0 ? data0 : data, props.roundToDigits, props.showFractionalValues), maxItem = _339.maxItem, minItem = _339.minItem;
     var maxValue = getMaxValue(props.maxValue, props.stepValue, noOfSections, maxItem);
     var mostNegativeValue = (_98 = props.mostNegativeValue) !== null && _98 !== void 0 ? _98 : minItem;
-    var overflowTop = (_99 = props.overflowTop) !== null && _99 !== void 0 ? _99 : 0;
+    var overflowTop = ((_99 = props.overflowTop) !== null && _99 !== void 0 ? _99 : props.secondaryXAxis)
+        ? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
+        : AxesAndRulesDefaults.overflowTop;
     var extendedContainerHeight = getExtendedContainerHeightWithPadding(containerHeight, overflowTop);
     var getX = function (index) { return initialSpacing + spacing * index - 1; };
     var getY = function (value) {
@@ -969,6 +971,7 @@ export var useLineChart = function (props) {
     var stripWidth = (_284 = props.stripWidth) !== null && _284 !== void 0 ? _284 : LineDefaults.stripWidth;
     var stripColor = (_285 = props.stripColor) !== null && _285 !== void 0 ? _285 : color1;
     var stripOpacity = (_286 = props.stripOpacity) !== null && _286 !== void 0 ? _286 : (startOpacity1 + endOpacity1) / 2;
+    var stripStrokeDashArray = props.stripStrokeDashArray;
     var unFocusOnPressOut = (_287 = props.unFocusOnPressOut) !== null && _287 !== void 0 ? _287 : LineDefaults.unFocusOnPressOut;
     var delayBeforeUnFocus = (_288 = props.delayBeforeUnFocus) !== null && _288 !== void 0 ? _288 : LineDefaults.delayBeforeUnFocus;
     var containerHeightIncludingBelowXAxis = extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
@@ -1453,6 +1456,7 @@ export var useLineChart = function (props) {
         stripWidth: stripWidth,
         stripColor: stripColor,
         stripOpacity: stripOpacity,
+        stripStrokeDashArray: stripStrokeDashArray,
         unFocusOnPressOut: unFocusOnPressOut,
         delayBeforeUnFocus: delayBeforeUnFocus,
         containerHeightIncludingBelowXAxis: containerHeightIncludingBelowXAxis,

package/src/LineChart/index.ts

@@ -446,7 +446,10 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
 
   const mostNegativeValue = props.mostNegativeValue ?? minItem
 
-  const overflowTop = props.overflowTop ?? 0
+  const overflowTop =
+    props.overflowTop ?? props.secondaryXAxis
+      ? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
+      : AxesAndRulesDefaults.overflowTop
 
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
@@ -1660,6 +1663,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const stripWidth = props.stripWidth ?? LineDefaults.stripWidth
   const stripColor = props.stripColor ?? color1
   const stripOpacity = props.stripOpacity ?? (startOpacity1 + endOpacity1) / 2
+  const stripStrokeDashArray = props.stripStrokeDashArray
   const unFocusOnPressOut =
     props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut
   const delayBeforeUnFocus =
@@ -2184,6 +2188,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     stripWidth,
     stripColor,
     stripOpacity,
+    stripStrokeDashArray,
     unFocusOnPressOut,
     delayBeforeUnFocus,
     containerHeightIncludingBelowXAxis,

package/src/LineChart/types.d.ts

@@ -1,6 +1,6 @@
 import { GestureResponderEvent, type ColorValue } from 'react-native';
 import { type yAxisSides } from '../utils/constants';
-import { type CurveType, type DataSet, type EdgePosition, type HighlightedRange, type LineSegment, type Pointer, type RuleType, type RulesConfig, type arrowConfigType, type referenceConfigType, type secondaryLineConfigType, type secondaryYAxisType } from '../utils/types';
+import { XAxisConfig, type CurveType, type DataSet, type EdgePosition, type HighlightedRange, type LineSegment, type Pointer, type RuleType, type RulesConfig, type arrowConfigType, type referenceConfigType, type secondaryLineConfigType, type secondaryYAxisType } from '../utils/types';
 export interface LineChartPropsType {
     height?: number;
     overflowTop?: number;
@@ -62,6 +62,7 @@ export interface LineChartPropsType {
     stripWidth?: number;
     stripColor?: ColorValue | string | any;
     stripOpacity?: number;
+    stripStrokeDashArray?: number[];
     onPress?: Function;
     unFocusOnPressOut?: boolean;
     delayBeforeUnFocus?: number;
@@ -299,12 +300,16 @@ export interface LineChartPropsType {
     parentWidth?: number;
     onChartAreaPress?: (event: GestureResponderEvent) => void;
     onBackgroundPress?: (event: GestureResponderEvent) => void;
+    secondaryXAxis?: XAxisConfig;
 }
 export interface lineDataItem {
     value: number;
     label?: string;
     labelComponent?: Function;
     labelTextStyle?: any;
+    secondaryLabel?: string;
+    secondaryLabelComponent?: Function;
+    secondaryLabelTextStyle?: any;
     dataPointText?: string;
     textShiftX?: number;
     textShiftY?: number;
@@ -321,6 +326,7 @@ export interface lineDataItem {
     stripWidth?: number;
     stripColor?: ColorValue | string | any;
     stripOpacity?: number;
+    stripStrokeDashArray?: number[];
     focusedDataPointShape?: string;
     focusedDataPointWidth?: number;
     focusedDataPointHeight?: number;

package/src/LineChart/types.ts

@@ -1,6 +1,7 @@
 import { GestureResponderEvent, type ColorValue } from 'react-native'
 import { type yAxisSides } from '../utils/constants'
 import {
+  XAxisConfig,
   type CurveType,
   type DataSet,
   type EdgePosition,
@@ -76,6 +77,7 @@ export interface LineChartPropsType {
   stripWidth?: number
   stripColor?: ColorValue | string | any
   stripOpacity?: number
+  stripStrokeDashArray?: number[]
   onPress?: Function
   unFocusOnPressOut?: boolean
   delayBeforeUnFocus?: number
@@ -334,6 +336,8 @@ export interface LineChartPropsType {
 
   onChartAreaPress?: (event: GestureResponderEvent) => void
   onBackgroundPress?: (event: GestureResponderEvent) => void
+
+  secondaryXAxis?: XAxisConfig
 }
 
 export interface lineDataItem {
@@ -341,6 +345,9 @@ export interface lineDataItem {
   label?: string
   labelComponent?: Function
   labelTextStyle?: any
+  secondaryLabel?: string
+  secondaryLabelComponent?: Function
+  secondaryLabelTextStyle?: any
   dataPointText?: string
   textShiftX?: number
   textShiftY?: number
@@ -359,6 +366,7 @@ export interface lineDataItem {
   stripWidth?: number
   stripColor?: ColorValue | string | any
   stripOpacity?: number
+  stripStrokeDashArray?: number[]
 
   focusedDataPointShape?: string
   focusedDataPointWidth?: number

package/src/components/BarAndLineChartsWrapper/index.js

@@ -37,7 +37,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 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, _12;
+    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 yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop;
     var hideOrigin = (_a = axesAndRulesProps.hideOrigin) !== null && _a !== void 0 ? _a : AxesAndRulesDefaults.hideOrigin;
@@ -46,48 +46,49 @@ export var useBarAndLineChartsWrapper = function (props) {
     var yAxisColor = (_c = axesAndRulesProps.yAxisColor) !== null && _c !== void 0 ? _c : AxesAndRulesDefaults.yAxisColor;
     var yAxisExtraHeight = (_d = axesAndRulesProps.yAxisExtraHeight) !== null && _d !== void 0 ? _d : containerHeight / 20;
     var trimYAxisAtTop = (_e = axesAndRulesProps.trimYAxisAtTop) !== null && _e !== void 0 ? _e : AxesAndRulesDefaults.trimYAxisAtTop;
-    var overflowTop = (_f = axesAndRulesProps.overflowTop) !== null && _f !== void 0 ? _f : AxesAndRulesDefaults.overflowTop;
-    var yAxisThickness = (_g = axesAndRulesProps.yAxisThickness) !== null && _g !== void 0 ? _g : AxesAndRulesDefaults.yAxisThickness;
-    var xAxisColor = (_h = axesAndRulesProps.xAxisColor) !== null && _h !== void 0 ? _h : AxesAndRulesDefaults.xAxisColor;
+    var overflowTop = axesAndRulesProps.overflowTop;
+    var yAxisThickness = (_f = axesAndRulesProps.yAxisThickness) !== null && _f !== void 0 ? _f : AxesAndRulesDefaults.yAxisThickness;
+    var xAxisColor = (_g = axesAndRulesProps.xAxisColor) !== null && _g !== void 0 ? _g : AxesAndRulesDefaults.xAxisColor;
     var xAxisLength = axesAndRulesProps.xAxisLength;
-    var xAxisType = (_j = axesAndRulesProps.xAxisType) !== null && _j !== void 0 ? _j : AxesAndRulesDefaults.xAxisType;
-    var xAxisLabelsVerticalShift = (_k = axesAndRulesProps.xAxisLabelsVerticalShift) !== null && _k !== void 0 ? _k : AxesAndRulesDefaults.xAxisLabelsVerticalShift;
+    var xAxisType = (_h = axesAndRulesProps.xAxisType) !== null && _h !== void 0 ? _h : AxesAndRulesDefaults.xAxisType;
+    var xAxisLabelsVerticalShift = (_j = axesAndRulesProps.xAxisLabelsVerticalShift) !== null && _j !== void 0 ? _j : AxesAndRulesDefaults.xAxisLabelsVerticalShift;
     var xAxisLabelsHeight = axesAndRulesProps.xAxisLabelsHeight;
     var xAxisTextNumberOfLines = axesAndRulesProps.xAxisTextNumberOfLines;
-    var dashWidth = (_l = axesAndRulesProps.dashWidth) !== null && _l !== void 0 ? _l : AxesAndRulesDefaults.dashWidth;
-    var dashGap = (_m = axesAndRulesProps.dashGap) !== null && _m !== void 0 ? _m : AxesAndRulesDefaults.dashGap;
-    var backgroundColor = (_o = axesAndRulesProps.backgroundColor) !== null && _o !== void 0 ? _o : AxesAndRulesDefaults.backgroundColor;
-    var hideRules = (_p = axesAndRulesProps.hideRules) !== null && _p !== void 0 ? _p : AxesAndRulesDefaults.hideRules;
+    var dashWidth = (_k = axesAndRulesProps.dashWidth) !== null && _k !== void 0 ? _k : AxesAndRulesDefaults.dashWidth;
+    var dashGap = (_l = axesAndRulesProps.dashGap) !== null && _l !== void 0 ? _l : AxesAndRulesDefaults.dashGap;
+    var backgroundColor = (_m = axesAndRulesProps.backgroundColor) !== null && _m !== void 0 ? _m : AxesAndRulesDefaults.backgroundColor;
+    var hideRules = (_o = axesAndRulesProps.hideRules) !== null && _o !== void 0 ? _o : AxesAndRulesDefaults.hideRules;
     var rulesLength = axesAndRulesProps.rulesLength;
-    var rulesType = (_q = axesAndRulesProps.rulesType) !== null && _q !== void 0 ? _q : AxesAndRulesDefaults.rulesType;
-    var rulesThickness = (_r = axesAndRulesProps.rulesThickness) !== null && _r !== void 0 ? _r : AxesAndRulesDefaults.rulesThickness;
-    var rulesColor = (_s = axesAndRulesProps.rulesColor) !== null && _s !== void 0 ? _s : AxesAndRulesDefaults.rulesColor;
-    var rulesConfigArray = (_t = axesAndRulesProps.rulesConfigArray) !== null && _t !== void 0 ? _t : AxesAndRulesDefaults.rulesConfigArray;
-    var showYAxisIndices = (_u = axesAndRulesProps.showYAxisIndices) !== null && _u !== void 0 ? _u : false;
-    var yAxisIndicesHeight = (_v = axesAndRulesProps.yAxisIndicesHeight) !== null && _v !== void 0 ? _v : AxesAndRulesDefaults.yAxisIndicesHeight;
-    var yAxisIndicesWidth = (_w = axesAndRulesProps.yAxisIndicesWidth) !== null && _w !== void 0 ? _w : AxesAndRulesDefaults.yAxisIndicesWidth;
-    var yAxisIndicesColor = (_x = axesAndRulesProps.yAxisIndicesColor) !== null && _x !== void 0 ? _x : AxesAndRulesDefaults.yAxisIndicesColor;
-    var hideYAxisText = (_y = axesAndRulesProps.hideYAxisText) !== null && _y !== void 0 ? _y : AxesAndRulesDefaults.hideYAxisText;
-    var yAxisTextNumberOfLines = (_z = axesAndRulesProps.yAxisTextNumberOfLines) !== null && _z !== void 0 ? _z : AxesAndRulesDefaults.yAxisTextNumberOfLines;
-    var yAxisLabelPrefix = (_0 = axesAndRulesProps.yAxisLabelPrefix) !== null && _0 !== void 0 ? _0 : '';
-    var yAxisLabelSuffix = (_1 = axesAndRulesProps.yAxisLabelSuffix) !== null && _1 !== void 0 ? _1 : '';
+    var rulesType = (_p = axesAndRulesProps.rulesType) !== null && _p !== void 0 ? _p : AxesAndRulesDefaults.rulesType;
+    var rulesThickness = (_q = axesAndRulesProps.rulesThickness) !== null && _q !== void 0 ? _q : AxesAndRulesDefaults.rulesThickness;
+    var rulesColor = (_r = axesAndRulesProps.rulesColor) !== null && _r !== void 0 ? _r : AxesAndRulesDefaults.rulesColor;
+    var rulesConfigArray = (_s = axesAndRulesProps.rulesConfigArray) !== null && _s !== void 0 ? _s : AxesAndRulesDefaults.rulesConfigArray;
+    var showYAxisIndices = (_t = axesAndRulesProps.showYAxisIndices) !== null && _t !== void 0 ? _t : false;
+    var yAxisIndicesHeight = (_u = axesAndRulesProps.yAxisIndicesHeight) !== null && _u !== void 0 ? _u : AxesAndRulesDefaults.yAxisIndicesHeight;
+    var yAxisIndicesWidth = (_v = axesAndRulesProps.yAxisIndicesWidth) !== null && _v !== void 0 ? _v : AxesAndRulesDefaults.yAxisIndicesWidth;
+    var yAxisIndicesColor = (_w = axesAndRulesProps.yAxisIndicesColor) !== null && _w !== void 0 ? _w : AxesAndRulesDefaults.yAxisIndicesColor;
+    var hideYAxisText = (_x = axesAndRulesProps.hideYAxisText) !== null && _x !== void 0 ? _x : AxesAndRulesDefaults.hideYAxisText;
+    var yAxisTextNumberOfLines = (_y = axesAndRulesProps.yAxisTextNumberOfLines) !== null && _y !== void 0 ? _y : AxesAndRulesDefaults.yAxisTextNumberOfLines;
+    var yAxisLabelPrefix = (_z = axesAndRulesProps.yAxisLabelPrefix) !== null && _z !== void 0 ? _z : '';
+    var yAxisLabelSuffix = (_0 = axesAndRulesProps.yAxisLabelSuffix) !== null && _0 !== void 0 ? _0 : '';
     var yAxisTextStyle = axesAndRulesProps.yAxisTextStyle;
     var secondaryYAxis = axesAndRulesProps.secondaryYAxis;
     var stepValue = axesAndRulesProps.stepValue;
     var negativeStepValue = axesAndRulesProps.negativeStepValue;
     var roundToDigits = axesAndRulesProps.roundToDigits;
     var referenceLinesConfig = axesAndRulesProps.referenceLinesConfig;
-    var referenceLinesOverChartContent = (_2 = referenceLinesConfig.referenceLinesOverChartContent) !== null && _2 !== void 0 ? _2 : AxesAndRulesDefaults.referenceLinesOverChartContent;
-    var showVerticalLines = (_3 = axesAndRulesProps.showVerticalLines) !== null && _3 !== void 0 ? _3 : AxesAndRulesDefaults.showVerticalLines;
-    var verticalLinesThickness = (_4 = axesAndRulesProps.verticalLinesThickness) !== null && _4 !== void 0 ? _4 : AxesAndRulesDefaults.verticalLinesThickness;
+    var referenceLinesOverChartContent = (_1 = referenceLinesConfig.referenceLinesOverChartContent) !== null && _1 !== void 0 ? _1 : AxesAndRulesDefaults.referenceLinesOverChartContent;
+    var showVerticalLines = (_2 = axesAndRulesProps.showVerticalLines) !== null && _2 !== void 0 ? _2 : AxesAndRulesDefaults.showVerticalLines;
+    var verticalLinesThickness = (_3 = axesAndRulesProps.verticalLinesThickness) !== null && _3 !== void 0 ? _3 : AxesAndRulesDefaults.verticalLinesThickness;
     var verticalLinesHeight = axesAndRulesProps.verticalLinesHeight;
-    var verticalLinesColor = (_5 = axesAndRulesProps.verticalLinesColor) !== null && _5 !== void 0 ? _5 : AxesAndRulesDefaults.verticalLinesColor;
-    var verticalLinesStrokeDashArray = (_6 = axesAndRulesProps.verticalLinesStrokeDashArray) !== null && _6 !== void 0 ? _6 : AxesAndRulesDefaults.verticalLinesStrokeDashArray;
-    var verticalLinesShift = (_7 = axesAndRulesProps.verticalLinesShift) !== null && _7 !== void 0 ? _7 : AxesAndRulesDefaults.verticalLinesShift;
-    var verticalLinesZIndex = (_8 = axesAndRulesProps.verticalLinesZIndex) !== null && _8 !== void 0 ? _8 : AxesAndRulesDefaults.verticalLinesZIndex;
-    var verticalLinesSpacing = (_9 = axesAndRulesProps.verticalLinesSpacing) !== null && _9 !== void 0 ? _9 : AxesAndRulesDefaults.verticalLinesSpacing;
-    var verticalLinesUptoDataPoint = (_10 = axesAndRulesProps.verticalLinesUptoDataPoint) !== null && _10 !== void 0 ? _10 : AxesAndRulesDefaults.verticalLinesUptoDataPoint;
+    var verticalLinesColor = (_4 = axesAndRulesProps.verticalLinesColor) !== null && _4 !== void 0 ? _4 : AxesAndRulesDefaults.verticalLinesColor;
+    var verticalLinesStrokeDashArray = (_5 = axesAndRulesProps.verticalLinesStrokeDashArray) !== null && _5 !== void 0 ? _5 : AxesAndRulesDefaults.verticalLinesStrokeDashArray;
+    var verticalLinesShift = (_6 = axesAndRulesProps.verticalLinesShift) !== null && _6 !== void 0 ? _6 : AxesAndRulesDefaults.verticalLinesShift;
+    var verticalLinesZIndex = (_7 = axesAndRulesProps.verticalLinesZIndex) !== null && _7 !== void 0 ? _7 : AxesAndRulesDefaults.verticalLinesZIndex;
+    var verticalLinesSpacing = (_8 = axesAndRulesProps.verticalLinesSpacing) !== null && _8 !== void 0 ? _8 : AxesAndRulesDefaults.verticalLinesSpacing;
+    var verticalLinesUptoDataPoint = (_9 = axesAndRulesProps.verticalLinesUptoDataPoint) !== null && _9 !== void 0 ? _9 : AxesAndRulesDefaults.verticalLinesUptoDataPoint;
     var noOfVerticalLines = axesAndRulesProps.noOfVerticalLines;
+    var secondaryXAxis = axesAndRulesProps.secondaryXAxis;
     var verticalLinesAr = noOfVerticalLines
         ? __spreadArray([], __read(Array(noOfVerticalLines).keys()), false) : __spreadArray([], __read(Array(stackData ? stackData.length : data.length).keys()), false);
     var horizSectionProps = {
@@ -149,7 +150,8 @@ export var useBarAndLineChartsWrapper = function (props) {
         roundToDigits: roundToDigits,
         secondaryData: secondaryData,
         secondaryYAxis: secondaryYAxis,
-        formatYLabel: axesAndRulesProps.formatYLabel
+        formatYLabel: axesAndRulesProps.formatYLabel,
+        secondaryXAxis: secondaryXAxis
     };
     var lineInBarChartProps = {
         yAxisLabelWidth: yAxisLabelWidth,
@@ -157,7 +159,7 @@ export var useBarAndLineChartsWrapper = function (props) {
         spacing: spacing,
         containerHeight: containerHeight,
         lineConfig: lineConfig,
-        maxValue: (_11 = secondaryYAxis === null || secondaryYAxis === void 0 ? void 0 : secondaryYAxis.maxValue) !== null && _11 !== void 0 ? _11 : maxValue,
+        maxValue: (_10 = secondaryYAxis === null || secondaryYAxis === void 0 ? void 0 : secondaryYAxis.maxValue) !== null && _10 !== void 0 ? _10 : maxValue,
         animatedWidth: animatedWidth,
         lineBehindBars: lineBehindBars,
         points: points,
@@ -175,7 +177,7 @@ export var useBarAndLineChartsWrapper = function (props) {
     var verticalLinesProps = {
         verticalLinesAr: verticalLinesAr,
         verticalLinesSpacing: verticalLinesSpacing,
-        spacing: (_12 = lineConfig === null || lineConfig === void 0 ? void 0 : lineConfig.spacing) !== null && _12 !== void 0 ? _12 : spacing,
+        spacing: (_11 = lineConfig === null || lineConfig === void 0 ? void 0 : lineConfig.spacing) !== null && _11 !== void 0 ? _11 : spacing,
         initialSpacing: initialSpacing,
         verticalLinesZIndex: verticalLinesZIndex,
         verticalLinesHeight: verticalLinesHeight,
@@ -229,7 +231,7 @@ export var useBarAndLineChartsWrapper = function (props) {
                 : difBwWidthHeight - 40) /
             2 +
         (yAxisAtTop ? (rtl ? (props.width ? 12 : 40) : 12) : 52), ")");
-    var _13 = __read(useState(false), 2), canMomentum = _13[0], setCanMomentum = _13[1];
+    var _12 = __read(useState(false), 2), canMomentum = _12[0], setCanMomentum = _12[1];
     var isCloseToEnd = function (_a) {
         var layoutMeasurement = _a.layoutMeasurement, contentOffset = _a.contentOffset, contentSize = _a.contentSize;
         return isRTL

package/src/components/BarAndLineChartsWrapper/index.ts

@@ -78,8 +78,7 @@ export const useBarAndLineChartsWrapper = (
     axesAndRulesProps.yAxisExtraHeight ?? containerHeight / 20
   const trimYAxisAtTop =
     axesAndRulesProps.trimYAxisAtTop ?? AxesAndRulesDefaults.trimYAxisAtTop
-  const overflowTop =
-    axesAndRulesProps.overflowTop ?? AxesAndRulesDefaults.overflowTop
+  const overflowTop = axesAndRulesProps.overflowTop
   const yAxisThickness =
     axesAndRulesProps.yAxisThickness ?? AxesAndRulesDefaults.yAxisThickness
   const xAxisColor =
@@ -162,6 +161,7 @@ export const useBarAndLineChartsWrapper = (
     axesAndRulesProps.verticalLinesUptoDataPoint ??
     AxesAndRulesDefaults.verticalLinesUptoDataPoint
   const noOfVerticalLines = axesAndRulesProps.noOfVerticalLines
+  const secondaryXAxis = axesAndRulesProps.secondaryXAxis
 
   const verticalLinesAr = noOfVerticalLines
     ? [...Array(noOfVerticalLines).keys()]
@@ -233,7 +233,8 @@ export const useBarAndLineChartsWrapper = (
 
     secondaryData,
     secondaryYAxis,
-    formatYLabel: axesAndRulesProps.formatYLabel
+    formatYLabel: axesAndRulesProps.formatYLabel,
+    secondaryXAxis
   }
 
   const lineInBarChartProps = {

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, type CurveType, type 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, type Framework } 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 } from './utils/types';

package/src/index.js

@@ -31,3 +31,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 { CurveType, EdgePosition, Framework } from './utils/types';

package/src/index.ts

@@ -128,8 +128,8 @@ export {
   type RuleType,
   type RuleTypes,
   type RulesConfig,
-  type CurveType,
-  type EdgePosition,
+  CurveType,
+  EdgePosition,
   type LabelsPosition,
   type PointerEvents,
   type secondaryYAxisType,
@@ -145,5 +145,6 @@ export {
   type LineSvgProps,
   type LineProperties,
   type DataSet,
-  type Framework
+  Framework,
+  type XAxisConfig
 } from './utils/types'

package/src/utils/constants.d.ts

@@ -30,6 +30,7 @@ export declare const AxesAndRulesDefaults: {
     yAxisThickness: number;
     trimYAxisAtTop: boolean;
     overflowTop: number;
+    overflowTopWithSecondaryXAxis: number;
     xAxisColor: string;
     xAxisThickness: number;
     xAxisType: string;

package/src/utils/constants.js

@@ -40,6 +40,7 @@ export var AxesAndRulesDefaults = {
     yAxisThickness: 1,
     trimYAxisAtTop: false,
     overflowTop: 0,
+    overflowTopWithSecondaryXAxis: 30,
     xAxisColor: 'black',
     xAxisThickness: 1,
     xAxisType: ruleTypes.SOLID,

package/src/utils/constants.ts

@@ -48,6 +48,7 @@ export const AxesAndRulesDefaults = {
   yAxisThickness: 1,
   trimYAxisAtTop: false,
   overflowTop: 0,
+  overflowTopWithSecondaryXAxis: 30,
   xAxisColor: 'black',
   xAxisThickness: 1,
   xAxisType: ruleTypes.SOLID,

package/src/utils/index.js

@@ -476,7 +476,7 @@ export var getArrowPoints = function (arrowTipX, arrowTipY, x1, y1, arrowLength,
     return arrowPoints;
 };
 export var getAxesAndRulesProps = function (props, stepValue, negativeStepValue, maxValue) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var secondaryYAxis = !props.secondaryYAxis || props.secondaryYAxis === true
         ? {}
         : props.secondaryYAxis;
@@ -486,13 +486,15 @@ export var getAxesAndRulesProps = function (props, stepValue, negativeStepValue,
         yAxisColor: props.yAxisColor,
         yAxisExtraHeight: props.yAxisExtraHeight,
         trimYAxisAtTop: props.trimYAxisAtTop,
-        overflowTop: props.overflowTop,
+        overflowTop: ((_a = props.overflowTop) !== null && _a !== void 0 ? _a : props.secondaryXAxis)
+            ? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
+            : AxesAndRulesDefaults.overflowTop,
         yAxisThickness: props.yAxisThickness,
         xAxisColor: props.xAxisColor,
         xAxisLength: props.xAxisLength,
         xAxisType: props.xAxisType,
-        xAxisTextNumberOfLines: (_a = props.xAxisTextNumberOfLines) !== null && _a !== void 0 ? _a : 1,
-        xAxisThickness: (_b = props.xAxisThickness) !== null && _b !== void 0 ? _b : AxesAndRulesDefaults.xAxisThickness,
+        xAxisTextNumberOfLines: (_b = props.xAxisTextNumberOfLines) !== null && _b !== void 0 ? _b : 1,
+        xAxisThickness: (_c = props.xAxisThickness) !== null && _c !== void 0 ? _c : AxesAndRulesDefaults.xAxisThickness,
         xAxisLabelsHeight: props.xAxisLabelsHeight,
         xAxisLabelsVerticalShift: props.xAxisLabelsVerticalShift,
         dashWidth: props.dashWidth,
@@ -541,11 +543,13 @@ export var getAxesAndRulesProps = function (props, stepValue, negativeStepValue,
         stepValue: stepValue,
         negativeStepValue: negativeStepValue !== null && negativeStepValue !== void 0 ? negativeStepValue : stepValue,
         secondaryYAxis: props.secondaryYAxis,
-        formatYLabel: props.formatYLabel
+        formatYLabel: props.formatYLabel,
+        secondaryXAxis: props.secondaryXAxis
     };
-    if (((_c = props.secondaryYAxis) !== null && _c !== void 0 ? _c : (_d = props.lineConfig) === null || _d === void 0 ? void 0 : _d.isSecondary) &&
+    if (((_d = props.secondaryYAxis) !== null && _d !== void 0 ? _d : (_e = props.lineConfig) === null || _e === void 0 ? void 0 : _e.isSecondary) &&
         maxValue !== undefined &&
-        secondaryYAxis && secondaryYAxis.maxValue === undefined) {
+        secondaryYAxis &&
+        secondaryYAxis.maxValue === undefined) {
         axesAndRulesProps.secondaryYAxis = __assign(__assign({}, secondaryYAxis), { maxValue: maxValue });
     }
     return axesAndRulesProps;

package/src/utils/index.ts

@@ -679,7 +679,10 @@ export const getAxesAndRulesProps = (
     yAxisColor: props.yAxisColor,
     yAxisExtraHeight: props.yAxisExtraHeight,
     trimYAxisAtTop: props.trimYAxisAtTop,
-    overflowTop: props.overflowTop,
+    overflowTop:
+      props.overflowTop ?? props.secondaryXAxis
+        ? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
+        : AxesAndRulesDefaults.overflowTop,
     yAxisThickness: props.yAxisThickness,
     xAxisColor: props.xAxisColor,
     xAxisLength: props.xAxisLength,
@@ -739,12 +742,14 @@ export const getAxesAndRulesProps = (
     negativeStepValue: negativeStepValue ?? stepValue,
 
     secondaryYAxis: props.secondaryYAxis,
-    formatYLabel: props.formatYLabel
+    formatYLabel: props.formatYLabel,
+    secondaryXAxis: props.secondaryXAxis
   }
   if (
     (props.secondaryYAxis ?? props.lineConfig?.isSecondary) &&
     maxValue !== undefined &&
-    secondaryYAxis && secondaryYAxis.maxValue === undefined
+    secondaryYAxis &&
+    secondaryYAxis.maxValue === undefined
   ) {
     axesAndRulesProps.secondaryYAxis = { ...secondaryYAxis, maxValue }
   }

package/src/utils/types.d.ts

@@ -30,6 +30,14 @@ export interface RulesConfig {
     dashWidth?: number;
     dashGap?: number;
 }
+export interface XAxisConfig {
+    thickness?: number;
+    color?: ColorValue;
+    labelsDistanceFromXaxis?: number;
+    labelsHeight?: number;
+    labelsTextStyle?: any;
+    labelTexts?: string[];
+}
 export type PointerEvents = 'box-none' | 'none' | 'box-only' | 'auto';
 export interface secondaryYAxisType {
     noOfSections?: number;
@@ -171,6 +179,7 @@ export interface horizSectionPropTypes {
     formatYLabel?: (label: string) => string;
     onlyReferenceLines?: boolean;
     renderReferenceLines?: boolean;
+    secondaryXAxis?: XAxisConfig;
 }
 interface HorizSectionObject {
     value: string;

package/src/utils/types.ts

@@ -38,6 +38,15 @@ export interface RulesConfig {
   dashGap?: number
 }
 
+export interface XAxisConfig {
+  thickness?: number
+  color?: ColorValue
+  labelsDistanceFromXaxis?: number
+  labelsHeight?: number
+  labelsTextStyle?: any
+  labelTexts?: string[]
+}
+
 export type PointerEvents = 'box-none' | 'none' | 'box-only' | 'auto'
 
 export interface secondaryYAxisType {
@@ -193,6 +202,7 @@ export interface horizSectionPropTypes {
   formatYLabel?: (label: string) => string
   onlyReferenceLines?: boolean
   renderReferenceLines?: boolean
+  secondaryXAxis?: XAxisConfig
 }
 
 interface HorizSectionObject {