Label Overlapping X Axis SmoothLine

[jmdelatorre]

Before filing an issue please ensure the following boxes are checked, if applicable:

• [X ] I have searched for existing issues
• [X ] I have provided detailed instructions that can reproduce the issue (including code and data necessary)

Hi!

I'm trying to do a graph, with the data in the last 7, 30, 60 and 90 days.

Problem is, that the labels in the X axis are overlapping.

Currently i'm using this label function, where dateSelector is how many days I want, and v is the x indicator stating how many days back is that data.

        labelFunction: ((v) => {
          let d = moment(moment(this.state.date).format('YYYY-MM-DD'),'')
          return d.subtract((this.state.dateSelector - v ),'days').format('DD-MM')
        }),

Any help? Thanks

[jmdelatorre]

I'm also getting this error. (X axis lines are not getting to the top)

    let options = {
      showAreas: false,
      width: 180,
      height: 160,
      color: '#00f000',
      margin: {
        top: 50,
        left: 50,
        bottom: 50,
        right: 20
      },
      animate: {
        type: 'delayed',
        duration: 2000
      },
      axisX: {
        gridColor: "#00f000",
        showAxis: false,
        showLines: true,
        showLabels: true,
        showTicks: false,
        zeroAxis: false,
        orient: 'bottom',
        labelFunction: ((v) => {
          let d = moment(moment(this.state.date).format('YYYY-MM-DD'),'')
          return d.subtract((this.state.dateSelector - v ),'days').format('D')
        }),
        label: {
          fontFamily: 'Arial',
          fontSize: 14,
          fontWeight: false,
          fill: '#00f000',
          rotate: 45,
        }
      },
      axisY: {
        gridColor: "#00f000",
        axisColor:  "#00f000",
        showAxis: false,
        showLines: true,
        showLabels: true,
        showTicks: false,
        zeroAxis: false,
        orient: 'left',
        label: {
          fontFamily: 'Arial',
          fontSize: 12,
          fontWeight: false,
          fill: '#00f000',
        }
      }
    }

[marzolfb]

These are both most likely bugs. For the first issue, I've seen that behavior before as well and I will say its highly dependent on the number of data points you provide - it is not really a large number vs a small number thing but rather a number of data points being a certain "clean" factor/multiple of a given number. So a workaround, could be tweaking/adjusting the number of data points you provide - it will take some experimentation to see what the right workaround will be.

I've seen the second issue as well and again I think its dependent on the shape of your data in some manner.

It would be helpful to anyone fixing these issues in the future to have a sample of data that can be used to reproduce both issues above.

[cosimon]

I've seen the second issue and a workaround is to remove the top margin.