Multiline chart CustomDataPoint Overflow issue.

[ashishkanhasoft]

Does anyone have any idea about the overflow of Datapoin like this whats issue.?

[Abhinandan-Kushwaha]

Hi @ashishkanhasoft
Can you share the data?

[ashishkanhasoft]

sure sir @Abhinandan-Kushwaha 

['linechart' + (i + 1)]: {
                    ['linechart' + (i + 1)]: resultData?.filter(function (o: any) {
                        return o?.measure_name === e;
                    })?.map((m: any, idx: any) => {
                        // console.log("type", typeof m.value);
                        sub = m?.measure_name;
                        return {
                            // value: Math?.round(m?.value),
                            value: valueChange(m?.value),
                            date: m?.bin_time,
                            color: colorShortingUsingKeyss(m?.index),
                            name: m?.measure_name,
                            // label: moment(m?.bin_time, 'YYYY-MM-DD HH:mm:ss.SSSSSSSSS')?.subtract(1, 'hour')?.utc()?.format('DD-MM hh:mm A'),
                            label: getUTCtoBrowserTimeAndDate(m?.bin_time),
                            labelComponent: () => {
                                return (
                                    <View style={{ width: 70, marginLeft: 7 }}>
                                        <Text semiBold textStyle={{ color: colors.black, fontSize: 10 }}>{getUTCtoBrowserTime(m?.bin_time)}</Text>
                                        <Text semiBold textStyle={{ color: colors.black, fontSize: 10 }}>{getUTCtoBrowstDate(m?.bin_time)}</Text>
                                    </View>
                                );
                            },
                            bin_time: m?.bin_time,
                            compare_bin_time: m?.bin_time,
                            customDataPoint: () => {
                                return (
                                    <View style={{
                                        height: 12,
                                        width: 12,
                                        borderRadius: 50,
                                        backgroundColor: colorShortingUsingKeyss(m?.index),
                                        borderWidth: 2,
                                        borderColor: colors.white,
                                        marginBottom: 5
                                    }} />

                                );
                            },
                            // dataPointLabelComponent: () => customTooltip(m?.value),
                        }
                    }),
                    color: colorShortingUsingKeyss(Math?.max(...resultData?.filter(function (o: any) {
                        return o?.measure_name === e;
                    })?.map(
                        (obj: any) => obj?.index
                    ))),
                    substance: sub

                }
            }

[ashishkanhasoft]

Also here is the Linechart component

<LineChart
        areaChart
        showFractionalValues={maxValue % 1 != 0}
        yAxisLabelTexts={
            // TODO: if maxValue is less then equal to 1 then its calculated
            getYaxisLabels(maxValue, 10)
        }
        hideRules
        verticalLinesColor={'#878787'}
        verticalLinesThickness={1}
        verticalLinesSpacing={50}
        focusEnabled
        showStripOnFocus
        data={lineChart_1_New?.length > 0 ? lineChart_1_New : fakeData}
        data2={lineChart_2_New}
        data3={lineChart_3_New}
        data4={lineChart_4_New}
        data5={lineChart_5_New}
        color1={lineChart_1_New?.length > 0 ? color1 : 'transparent'}
        color2={color2}
        color3={color3}
        color4={color4}
        color5={color5}
        width={screen_width}
        height={200}
        spacing={70}
        thickness={2}
        dashGap={10}
        dashWidth={8}
        startOpacity={0}
        endOpacity={0}
        initialSpacing={40}
        endSpacing={100}
        noOfSections={4}
        onlyPositive
        maxValue={400}
        yAxisThickness={0}
        rulesColor="gray"
        xAxisColor="lightgray"
        yAxisTextStyle={{ fontSize: 10, color: '#7C8DB5', display: 'none' }}
        yAxisLabelWidth={10}
        xAxisLabelTextStyle={{ width: 80, height: 40, paddingTop: 10, fontSize: 10, color: '#7C8DB5' }}
       xAxisThickness={0}
       pointerConfig={{
            pointerStripHeight: 120,
            pointerStripColor: 'black',
            pointerStripWidth: 2,
            pointerColor: "transparent",
            radius: 6,
            pointerLabelWidth: 100,
            pointerLabelHeight: 90,
            activatePointersOnLongPress: true,
            autoAdjustPointerLabelPosition: false,
            stripOverPointer: true,
            // persistPointer: true,
            pointerVanishDelay: 3000,
            initialPointerAppearDelay: 5,
            activatePointersDelay: 150,
            pointerEvents: 'auto',
            showPointerStrip:
                lineChart_1_New?.length > 0
                    || lineChart_2_New?.length > 0
                    || lineChart_3_New?.length > 0
                    || lineChart_4_New?.length > 0
                    || lineChart_5_New?.length > 0
                    ? true : false,
            pointerLabelComponent: items => {
                return pointerComponentCustom(items);
            },
        }}
    />