diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index 4f7b124f..ea7353d1 100644
--- a/src/AbstractChart.tsx
+++ b/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 (
+
+ );
+ });
+ };
+
renderHorizontalLabels = (
config: Omit & { data: number[] }
) => {
diff --git a/src/HelperTypes.ts b/src/HelperTypes.ts
index 0d5dde32..2486702a 100644
--- a/src/HelperTypes.ts
+++ b/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;
/**
diff --git a/src/line-chart/LineChart.tsx b/src/line-chart/LineChart.tsx
index 895e911a..a2f7e579 100644
--- a/src/line-chart/LineChart.tsx
+++ b/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 {
));
};
+ 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 {
withVerticalLines = true,
withHorizontalLabels = true,
withVerticalLabels = true,
+ withCustomXAxis = false,
+ customXAxisData,
style = {},
decorator,
onDataPointClick,
@@ -845,6 +881,9 @@ class LineChart extends AbstractChart {
const legendOffset = this.props.data.legend ? height * 0.15 : 0;
+ // just preparing the custom axis data to render
+ this.prepareCustomXAxisData(paddingTop, customXAxisData);
+
return (