yAxis Label width not accounted for in line chart width

[nat-jones]

Expected Behavior: Chart should be rendered entirely inside it's parent component with no overflow.

Actual Behavior: The yAxis label pushes the chart over the right edge of the parent element

Line charts overflow their parent container width by exactly the width of the y axis label. Above, both the y axis label and the parent container width have a borderWidth set to 2. You can see that the chart extends off the edge of the parent View by the width of the y axis label.

Additionally, hideYAxisText prop should prevent the label from rendering entirely, which will result in a centered chart when the label text is hidden.

[Abhinandan-Kushwaha]

Hi @nat-jones 👋 Thanks for reporting this. Can you please share the code?

[nat-jones]

Hey @Abhinandan-Kushwaha !

Here is the code and data.

    const WINDOW_DIMENSIONS = useWindowDimensions();
    const CHART_WIDTH = WINDOW_DIMENSIONS.width - 60;
    const CHART_HEIGHT = WINDOW_DIMENSIONS.height / 7;
    const [selectedIndex, setSelectedIndex] = useState(-1);

    return (
        <View style={styles.chartContainer}>
            <LineChart
                data={electricalChartData}
                width={CHART_WIDTH}
                height={CHART_HEIGHT}
                initialSpacing={0}
                isAnimated
                animateOnDataChange
                hideDataPoints
                curved
                rulesType="solid"
                noOfSections={3}
                noOfVerticalLines={8}
                verticalLinesSpacing={(CHART_WIDTH - 2) / 8}
                adjustToWidth
                hideYAxisText
                yAxisColor={APP_COLORS.utilityTertiary}
                showVerticalLines
                verticalLinesColor={APP_COLORS.utilityTertiary}
                horizontalRulesStyle={{ color: APP_COLORS.utilityTertiary }}
                xAxisColor={APP_COLORS.utilityTertiary}
                color={gradientColor}
                startFillColor={gradientColor}
                startOpacity={1}
                endFillColor={gradientColor}
                endOpacity={0}
                areaChart
                getPointerProps={(item: { pointerIndex: number }) => {
                    setSelectedIndex(item.pointerIndex);
                }}
                pointerConfig={{
                    pointerStripColor: gradientColor,
                    pointerStripWidth: 4,
                    showPointerStrip: true,
                    hidePointer1: true,
                }}
            />
        </View>
    );

const styles StyleSheet.create({
    chartContainer: {
        borderWidth: 2
    }
});

const electricChartData = [
    { value: 10, time: '12am' },
    { value: 10, time: '1am' },
    { value: 5, time: '2am' },
    { value: 20, time: '3am' },
    { value: 15, time: '4am' },
    { value: 30, time: '5am' },
    { value: 5, labelComponent: () => CustomLabel('6am'), time: '6am' },
    { value: 10, time: '7am' },
    { value: 5, time: '8am' },
    { value: 20, time: '9am' },
    { value: 15, time: '10am' },
    { value: 30, time: '11am' },
    { value: 5, labelComponent: () => CustomLabel('12pm'), time: '12pm' },
    { value: 10, time: '1pm' },
    { value: 5, time: '2pm' },
    { value: 20, time: '3pm' },
    { value: 15, time: '4pm' },
    { value: 30, time: '5pm' },
    { value: 5, labelComponent: () => CustomLabel('6pm'), time: '6pm' },
    { value: 10, time: '7pm' },
    { value: 5, time: '8pm' },
    { value: 20, time: '9pm' },
    { value: 15, time: '10pm' },
    { value: 30, time: '11pm' },
    { value: 10, time: '12am' },
];

[quememo]

It's happening to me as well; it would be great to have an update on this.

[quememo]

Have you found any workaround in the meantime @nat-jones ?

[quememo]

After reading the props documentation, it states that it automatically adjusts the barWidth and spacing. It would be great if this could work in conjunction with a custom barWidth, so that only the spacing is calculated automatically

[nat-jones]

@quememo My only workaround is to use margins of different absolute sizes on either side of the chart so it appears centered. Not ideal, but looks ok.