CODEWITHSUNDEEP
javascriptdygraphs
Morten Grum
Morten Grum

Reputation: 1011

dygraphs Reverse y-axis with dynamic maximum (lower value)

What I would like to have: a dygraphs plot with reverse y-axis as shown in the documentation example: https://github.com/danvk/dygraphs/blob/master/tests/reverse-y-axis.html except I would like the y-max value (now at the bottom) to be dynamic so that its value is equal to the maximum data value in the zoom.

I have tried to set value range as valueRange: [ , 0] in place of valueRange: [ 3000, 0] (which works fine for non-reversed y-axis).

But in the reverse y-axis example yields this: enter image description here

The original with fixed reverse y-axis valueRange: [ 3000, 0] was this: enter image description here

I could try adding a zoom listener and then after each zoom set the valueRange: to [ max_value, 0 ] where max_value is for that specific zoom. But I'd very much like a simpler/cleaner solution if one exists.

Any suggestions appreciated! Thanks!

Upvotes: 1

Views: 290

Answers (1)

danvk
danvk

Reputation: 16903

To decide whether to flip the y-axis, dygraphs looks at whether the min y-value is greater than the max y-value. If you don't specify one, it can't do that, so that's not going to work.

Probably the easiest solution is to flip the y-axis after the data loads:

g = new Dygraph(div, data, options);

g.ready(() => {
  const [minY, maxY] = g.yAxisRange();
  // Change either of these to a hard-coded value as you wish:
  g.updateOptions({valueRange: [maxY, minY]});
});

Full example here.

Upvotes: 1

Related Questions