Labels in LineGraph issue

[NipunaC95]

I have added labels for line graph but they are not showing .

[seanwatters]

@NipunaC95, thank you for reaching out! Can you provide a screen shot of the chart and a code snippet, please?

[ni14forgit]

Yeah I'm having the same problem: no matter what defaults to 0....7

 <LineGraph
      data={[10, 15, 7, 20, 14, 12, 10, 20]}
      labels={["10", "10", "10", "10", "10", "10", "10", "10"]}
      width={350}
      height={160}
      isBezier
      lineColor={Color.white}
      dotColor={Color.white}
      lineWidth={7}
      dotSize={0}
      baseConfig={{
        xAxisLabelCount: 4,
        startAtZero: false,
        hasXAxisBackgroundLines: false,
        hasYAxisLabels: true,
        hasXAxisLabels: true,
        xAxisLabelStyle: {
          color: Color.white,
          fontSize: 15,
          fontWeight: "bold",
          xOffset: -5,
        },
        yAxisLabelStyle: {
          color: Color.white,
          fontSize: 15,
          fontWeight: "bold",
          yOffset: 15,
        },
      }}
      style={{
        marginTop: 30,
        backgroundColor: Color.blue,
        opacity: 0.8,
        borderRadius: 20,
        paddingVertical: 10,
        paddingHorizontal: 20,
      }}
    />

[seanwatters]

@ni14forgit, thanks for the example—sorry for the delayed response. I'll look into that this evening and get back to you.

[vincemavill]

Any update sir? I'm having the same issue.

[nocturne9no1]

I solved this issue! I just modified /react-native-line-graph/lib/line-graph/src/index.js There was no parameter for labels. And also there was no labels value in new ChartBuilder. After adding labels in the Linechart line and in the Chartbuilter constructor parameter, everything works well! Here is the code. I'll create a pull request regarding this issue.

...
const LineChart = ({ data = [0, 0, 0, 0], labels, height, width, hasLine = true, lineWidth = 3, lineColor = '#000000', isBezier, hasShadow, hasDots = true, dotColor = '#000000', dotSize = 5, style = {}, baseConfig }) => {
    const heightAdjustment = (dotSize > lineWidth ? dotSize : lineWidth);
    const chartBuilder = new ChartBuilder({
        data,
        labels,
        height: height - heightAdjustment * 2,
        width,
        ...baseConfig
    });
...