Issue with rendering xLabels on LineChart areaChart

[mafiusu]

I have to say it's one of the best libs I've seen on charts so far. Very easy to use and even customizable. Hope the lib will continue and be kept up to date!

At the moment I have problems with the labels on the X axis, because they are not rendered correctly. I'm running Version 1.3.16 with following code:

<LineChart
        data={data}
        areaChart
        color={"rgb(52, 168, 83)"}
        startFillColor="rgba(12, 156, 46,0.8)"
        endFillColor="rgba(12, 156, 46,0.01)"
        startOpacity={0.2}
        endOpacity={0.05}
        isAnimated
        animationDuration={1500}
        thickness={2}
        curved
        disableScroll
        width={windowWidth - (80 + yAxisLabelWidth + 10)}
        adjustToWidth
        yAxisLabelContainerStyle={{ marginLeft: -12 }}
        yAxisLabelWidth={yAxisLabelWidth}
        hideDataPoints
        initialSpacing={0}
        noOfSections={computeDataForLineChart()?.noOfSections} // DYNAMIC
        maxValue={computeDataForLineChart()?.maxValue} // DYNAMIC
        stepValue={computeDataForLineChart()?.stepValue} // DYNAMIC
        yAxisOffset={yAxisOffset}
        yAxisThickness={0}
        xAxisThickness={0}
        rotateLabel={false}
        hideRules
        getPointerProps={({ pointerIndex }) => {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
          setCurrentPointer(pointerIndex);
          if (pointerIndex === -1) return;
          Haptics.selectionAsync();
        }}
        yAxisSide={yAxisSides.RIGHT}
        pointerConfig={{
          pointerStripHeight: 200,
          pointerStripColor: Colors.lightGrey,
          pointerStripWidth: 2,
          pointerColor: Colors.quoteHigh,
          radius: 6,
          activatePointersOnLongPress: true,
          autoAdjustPointerLabelPosition: false,
          pointerLabelComponent: (items) => {
            console.log(items);
            return null;
          },
        }}
        yAxisTextStyle={{
          color: Colors.mediumGrey,
          fontSize: 12,
          fontFamily: "Regular",
        }}
        xAxisLabelTexts={["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]}
        xAxisLabelTextStyle={{
          color: Colors.mediumGrey,
          fontSize: 12,
          fontFamily: "Regular",
        }}
      />

Have I missed something here?

[Abhinandan-Kushwaha]

Hi @mafiusu 👋 The problem here is that the data points in your chart are very close to each other. Hence the width available for each x Label is too small.

Problem-

I can see you are using the xAxisLabelTexts prop in which you are passing only 7 values - ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"] Whereas, the data prop seems to have far too many items. Thus the 7 labels will be assigned to the first seven items from your data array. This is definitely not what you want (and this is what is causing faulty rendering of the x-axis labels.)

Solution-

You should remove the xAxisLabelTexts prop and instead add the label property inside the data array's objects. For example add label property to the first data item, and then to the fifth data item, then to the tenth data item and so on.

(basically you need to add the label property to every (data.length / 7)th item in the data array)

[rigAITe]

@mafiusu can you please provide a sample data to this please