I would like to control the x-axis intervals that are shown (and the vertical gridlines associate with each label point) but I have been unable to find way to do this. Dygraphs fills in x labels based on the over all x range by default, but I want more granularity. For instance if I want to present a month worth of data for July'14, I use dateWindow to set my bounds. By default Dygraphs gives me x intervals at 7/6, 7/13, 7/20, and 7/27 (the start of each week). But I want more labels and corresponding vertical lines; every 3 days for instance, instead of week start.

Is this possible? I'm happy with how each x label is displayed (so I don't think it's label formatter). I just want more of them.

I would like to control the x-axis intervals that are shown (and the vertical gridlines associate with each label point) but I have been unable to find way to do this. Dygraphs fills in x labels based on the over all x range by default, but I want more granularity. For instance if I want to present a month worth of data for July'14, I use dateWindow to set my bounds. By default Dygraphs gives me x intervals at 7/6, 7/13, 7/20, and 7/27 (the start of each week). But I want more labels and corresponding vertical lines; every 3 days for instance, instead of week start.

Is this possible? I'm happy with how each x label is displayed (so I don't think it's label formatter). I just want more of them.

• javascript
• dygraphs

Share Improve this question Follow asked Aug 25, 2014 at 13:24 user2245759user2245759 46711 gold badge66 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Nowadays there's an exposed method named getDateAxis at Dygraph instance.

Find more info about it at dygraph-tickers.js.

If you want to, you can also start reading since datePicker

So, you can treat your wanted "frequency" (each 3 days, each 1 day), based on maximum and minimum values of x-axis.

My example below won't find the "best frequency", but instead will fix it to ALWAYS show a tick each HOUR.

For testing purposes, change Dygraph.HOURLY to Dygraph.TWO_DAILY and you'll have a tick each two days, no matter what zoom you're in.

g = new Dygraph(
    document.getElementById("graphdiv"),
    graph_data,
    { // other options......
      axes: {
        x: {
          ticker: function(min, max, pixels, opts, dygraph, vals) {
            return Dygraph.getDateAxis(min, max, Dygraph.HOURLY, opts, dygraph);
          },
        },
      }
    }
  );

Change this section in the actual dygraph-bined.js file (2327):

x: {
  pixelsPerLabel: 70, <----- change this value!!
  axisLabelWidth: 60,
  axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
  valueFormatter: Dygraph.dateValueFormatter,
  drawGrid: true,
  drawAxis: true,
  independentTicks: true,
  ticker: null  // will be set in dygraph-tickers.js
},

Changing the pixelsPerLabel value in the options block, where the graph is set up, seems not to work. I'm not sure why.

Looks like the axis object provides the ticker property which is a function you can setup to return the tickmarks you want (http://dygraphs./options.html#Axis display).

Have a look at the Dygraphs built in ticker functions: http://dygraphs./dygraph-tickers.js

You can use these as a starting point for developing your own.