Custom Horizontal Lines

[bytemtek]

Hello,

I'm coding stock chart and I need draw same horizontal lines on chart.

How can I add a horizontal line to position which I want in my chart?

Thanks

[sushil-appstudio]

any solutions?

[waqaramjad]

Any Update?

[deepsharma370]

Any Update on this ?

[geneshairzan]

any update?

[geneshairzan]

#584

cekin on it, but seems i cannot implement it yet.

[geneshairzan]

find way arround using decorator

import React from 'react';
import { View, Text } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
import { Dimensions } from 'react-native';
import { Svg, Line } from 'react-native-svg';

const CustomLineChart = () => {
  const screenWidth = Dimensions.get('window').width;

  const data = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
      {
        data: [20, 45, 28, 80, 99, 43],
        strokeWidth: 2,
      },
    ],
  };

  const customDecorator = () => {
    return (
      <Svg>
        <Line
          x1="0"
          y1="50"
          x2={screenWidth}
          y2="50"
          stroke="red"
          strokeWidth="2"
        />
      </Svg>
    );
  };

  return (
    <View>
      <Text>Custom Horizontal Line Chart</Text>
      <LineChart
        data={data}
        width={screenWidth}
        height={220}
        chartConfig={{
          backgroundGradientFrom: "#fff",
          backgroundGradientTo: "#fff",
          color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        }}
        decorator={customDecorator}
      />
    </View>
  );
};

export default CustomLineChart;