shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs
https://shutterstock.github.io/rickshaw
MIT License
6.53k stars 941 forks source link

x axis not rendering all specified tick marks #615

Open LauraKirby opened 6 years ago

LauraKirby commented 6 years ago

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