focusedDataPointLabelComponent

[Hwang-YoonJi]

The View made with custom Tooltip is cut and the value is not visible. What's the problem

`
const renderChart = chartData => {
const convertedData = processChartData(chartData);

const customTooltip = value => (
  <View
    style={{
      backgroundColor: '#262626',
      // width: 200,
      // position: 'absolute',
      // bottom: 50,
      // marginTop: -44,
      // marginLeft: -26,
    }}>
    <Text style={{color: '#FFFFFF', fontSize: 12}}>{value.date}</Text>
  </View>
);

const data = convertedData.map(item => ({
  ...item,
  focusedDataPointLabelComponent: () => customTooltip(item),
}));

return (
  <View style={styles.chartContainer}>
    <LineChart
      data={data}
      height={80}
      color="red" // 선 색상
      thickness={3} // 선 두께
      // hideDataPoints // 데이터 포인트 숨기기
      xAxisColor="#D9D9D9" // X축 색상
      yAxisColor="transparent" // Y축 색상
      xAxisLabelTextStyle={styles.xLabel} // X축 라벨 스타일
      spacing={(Width * 0.6) / 6.5} // X축 간격
      showVerticalLines={true} // X축 세로선 표시
      hideYAxisText={true} // Y축 라벨 숨기기
      noOfSections={2} // Y축 분할 수 (3개의 섹션 생성)
      maxValue={2} // Y축 최대값 설정
      focusEnabled={true} // 포커스 활성화
      showDataPointOnFocus={true} // 포커스된 데이터 포인트 표시
      focusedDataPointColor={'#000'} // 포커스된 포인트 색상
      showStripOnFocus={true} // 포커스된 영역에 세로 스트립 표시
      stripColor={'#000'} //포커스된 스트립 색상
      stripStrokeDashArray={4}
      stripHeight={80}
      showDataPointLabelOnFocus={true} // 포커스된 데이터 포인트 라벨 표시
      // onFocus={point => {
      //   console.log('focusedDataPoint: ', point.date);
      //   setFocused(point.date);
      // }} // 포커스된 데이터 포인트를 처리
      unFocusOnPressOut={false}
    />
  </View>
);

};
`

[Abhinandan-Kushwaha]

@Hwang-YoonJi You can pass the width using the dataPointLabelWidth prop (either directly or inside the data array).

[Hwang-YoonJi]

Thank you for your response, may I ask additional questions?
Is the tooltip only visible within the graph area? Sometimes the tooltip is cut off.

`
const customTooltip = value => (
<View style={{backgroundColor: '#262626', padding: 8}}>
<Text style={{color: '#FFFFFF', fontSize: 12}}>{value.date}

);

const data = convertedData.map(item => ({
  ...item,
  focusedDataPointLabelComponent: () => customTooltip(item),
}));

    <LineChart
      data={data}
      height={80}
      width={Width * 0.7}
      color="#0F6BFF" 
      thickness={3}
      // hideDataPoints 
      xAxisColor="#D9D9D9" 
      yAxisColor="transparent" 
      xAxisLabelTextStyle={styles.xLabel} 
      spacing={(Width * 0.6) / 6.5} 
      showVerticalLines={true} 
      hideYAxisText={true} 
      noOfSections={2} 
      maxValue={2} 
      focusEnabled={true}
      showDataPointOnFocus={true} 
      focusedDataPointColor={'#000'} 
      showStripOnFocus={true} 
      stripColor={'#000'}
      stripStrokeDashArray={4}
      // stripHeight={80}
      showDataPointLabelOnFocus={true} 
      onFocus={point => setFocused(point.date)}
      unFocusOnPressOut={false}
      dataPointLabelWidth={95}
    />

`

[Abhinandan-Kushwaha]

yes the dataPoint labels are visible only inside the chart area