yAxis is cutting the values when values are too big and xAxis when the are too many data

[Girum]

Hi! I've implemented the LineChart in my project, but I have, sometimes, to receive large values, like:

When I plot the chart, it bocomes:

with the yaxis cutting the values. I tried to use eh offset in the yAxis... Ok, but the values override the chart... But in cases of minor values, they are too far from left... and it becomes "ugly". In charts of ohter libs for ReactJs, the yAxis plost ok and push the chart to right... There is some configuration to do that?

About the xAxis, when it has so many values, if cuts too. There is some configuration to reduce the number of labels showing?

My code:

<LineChartKit

                            data={{
                                labels: chartData.labels,
                                datasets: [
                                {
                                    data: chartData.data,
                                    color: (opacity = 1) => `#3BD8FF`,
                                }
                                ]
                            }}
                            width={dimensions.width-40}

                            withVerticalLines={false}

                            withShadow={false}
                            height={320}
                            xLabelsOffset={-10}
                            yLabelsOffset={30}
                            verticalLabelRotation={45}
                            onDataPointClick={(data) => {

                                let isSamePoint = (tooltipPos.x === data.x 
                                                    && tooltipPos.y === data.y)
            
                                isSamePoint ? setTooltipPos((previousState) => {
                                    return { 
                                              ...previousState,
                                              value: data.value,
                                              visible: !previousState.visible
                                           }
                                })
                                    : 
                                setTooltipPos({ x: data.x, value: data.value, y: data.y, visible: true, index: data.index });
            
                            }}
                            decorator={() => {
                                return tooltipPos.visible ? <View>
                                    <Svg>
                                        <Rect x={tooltipPos.x - 50} 
                                            y={tooltipPos.y - 5} 
                                            width="40" 
                                            height="30"
                                            stroke='#3BD8FF'
                                            strokeWidth={2}
                                            fill="#00000055" />
                                            <TextSVG
                                                x={tooltipPos.x - 30}
                                                y={tooltipPos.y + 15}
                                                fill="black"
                                                fontSize="14"
                                                fontWeight="bold"
                                                fontFamily='NotoSans'
                                                textAnchor="middle">
                                                {tooltipPos.value}
                                            </TextSVG>
                                    </Svg>
                                </View> : null
                            }}

                            getDotProps={(_, index) => {
                                if(tooltipPos.visible && index == tooltipPos.index){
                                    return {'r': "5"} 
                                } else {
                                    return {'r' : "0"}
                                }
                            }}
                            chartConfig={{
                                ...lineChartStyle.chartStyle,
                                useShadowColorFromDataset: true,
                                color: (opacity = 1) => `#3BD8FF`,
                                style: {
                                    borderRadius: 16
                                }
                            }}
                            segments={5}
                            style={lineChartStyle.chartStyle.style}
                        />
                    </View>}

the chart style is:

chartStyle: {
                propsForBackgroundLines: {
                strokeDasharray: "3",
                stroke: Colors.blue8
                },
                propsForVerticalLabels: {
                stroke: Colors.blue7,
                fontWeight: 'normal',
                fontSize: 10
                },
                propsForHorizontalLabels: {
                stroke: Colors.blue5,
                fontWeight: 'normal'
                },
                backgroundColor: Colors.blue9,
                backgroundGradientFrom: Colors.blue9,
                backgroundGradientTo: Colors.blue9,
                style: {
                    marginVertical: 8,
                    borderRadius: 0
                }
            }

[Malik-Usman17]

I am facing the same issue my graph is cutting from x-axis when I have large values, did you find the solution? @Girum

[muhammadarsal]

same issue

[Malik-Usman17]

Well later I found the solution, you need to put your LineChartKit component under your ScrollView component and mention the horizontal prop to true