Search code examples
dygraphs

How to set specific y-axis label points in dygraphs?


Dygraphs ordinarily automatically picks Y- (and X-) axis labeling points based on the size of your axes, the size of the labels, etc. In some cases, it picks labeling points that lead to less clarity. For instance, on a chart with Y-axis values from 0 to 10, it labels at 0, 4, and 8 (for a certain size chart, at least); I'd like it to label at 0, 5, and 10. Is there an option or function I can provide to Dygraphs to specify what points I'd like labeled and ticked?


Solution

  • You can do this by writing your own y-axis ticker function: http://dygraphs.com/options.html#ticker

    This is pretty advanced customization, so be wary and read the documentation in dygraph-tickers.js. Here's some rough code:

    <script type="text/javascript">
      g = new Dygraph(div, data, {
        axes: {
          y: {
            ticker: function(min, max, pixels, opts, dygraph, vals) {
              return [{v:0, label:"0"}, {v:5, label:"5"}, {v:10, label:"10"}];
            }
          }
        }
      });
    </script>
    

    One downside of this approach is that these are the only y-axis tick marks you'll ever get, even if the user pans/zooms on the y-axis. Depending on your application, that may or may not be OK.