Custom xAxis, e.g., horizontal, line drawing has been implemented

src/AbstractChart.tsx

@@ -179,6 +179,27 @@ class AbstractChart<
     );
   };
 
+  renderCustomHorizontalLines = config => {
+    const { width, paddingRight, customXAxisData } = config;
+    const datasets =
+      customXAxisData && customXAxisData.datasets
+        ? customXAxisData.datasets
+        : [];
+    return datasets.map(d => {
+      const lineStyle = d.lineStyle || { ...this.getPropsForBackgroundLines() };
+      return (
+        <Line
+          key={Math.random()}
+          x1={paddingRight}
+          y1={d.calcPts}
+          x2={width}
+          y2={d.calcPts}
+          {...lineStyle}
+        />
+      );
+    });
+  };
+
   renderHorizontalLabels = (
     config: Omit<AbstractChartConfig, "data"> & { data: number[] }
   ) => {

src/HelperTypes.ts

@@ -36,6 +36,25 @@ export interface ChartData {
   datasets: Dataset[];
 }
 
+export interface CustomAxisStyle {
+  /** The Custom Axis Style */
+  stroke?: (opacity: number, index?: number) => string;
+  strokeDasharray?: string;
+  strokeWidth?: number;
+}
+
+export interface CustomAxisInfo {
+  /** The custom line information */
+  pts: number;
+  calcPts: number;
+  lineStyle: CustomAxisStyle;
+}
+
+export interface CustomAxisData {
+  /** The custom line data */
+  datasets: CustomAxisInfo[];
+}
+
 export interface ChartConfig {
   backgroundColor?: string;
   /**

src/line-chart/LineChart.tsx

@@ -21,7 +21,7 @@ import AbstractChart, {
   AbstractChartConfig,
   AbstractChartProps
 } from "../AbstractChart";
-import { ChartData, Dataset } from "../HelperTypes";
+import { ChartData, Dataset, CustomAxisData } from "../HelperTypes";
 import { LegendItem } from "./LegendItem";
 
 let AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -91,6 +91,27 @@ export interface LineChartProps extends AbstractChartProps {
    * Show horizontal labels - default: True.
    */
   withHorizontalLabels?: boolean;
+  /**
+   * Show custom horizontal lines - default: False.
+   */
+  withCustomXAxis?: boolean;
+  /**
+   * Data for the custom X-axis.
+   *
+   * ```javascript
+   * const customXAxisData = {
+   *   datasets: [{
+   *     pts: 8.38,
+   *     lineStyle: {
+   *       stroke: Colors.black,
+   *       strokeWidth: 2,
+   *       strokeDasharray: "2, 4",
+   *     },
+   *   }],
+   * }
+   * ```
+   */
+  customXAxisData?: CustomAxisData;
   /**
    * Render charts from 0 not from the minimum value. - default: False.
    */
@@ -792,6 +813,19 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
     ));
   };
 
+  prepareCustomXAxisData = (paddingTop, customXAxisData) => {
+    const { height } = this.props;
+    const { datasets } = this.props.data;
+    if (!customXAxisData || !customXAxisData.datasets || !datasets) return;
+    const datas = this.getDatas(datasets);
+    const baseHeight = this.calcBaseHeight(datas, height);
+    customXAxisData.datasets.map(d => {
+      d.calcPts =
+        ((baseHeight - this.calcHeight(d.pts, datas, height)) / 4) * 3 +
+        paddingTop;
+    });
+  };
+
   render() {
     const {
       width,
@@ -806,6 +840,8 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
       withVerticalLines = true,
       withHorizontalLabels = true,
       withVerticalLabels = true,
+      withCustomXAxis = false,
+      customXAxisData,
       style = {},
       decorator,
       onDataPointClick,
@@ -845,6 +881,9 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
 
     const legendOffset = this.props.data.legend ? height * 0.15 : 0;
 
+    // just preparing the custom axis data to render
+    this.prepareCustomXAxisData(paddingTop, customXAxisData);
+
     return (
       <View style={style}>
         <Svg
@@ -923,6 +962,16 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
                   formatXLabel
                 })}
             </G>
+            <G>
+              {withCustomXAxis &&
+                (customXAxisData && customXAxisData.datasets
+                  ? this.renderCustomHorizontalLines({
+                      ...config,
+                      paddingRight,
+                      customXAxisData
+                    })
+                  : null)}
+            </G>
             <G>
               {this.renderLine({
                 ...config,