Search code examples
javascriptuser-interfacedygraphs

Dygraph asymmetrical error bars

When using Dygraphs to plot timeseries with error bars, is there any option to plot assymetrical error bars( e.g. value = 5, upperBar = 7, lowerBar = 1 ) or, at least, to limit the upper bar to a certain value (different for each datapoint) ?

Solution

  • This is exactly what the customBars option does. When you set it, the values in each series are a [low, value, high] tuple:

    const g = new Dygraph('divId', [
  [1, [10, 10, 100]],
  [2, [15, 20, 110]],
  [3, [10, 30, 100]],
  [4, [15, 40, 110]],
  [5, [10, 120, 100]],
  [6, [15, 50, 110]],
  [7, [10, 70, 100]],
  [8, [15, 90, 110]],
  [9, [10, 50, 100]]
], {
  customBars: true,
  errorBars: true,
  labels: ['X', 'Y']
});

    See this fiddle for an interactive example.