Skip to content

x axis not rendering all specified tick marks #615

Description

@LauraKirby

I have specified that I would like 7 tick marks. My API returns 7 bar graph data points with 7 dates.
Issue: only 6 dates are displayed.

Create stacked bar graph using Angular 5 and Typescript:

  initializeGraph() {
    this.createGraph();
    this.createYAxis();
    this.createXAxis();
  }

  createGraph() {
    this.graph = new Rickshaw.Graph({
      element: this.graphContainer.nativeElement,
      renderer: 'bar',
      stack: true,
      interpolation: 'linear',
      series: this.graphData
    });
    this.graph.render();
  }

  createXAxis() {
    this.xAxis = new Rickshaw.Graph.Axis.X({
      graph: this.graph,
      orientation: 'bottom',
      ticks: 7,
      element: document.getElementById('x_axis'),
      width: this.graphWidth,
      tickFormat: function(x) {
                const options = { month: 'short', day: 'numeric' };
                const barDate = new Date(x * 1000).toLocaleDateString('en-US', options);
                console.log(barDate)
                return barDate;
              }
    });
    this.xAxis.render();
  }

  createYAxis() {
    this.yAxis = new Rickshaw.Graph.Axis.Y({
      graph: this.graph,
      element: document.getElementById('y_axis')
    });
    this.yAxis.render();
  }

Stacked bar graph data:

        "graph": [
            {
                "data": [
                    {
                        "x": 1522479600,
                        "y": 0
                    },
                    {
                        "x": 1522566000,
                        "y": 3.73
                    },
                    {
                        "x": 1522652400,
                        "y": 0
                    },
                    {
                        "x": 1522738800,
                        "y": 0.09
                    },
                    {
                        "x": 1522825200,
                        "y": 0
                    },
                    {
                        "x": 1522911600,
                        "y": 0.09
                    },
                    {
                        "x": 1522998000,
                        "y": 0
                    }
                ],
                "color": "#48d4bb"
            },
            {
                "data": [
                    {
                        "x": 1522479600,
                        "y": 7.45
                    },
                    {
                        "x": 1522566000,
                        "y": 0
                    },
                    {
                        "x": 1522652400,
                        "y": 0
                    },
                    {
                        "x": 1522738800,
                        "y": 0.09
                    },
                    {
                        "x": 1522825200,
                        "y": 1.23
                    },
                    {
                        "x": 1522911600,
                        "y": 0
                    },
                    {
                        "x": 1522998000,
                        "y": 0
                    }
                ],
                "color": "#3c6df0"
            }

bar graph (showing 6 dates):
6 dates

log dates calculated (only 6):
6 dates should be 7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions