@qogni/dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
1,277 lines (1,103 loc) • 69.4 kB
TypeScript
/// <reference types="google.visualization" />
export namespace dygraphs {
type DataArray = Array<Array<number | number[] | Date | null>>;
type Data = string | DataArray | google.visualization.DataTable;
type Ticker = (
min: number,
max: number,
pixels: number,
opts: (name: string) => any,
dygraph: Readonly<Dygraph>,
vals: number[],
) => Array<{ v: number; label: string }>;
type AnnotationClickHandler = (
annotation: Readonly<Annotation>,
point: Readonly<Point>,
dygraph: Readonly<Dygraph>,
event: MouseEvent,
) => any;
type AnnotationDblClickHandler = AnnotationClickHandler;
type AnnotationMouseOutHandler = AnnotationClickHandler;
type AnnotationMouseOverHandler = AnnotationClickHandler;
interface Layout {
/**
* Returns the box which the chart should be drawn in. This is the canvas's
* box, less space needed for the axis and chart labels.
*/
getPlotArea(): { x: number; y: number; w: number; h: number };
}
interface DataHandler {
/**
* The extract series method is responsible for extracting a single series data from the
* general data array. It must return the series in the unified data format. It may or may not
* add extras for later usage.
*/
extractSeries(rawData: any, seriesIndex: any, options: Options): any;
/**
* The rolling average method is called if the rollPeriod is larger than
* 1. It is supplied with the series data generated by extractSeries and the rollPeriod. It
* must return an array that is again compliant with the unified data format. Extras may be
* used if needed.
*/
rollingAverage(unifiedData: any, rollPeriod: number, options: Options, seriesIndex: number): any;
/**
* This method computes the extremes of the supplied rolledData. It may be pruned compared to
* the data returned by the DataHandler.rollingAverage method, but generally contains the data
* returned from it. The given dateWindow must be considered for the computation of the
* extreme values. Extras may be used if needed.
*/
getExtremeYValues(unifiedData: any, dateWindow: any, step: boolean): any;
/**
* Callback called for each series after the series points have been generated
* which will later be used by the plotters to draw the graph.
* Here data may be added to the seriesPoints which is needed by the plotters.
* The indexes of series and points are in sync meaning the original data
* sample for series[i] is points[i].
*/
onPointsCreated_(series: any, points: Point[]): any;
/**
* Because of performance reasons, the onPointCreated callback was replaced by this method.
* The only difference is that this method is only called once per series, and not for every
* point of the series. This saves us several method calls as well as several option reads
* that are done in the onPointCreated.
*/
onLineEvaluated(seriesPoints: Point[], axis: object, logscale: boolean): any;
}
interface PerSeriesOptions {
/**
* Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be
* set per-series.
* @default none
*/
axis?: "y1" | "y2" | "" | undefined;
/**
* A per-series color definition. Used in conjunction with, and overrides, the colors option.
* @default (see description)
*/
color?: string | null | undefined;
/**
* A function (or array of functions) which plot each data series on the chart.
* TODO(danvk): more details! May be set per-series.
* @default [Dygraph.Plotters.fillPlotter, Dygraph.Plotters.errorPlotter, Dygraph.Plotters.linePlotter]
*/
plotter?: any;
/**
* Draw a small dot at each point, in addition to a line going through the point. This makes
* the individual data points easier to see, but can increase visual clutter in the chart.
* The small dot can be replaced with a custom rendering by supplying a drawPointCallback.
* @default false
*/
drawPoints?: boolean | null | undefined;
/**
* Error bars (or custom bars) for each series are drawn in the same color as the series, but
* with partial transparency. This sets the transparency. A value of 0.0 means that the error
* bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark
* as the line for the series itself. This can be used to produce chart lines whose thickness
* varies at each point.
* @default 0.15
*/
fillAlpha?: number | null | undefined;
/**
* Should the area underneath the graph be filled? This option is not compatible with error
* bars. This may be set on a per-series basis.
* @default false
*/
fillGraph?: boolean | null | undefined;
gapThreshold?: ((prevPoint: Point, curPoint: Point) => boolean) | number;
/**
* The size in pixels of the dot drawn over highlighted points.
* @default 3
*/
highlightCircleSize?: number | null | undefined;
/**
* The size of the dot to draw on each point in pixels (see drawPoints). A dot is always
* drawn when a point is "isolated", i.e. there is a missing point on either side of it. This
* also controls the size of those dots.
* @default 1
*/
pointSize?: number | null | undefined;
/**
* Mark this series for inclusion in the range selector. The mini plot curve will be an
* average of all such series. If this is not specified for any series, the default behavior
* is to average all the visible series. Setting it for one series will result in that series being
* charted alone in the range selector. Once it's set for a single series, it needs to
* be set for all series which should be included (regardless of visibility).
* @default null
*/
showInRangeSelector?: boolean | null | undefined;
/**
* When set, display the graph as a step plot instead of a line plot. This option may either
* be set for the whole graph or for single series.
* @default false
*/
stepPlot?: boolean | null | undefined;
/**
* Draw a border around graph lines to make crossing lines more easily distinguishable.
* Useful for graphs with many lines.
* @default null
*/
strokeBorderWidth?: number | null | undefined;
/**
* Color for the line border used if strokeBorderWidth is set.
* @default white
*/
strokeBorderColor?: string | null | undefined;
/**
* A custom pattern array where the even index is a draw and odd is a space in pixels. If
* null then it draws a solid line. The array should have a even length as any odd lengthed
* array could be expressed as a smaller even length array. This is used to create dashed
* lines.
* @default null
*/
strokePattern?: number[] | null | undefined;
/**
* The width of the lines connecting data points. This can be used to increase the contrast
* or some graphs.
* @default 1.0
*/
strokeWidth?: number | null | undefined;
}
interface PerAxisOptions {
/**
* Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
* @default 14
*/
axisLabelFontSize?: number | null | undefined;
/**
* Function to call to format the tick values that appear along an axis. This is usually set
* on a per-axis basis.
* @default Depends on the data type
*/
axisLabelFormatter?:
| ((
v: number | Date,
granularity: number,
opts: (name: string) => any,
dygraph: Readonly<Dygraph>,
) => string)
| null
| undefined;
/**
* Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this
* also controls the width of the y-axis. Note that for the x-axis, this is independent from
* pixelsPerLabel, which controls the spacing between labels.
* @default 50 (y-axis), 60 (x-axis)
*/
axisLabelWidth?: number | null | undefined;
/**
* Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle
* attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'.
* @default black
*/
axisLineColor?: string | null | undefined;
/**
* Thickness (in pixels) of the x- and y-axis lines.
* @default 0.3
*/
axisLineWidth?: number | null | undefined;
/**
* The size of the line to display next to each tick mark on x- or y-axes.
* @default 3.0
*/
axisTickSize?: number | null | undefined;
/**
* Whether to draw the specified axis. This may be set on a per-axis basis to define the
* visibility of each axis separately. Setting this to false also prevents axis ticks from
* being drawn and reclaims the space for the chart grid/lines.
* @default true for x and y, false for y2
*/
drawAxis?: boolean | null | undefined;
/**
* The color of the gridlines. This may be set on a per-axis basis to define each axis' grid
* separately.
* @default rgb(128,128,128)
*/
gridLineColor?: string | null | undefined;
/**
* A custom pattern array where the even index is a draw and odd is a space in pixels. If
* null then it draws a solid line. The array should have a even length as any odd lengthed
* array could be expressed as a smaller even length array. This is used to create dashed
* gridlines.
* @default null
*/
gridLinePattern?: number[] | null | undefined;
/**
* Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal
* gridlines can be turned off entirely by using the drawGrid option. This
* may be set on a per-axis basis to define each axis' grid separately.
* @default 0.3
*/
gridLineWidth?: number | null | undefined;
/**
* Only valid for y and y2, has no effect on x: This option defines whether the y axes should
* align their ticks or if they should be independent. Possible combinations: 1.) y=true,
* y2=false (default): y is the primary axis and the y2 ticks are aligned to the the ones of
* y. (only 1 grid) 2.) y=false, y2=true: y2 is the primary axis and the y ticks are aligned
* to the the ones of y2. (only 1 grid) 3.) y=true, y2=true: Both axis are independent and
* have their own ticks. (2 grids) 4.) y=false, y2=false: Invalid configuration causes an
* error.
* @default true for y, false for y2
*/
independentTicks?: boolean | null | undefined;
/**
* When set for the y-axis or x-axis, the graph shows that axis in log scale. Any values less
* than or equal to zero are not displayed. Showing log scale with ranges that go below zero
* will result in an unviewable graph.
*
* Not compatible with showZero. connectSeparatedPoints is ignored. This is ignored for
* date-based x-axes.
* @default false
*/
logscale?: boolean | null | undefined;
/**
* When displaying numbers in normal (not scientific) mode, large numbers will be displayed
* with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis
* labels. If there are more than maxNumberWidth digits to the left of the
* decimal in a number, dygraphs will switch to scientific notation, even when not operating
* in scientific mode. If you'd like to see all those digits, set this to something large,
* like 20 or 30.
* @default 6
*/
maxNumberWidth?: number | null | undefined;
/**
* Number of pixels to require between each x- and y-label. Larger values will yield a
* sparser axis with fewer ticks. This is set on a per-axis basis.
* @default 70 (x-axis) or 30 (y-axes)
*/
pixelsPerLabel?: number | null | undefined;
/**
* By default, dygraphs displays numbers with a fixed number of digits after the decimal
* point. If you'd prefer to have a fixed number of significant figures, set this option to
* that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0
* and 1234 to be displayed as 1.23e+3.
* @default null
*/
sigFigs?: number | null | undefined;
/**
* This lets you specify an arbitrary function to generate tick marks on an axis. The tick
* marks are an array of (value, label) pairs. The built-in functions go to great lengths to
* choose good tick marks so, if you set this option, you'll most likely want to call one of
* them and modify the result. See dygraph-tickers.js for an extensive discussion. This is
* set on a per-axis basis.
* @default dygraphs.dateTicker or dygraphs.numericTicks
*/
ticker?: Ticker | null | undefined;
/**
* Function to provide a custom display format for the values displayed on mouseover. This
* does not affect the values that appear on tick marks next to the axes. To format those,
* see axisLabelFormatter. This is usually set on a per-axis basis.
* @default Depends on the type of your data.
*/
valueFormatter?:
| ((
v: number,
opts: (name: string) => any,
seriesName: string,
dygraph: Readonly<Dygraph>,
row: number,
col: number,
) => string)
| null
| undefined;
/**
* Explicitly set the vertical range of the graph to [low, high]. This may be set on a
* per-axis basis to define each y-axis separately. If either limit is unspecified, it will
* be calculated automatically (e.g. [null, 30] to automatically calculate just the lower
* bound)
* @default Full range of the input is shown
*/
valueRange?: [number | null, number | null] | null | undefined;
/**
* Whether to display gridlines in the chart. This may be set on a per-axis basis to define
* the visibility of each axis' grid separately.
* @default true for x and y, false for y2
*/
drawGrid?: boolean | null | undefined;
/**
* Show K/M/B for thousands/millions/billions on y-axis.
* @default false
*/
labelsKMB?: boolean | null | undefined;
/**
* Show k/M/G for kilo/Mega/Giga on y-axis. This is different than labelsKMB in
* that it uses base 2, not 10.
* @default false
*/
labelsKMG2?: boolean | null | undefined;
}
interface SeriesLegendData {
/**
* Assigned or generated series color
*/
color: string;
/**
* Series line dash
*/
dashHTML: string;
/**
* Whether currently focused or not
*/
isHighlighted: boolean;
/**
* Whether the series line is inside the selected/zoomed region
*/
isVisible: boolean;
/**
* Assigned label to this series
*/
label: string;
/**
* Generated label html for this series
*/
labelHTML: string;
/**
* y value of this series
*/
y: number;
/**
* Generated html for y value
*/
yHTML: string;
}
interface LegendData {
/**
* x value of highlighted points
*/
x: number;
/**
* Generated HTML for x value
*/
xHTML: string;
/**
* Series data for the highlighted points
*/
series: SeriesLegendData[];
/**
* Dygraph object for this graph
*/
dygraph: Dygraph;
}
interface StandaloneOptions {
/**
* Set this option to animate the transition between zoom windows. Applies to programmatic
* and interactive zooms. Note that if you also set a drawCallback, it will be called several
* times on each zoom. If you set a zoomCallback, it will only be called after the animation
* is complete.
* @default false
*/
animatedZooms?: boolean | null | undefined;
/**
* If provided, this function is called whenever the user clicks on an annotation.
* @default null
*/
annotationClickHandler?: AnnotationClickHandler | null | undefined;
/**
* If provided, this function is called whenever the user double-clicks on an annotation.
* @default null
*/
annotationDblClickHandler?: AnnotationDblClickHandler | null | undefined;
/**
* If provided, this function is called whenever the user mouses out of an annotation.
* @default null
*/
annotationMouseOutHandler?: AnnotationMouseOutHandler | null | undefined;
/**
* If provided, this function is called whenever the user mouses over an annotation.
* @default null
*/
annotationMouseOverHandler?: AnnotationMouseOverHandler | null | undefined;
/**
* Defines per-axis options. Valid keys are 'x', 'y' and 'y2'. Only some options may be set
* on a per-axis basis. If an option may be set in this way, it will be noted on this page.
* See also documentation on per-series and per-axis options.
* @default null
*/
axes?: Partial<Record<Axis, PerAxisOptions>> | null | undefined;
/**
* A function to call when the canvas is clicked.
* @default null
*/
clickCallback?: ((event: MouseEvent, xval: number, points: readonly Point[]) => void) | null | undefined;
/**
* If colors is not specified, saturation of the automatically-generated
* data series colors. (0.0-1.0)
* @default 1.0
*/
colorSaturation?: number | null | undefined;
/**
* If colors is not specified, value of the data series colors, as in hue/saturation/value.
* (0.0-1.0, default 0.5)
* @default 1.0
*/
colorValue?: number | null | undefined;
/**
* List of colors for the data series. These can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a
* color wheel are used. Overridden by the 'color' option.
* @default (see description)
*/
colors?: string[] | null | undefined;
/**
* Usually, when Dygraphs encounters a missing value in a data series, it interprets this as
* a gap and draws it as such. If, instead, the missing values represents an x-value for
* which only a different series has data, then you'll want to connect the dots by setting
* this to true. To explicitly include a gap with this option set, use a value of NaN.
* @default false
*/
connectSeparatedPoints?: boolean | null | undefined;
/**
* When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each
* point between low and high, with the series itself going through middle.
* @default false
*/
customBars?: boolean | null | undefined;
/**
* Custom DataHandler. This is an advanced customization.
* @see http://bit.ly/151E7Aq.
* @default (depends on data)
*/
dataHandler?: DataHandler | null | undefined;
/**
* Initially zoom in on a section of the graph. Is of the form [earliest, latest], where
* earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the
* values in dateWindow must also be numbers.
* @default Full range of the input is shown
*/
dateWindow?: [number, number] | null | undefined;
/**
* The delimiter to look for when separating fields of a CSV file. Setting this to a tab is
* not usually necessary, since tab-delimited data is auto-detected.
* @default ,
*/
delimiter?: string | null | undefined;
/**
* Unless it's run in scientific mode (see the sigFigs option), dygraphs
* displays numbers with digitsAfterDecimal digits after the decimal point.
* Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12',
* '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value
* less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be
* displayed in scientific notation.
* @default 2
*/
digitsAfterDecimal?: number | null | undefined;
/**
* Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data
* series to be interpreted as annotations on points in that series. This is the same format
* used by Google's AnnotatedTimeLine chart.
* @default false
*/
displayAnnotations?: boolean | null | undefined;
/**
* When set, draw the X axis at the Y=0 position and the Y axis at the X=0 position if those
* positions are inside the graph's visible area. Otherwise, draw the axes at the bottom or
* left graph edge as usual.
* @default false
*/
drawAxesAtZero?: boolean | null | undefined;
/**
* When set, this callback gets called every time the dygraph is drawn. This includes the
* initial draw, after zooming and repeatedly while panning.
* @default null
*/
drawCallback?: ((dygraph: Readonly<Dygraph>, is_initial: boolean) => void) | null | undefined;
/**
* Draw points at the edges of gaps in the data. This improves visibility of small data
* segments or other data irregularities.
* @default false
*/
drawGapEdgePoints?: boolean | null | undefined;
/**
* Draw a custom item when a point is highlighted. Default is a small dot matching the
* series color. This method should constrain drawing to within pointSize pixels from (cx,
* cy) Also see drawPointCallback
* @default null
*/
drawHighlightPointCallback?:
| ((
this: Readonly<Dygraph>,
dygraph: Readonly<Dygraph>,
seriesName: string,
canvasContext: CanvasRenderingContext2D,
cx: number,
cy: number,
color: string,
pointSize: number,
) => void)
| null
| undefined;
/**
* Draw a custom item when drawPoints is enabled. Default is a small dot matching the series
* color. This method should constrain drawing to within pointSize pixels from (cx, cy).
* Also see drawHighlightPointCallback
* @default null
*/
drawPointCallback?:
| ((
this: Readonly<Dygraph>,
dygraph: Readonly<Dygraph>,
seriesName: string,
canvasContext: CanvasRenderingContext2D,
cx: number,
cy: number,
color: string,
pointSize: number,
) => void)
| null
| undefined;
/**
* Does the data contain standard deviations? Setting this to true alters the input format.
* @default false
*/
errorBars?: boolean | null | undefined;
/**
* Sets the data being displayed in the chart. This can only be set when calling
* updateOptions; it cannot be set from the constructor. For a full description of valid data
* formats, see the Data Formats page.
* @default (set when constructed)
*/
file?: Data | null | undefined;
/**
* When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers.
* The ratio will be plotted. This allows computation of Wilson confidence intervals (see
* below).
* @default false
*/
fractions?: boolean | null | undefined;
/**
* Height, in pixels, of the chart. If the container div has been explicitly sized, this will
* be ignored.
* @default 320
*/
height?: number | null | undefined;
/**
* Whether to hide the legend when the mouse leaves the chart area.
* @default true
*/
hideOverlayOnMouseOut?: boolean | null | undefined;
/**
* When set, this callback gets called every time a new point is highlighted.
* @default null
*/
highlightCallback?:
| ((event: MouseEvent, xval: number, points: readonly Point[], row: number, seriesName: string) => void)
| null
| undefined;
/**
* Fade the background while highlighting series. 1=fully visible background (disable
* fading), 0=hiddden background (show highlighted series only).
* @default 0.5
*/
highlightSeriesBackgroundAlpha?: number | null | undefined;
/**
* Sets the background color used to fade out the series in conjunction with 'highlightSeriesBackgroundAlpha'.
* @default rgb(255, 255, 255)
*/
highlightSeriesBackgroundColor?: string | null | undefined;
/**
* When set, the options from this object are applied to the timeseries closest to the mouse
* pointer for interactive highlighting. See also 'highlightCallback'. Example:
* highlightSeriesOpts: { strokeWidth: 3 }.
* @default null
*/
highlightSeriesOpts?: PerSeriesOptions | null | undefined;
/**
* Usually, dygraphs will use the range of the data plus some padding to set the range of the
* y-axis. If this option is set, the y-axis will always include zero, typically as the
* lowest value. This can be used to avoid exaggerating the variance in the data
* @default false
*/
includeZero?: boolean | null | undefined;
/**
* TODO(@konigsberg): document this
* @default ...
*/
interactionModel?: object | null | undefined;
/**
* A name for each data series, including the independent (X) series. For CSV files and
* DataTable objections, this is determined by context. For raw data, this must be specified.
* If it is not, default values are supplied and a warning is logged.
* @default ["X", "Y1", "Y2", ...]*
*/
labels?: string[] | null | undefined;
/**
* Show data labels in an external div, rather than on the graph. This value can either be a
* div element or a div id.
* @default null
*/
labelsDiv?: HTMLElement | string | null | undefined;
/**
* Put <br/> between lines in the label string. Often used in conjunction
* with labelsDiv.
* @default false
*/
labelsSeparateLines?: boolean | null | undefined;
/**
* Show zero value labels in the labelsDiv.
* @default true
*/
labelsShowZeroValues?: boolean | null | undefined;
/**
* Show date/time labels according to UTC (instead of local time).
* @default false
*/
labelsUTC?: boolean | null | undefined;
/**
* When to display the legend. By default, it only appears when a user mouses over the chart.
* Set it to "always" to always display a legend of some sort. When set to "follow", legend
* follows highlighted points. If set to 'never' then it will not appear at all.
* @default onmouseover
*/
legend?: "always" | "follow" | "onmouseover" | "never" | null | undefined;
/**
* Set this to supply a custom formatter for the legend. See this comment and the
* legendFormatter demo for usage.
* @default null
*/
legendFormatter?: ((data: LegendData) => string) | null | undefined;
/**
* A value representing the farthest a graph may be panned, in percent of the display. For
* example, a value of 0.1 means that the graph can only be panned 10% passed the edges of the
* displayed values. null means no bounds.
* @default null
*/
panEdgeFraction?: number | null | undefined;
/**
* Defines per-graph plugins. Useful for per-graph customization
* @default []
*/
plugins?: any[] | null | undefined;
/**
* A function to call when a data point is clicked. and the point that was clicked.
* @default null
*/
pointClickCallback?: ((event: MouseEvent, point: Readonly<Point>) => void) | null | undefined;
/**
* Height, in pixels, of the range selector widget. This option can only be specified at
* Dygraph creation time.
* @default 40
*/
rangeSelectorHeight?: number | null | undefined;
/**
* The range selector mini plot fill color. This can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off fill.
* @default #A7B1C4
*/
rangeSelectorPlotFillColor?: string | null | undefined;
/**
* The range selector mini plot stroke color. This can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off stroke.
* @default #808FAB
*/
rangeSelectorPlotStrokeColor?: string | null | undefined;
/**
* Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to
* highlight the right-most data point.
* @default 5
*/
rightGap?: number | null | undefined;
/**
* Number of days over which to average data. Discussed extensively above.
* @default 1
*/
rollPeriod?: number | null | undefined;
/**
* Defines per-series options. Its keys match the y-axis label names, and the values are
* dictionaries themselves that contain options specific to that series.
* @default null
*/
series?: Record<string, PerSeriesOptions> | null | undefined;
/**
* Whether to show the legend upon mouseover.
* @default true
*/
showLabelsOnHighlight?: boolean | null | undefined;
/**
* Show or hide the range selector widget.
* @default false
*/
showRangeSelector?: boolean | null | undefined;
/**
* If the rolling average period text box should be shown.
* @default false
*/
showRoller?: boolean | null | undefined;
/**
* When errorBars is set, shade this many standard deviations above/below each point.
* @default 2.0
*/
sigma?: number | null | undefined;
/**
* If set, stack series on top of one another rather than drawing them independently. The
* first series specified in the input data will wind up on top of the chart and the last
* will be on bottom. NaN values are drawn as white areas without a line on top, see
* stackedGraphNaNFill for details.
* @default false
*/
stackedGraph?: boolean | null | undefined;
/**
* Controls handling of NaN values inside a stacked graph. NaN values are
* interpolated/extended for stacking purposes, but the actual point value remains NaN in the
* legend display. Valid option values are "all" (interpolate internally, repeat leftmost and
* rightmost value as needed), "inside" (interpolate internally only, use zero outside
* leftmost and rightmost value), and "none" (treat NaN as zero everywhere).
* @default all
*/
stackedGraphNaNFill?: "all" | "inside" | "none" | null | undefined;
/**
* Text to display above the chart. You can supply any HTML for this value, not just text. If
* you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes.
* @default null
*/
title?: string | null | undefined;
/**
* Height of the chart title, in pixels. This also controls the default font size of the
* title. If you style the title on your own, this controls how much space is set aside above
* the chart for the title's div.
* @default 18
*/
titleHeight?: number | null | undefined;
/**
* When set, this callback gets called before the chart is drawn. It details on how to use
* this.
* @default null
*/
underlayCallback?:
| ((context: CanvasRenderingContext2D, area: Readonly<Area>, dygraph: Readonly<Dygraph>) => void)
| null
| undefined;
/**
* When set, this callback gets called every time the user stops highlighting any point by
* mousing out of the graph.
* @default null
*/
unhighlightCallback?: ((event: MouseEvent) => void) | null | undefined;
/**
* Which series should initially be visible? Once the Dygraph has been constructed, you can
* access and modify the visibility of each series using the visibility and setVisibility
* methods.
* @default [true, true, ...]
*/
visibility?: boolean[] | null | undefined;
/**
* Width, in pixels, of the chart. If the container div has been explicitly sized, this will
* be ignored.
* @default 480
*/
width?: number | null | undefined;
/**
* Use in conjunction with the "fractions" option. Instead of plotting +/- N standard
* deviations, dygraphs will compute a Wilson confidence interval and plot that. This has
* more reasonable behavior for ratios close to 0 or 1.
* @default true
*/
wilsonInterval?: boolean | null | undefined;
/**
* Height, in pixels, of the x-axis. If not set explicitly, this is computed based on
* axisLabelFontSize and axisTickSize.
* @default null
*/
xAxisHeight?: number | null | undefined;
/**
* Height of the x-axis label, in pixels. This also controls the default font size of the
* x-axis label. If you style the label on your own, this controls how much space is set
* aside below the chart for the x-axis label's div.
* @default 18
*/
xLabelHeight?: number | null | undefined;
/**
* Add the specified amount of extra space (in pixels) around the X-axis value range to
* ensure points at the edges remain visible.
* @default 0
*/
xRangePad?: number | null | undefined;
/**
* A function which parses x-values (i.e. the dependent series). Must return a number, even
* when the values are dates. In this case, millis since epoch are used. This is used
* primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which
* it will parse. See code for details.
* @default parseFloat() or Date.parse()*
*/
xValueParser?: ((str: string) => number) | null | undefined;
/**
* Text to display below the chart's x-axis. You can supply any HTML for this value, not just
* text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel'
* classes.
* @default null
*/
xlabel?: string | null | undefined;
/**
* Text to display to the right of the chart's secondary y-axis. This label is only displayed
* if a secondary y-axis is present. See this test for an example of how to do this. The
* comments for the 'ylabel' option generally apply here as well. This label gets a
* 'dygraph-y2label' instead of a 'dygraph-ylabel' class.
* @default null
*/
y2label?: string | null | undefined;
/**
* Width of the div which contains the y-axis label. Since the y-axis label appears rotated
* 90 degrees, this actually affects the height of its div.
* @default 18
*/
yLabelWidth?: number | null | undefined;
/**
* If set, add the specified amount of extra space (in pixels) around the Y-axis value range
* to ensure points at the edges remain visible. If unset, use the traditional Y padding
* algorithm.
* @default null
*/
yRangePad?: number | null | undefined;
/**
* Text to display to the left of the chart's y-axis. You can supply any HTML for this value,
* not just text. If you wish to style it using CSS, use the 'dygraph-label' or
* 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may
* behave in unintuitive ways. No additional space is set aside for a y-axis label. If you
* need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth
* option. If you need a wider div for the y-axis label, either style it that way with CSS
* (but remember that it's rotated, so width is controlled by the 'height' property) or set
* the yLabelWidth option.
* @default null
*/
ylabel?: string | null | undefined;
/**
* A function to call when the zoom window is changed (either by zooming in or out). When
* animatedZooms is set, zoomCallback is called once at the end of the transition (it will not
* be called for intermediate frames).
* @default null
*/
zoomCallback?:
| ((minDate: number, maxDate: number, yRanges: ReadonlyArray<[number, number]>) => void)
| null
| undefined;
/**
* Set this option to log timing information. The value of the option will be logged along
* with the timimg, so that you can distinguish multiple dygraphs on the same page.
* @deprecated
* @default null
*/
timingName?: string | null | undefined;
/**
* Overrides the pixel ratio scaling factor for the canvas's 2d context. Ordinarily, this is
* set to the devicePixelRatio / (context.backingStoreRatio || 1), so on mobile devices, where
* the devicePixelRatio can be somewhere around 3, performance can be improved by overriding
* this value to something less precise, like 1, at the expense of resolution.
* @default (devicePixelRatio / context.backingStoreRatio)
*/
pixelRatio?: number | null | undefined;
/**
* The transparency of the veil that is drawn over the unselected portions of the range
* selector mini plot. A value of 0 represents full transparency and the unselected portions
* of the mini plot will appear as normal. A value of 1 represents full opacity and the
* unselected portions of the mini plot will be hidden.
* @default 0.6
*/
rangeSelectorAlpha?: number | null | undefined;
/**
* The width of the lines below and on both sides of the range selector mini plot.
* @default 1
*/
rangeSelectorBackgroundLineWidth?: number | null | undefined;
/**
* The color of the lines below and on both sides of the range selector mini plot. This can be
* of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
* @default gray
*/
rangeSelectorBackgroundStrokeColor?: string | null | undefined;
/**
* The width the lines in the interactive layer of the range selector.
* @default 1
*/
rangeSelectorForegroundLineWidth?: number | null | undefined;
/**
* The color of the lines in the interactive layer of the range selector. This can be of the
* form "#AABBCC" or "rgb(255,100,200)" or "yellow".
* @default black
*/
rangeSelectorForegroundStrokeColor?: string | null | undefined;
/**
* The top color for the range selector mini plot fill color gradient. This can be of the form
* "#AABBCC" or "rgb(255,100,200)" or "rgba(255,100,200,42)" or "yellow". You can also specify
* null or "" to disable the gradient and fill with one single color.
* @default white
*/
rangeSelectorPlotFillGradientColor?: string | null | undefined;
/**
* The width of the range selector mini plot line.
* @default 1.5
*/
rangeSelectorPlotLineWidth?: number | null | undefined;
}
type Options = StandaloneOptions & PerSeriesOptions & PerAxisOptions
interface SeriesProperties {
name: string;
column: number;
visible: boolean;
color: string;
axis: number;
}
interface Area {
x: number;
y: number;
w: number;
h: number;
}
/**
* Point structure.
*
* xval_* and yval_* are the original unscaled data values,
* while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
* yval_stacked is the cumulative Y value used for stacking graphs,
* and bottom/top/minus/plus are used for error bar graphs.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#.PointType}
*/
interface Point {
annotation?: Annotation | undefined;
idx: number;
name: string;
x?: number | undefined;
xval?: number | undefined;
y_bottom?: number | undefined;
y_stacked?: number | undefined;
y_top?: number | undefined;
y?: number | undefined;
yval_minus?: number | undefined;
yval_plus?: number | undefined;
yval_stacked?: number | undefined;
yval?: number | undefined;
canvasx?: number | undefined;
canvasy?: number | undefined;
}
interface Annotation {
/** The name of the series to which the annotated point belongs. */
series: string;
/**
* The x value of the point. This should be the same as the value
* you specified in your CSV file, e.g. "2010-09-13".
* You must set either x or xval.
*/
x?: number | string | undefined;
/** Text that will appear on the annotation's flag. */
shortText?: string | undefined;
/** A longer description of the annotation which will appear when the user hovers over it. */
text?: string | undefined;
/**
* Specify in place of shortText to mark the annotation with an image rather than text.
* If you specify this, you must specify width and height.
*/
icon?: string | undefined;
/** Width (in pixels) of the annotation flag or icon. */
width?: number | undefined;
/** Height (in pixels) of the annotation flag or icon. */
height?: number | undefined;
/** CSS class to use for styling the annotation. */
cssClass?: string | undefined;
/** Height of the tick mark (in pixels) connecting the point to its flag or icon. */
tickHeight?: number | undefined;
/** Width of the tick mark connecting the point to its flag or icon. */
tickWidth?: number | undefined;
/** Color of the tick mark connecting the point to its flag or icon. */
tickColor?: string | undefined;
/** If true, attach annotations to the x-axis, rather than to actual points. */
attachAtBottom?: boolean | undefined;
/** This function is called whenever the user clicks on this annotation. */
clickHandler?: AnnotationClickHandler | undefined;
/** This function is called whenever the user mouses over this annotation. */
mouseOverHandler?: AnnotationMouseOverHandler | undefined;
/** This function is called whenever the user mouses out of this annotation. */
mouseOutHandler?: AnnotationMouseOutHandler | undefined;
/** this function is called whenever the user double-clicks on this annotation. */
dblClickHandler?: AnnotationDblClickHandler | undefined;
div?: HTMLDivElement | undefined;
}
type Axis = "x" | "y" | "y2";
interface DygraphEvent {
readonly dygraph: Dygraph
cancelable: boolean
readonly defaultPrevented: boolean
preventDefault(): void
readonly propagationStopped: boolean
stopPropagation(): void
}
type DestroyHandler = (e: DygraphEvent) => void
type DataWillUpdateHandler = (e: DygraphEvent) => void;
type PredrawHandler = (e: DygraphEvent) => void;
interface PluginHandlers {
dataWillUpdate?: DataWillUpdateHandler;
layout?: (e: any) => void;
predraw?: PredrawHandler;
didDrawChart?: (e: any) => void;
}
interface DygraphsPlugin {
activate(dygraphs: Dygraph): PluginHandlers;
}
interface DygraphsFunctionPlugin<T extends DygraphsPlugin = DygraphsPlugin> {
new(): T
prototype: T;
}
interface RangeSelectorPluginPrototype extends DygraphsPlugin {
dygraph_: Dygraph
fgcanvas_: HTMLCanvasElement
activate(dygraphs: Dygraph): PluginHandlers;
computeCombinedSeriesAndLimits_(): { data: any, yMin: number, yMax: number }
}
type RangeSelectorPlugin = DygraphsFunctionPlugin<RangeSelectorPluginPrototype>
interface DygraphsFunctionDataHandler<T extends DataHandler = DataHandler> {
new(): T
prototype: T;
}
type AxisOptionView = <T extends keyof PerAxisOptions>(name: T) => PerAxisOptions[T]
type PluginInstanceType<T> = T extends DygraphsPlugin ? T : T extends DygraphsFunctionPlugin ? InstanceType<T> : never
type DygraphsPluginType = DygraphsPlugin | DygraphsFunctionPlugin
interface DygraphsPluginDict<T extends DygraphsPluginType = DygraphsPluginType> {
plugin: PluginInstanceType<T>
events: unknown
options: unknown
pluginOptions: unknown
}
}
export default class Dygraph {
/**
* Creates an interactive, zoomable chart.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#constructor}
*/
constructor(
container: HTMLElement | string,
data: dygraphs.Data | (() => dygraphs.Data),
options?: dygraphs.Options | null,
);
public rawData_: any[];
public dateWindow_: [number, number];
public layout_: dygraphs.Layout
public dataHandler_: dygraphs.DataHandler
public maindiv_: HTMLElement
public file_: dygraphs.Data
public plugins_: dygraphs.DygraphsPluginDict[]
static Plugins: {
Legend: dygraphs.DygraphsFunctionPlugin,
Axes: dygraphs.DygraphsFunctionPlugin,
Annotations: dygraphs.DygraphsFunctionPlugin,
ChartLabels: dygraphs.DygraphsFunctionPlugin,
Grid: dygraphs.DygraphsFunctionPlugin,
RangeSelector: dygraphs.RangeSelectorPlugin,
}
static PLUGINS: dygraphs.DygraphsFunctionPlugin[];
static DataHandlers: {
DefaultHandler: dygraphs.DygraphsFunctionDataHandler,
BarsHandler: dygraphs.DygraphsFunctionDataHandler,
CustomBarsHandler: dygraphs.DygraphsFunctionDataHandler,
DefaultFractionHandler: dygraphs.DygraphsFunctionDataHandler,
ErrorBarsHandler: dygraphs.DygraphsFunctionDataHandler,
FractionsBarsHandle: dygraphs.DygraphsFunctionDataHandler,
}
parseArray_(data: any[]): any[]
/**
* Returns the zoomed status of the chart for one or both axes.
*
* Axis is an optional parameter. Can be set to 'x' or 'y'.
* The zoomed status for an axis is set whenever a user zooms using the mouse
* or when the dateWindow or valueRange are updated. Double-clicking or calling resetZoom()
* resets the zoom status for the chart.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#isZoomed}
*/
isZoomed(axis?: "x" | "y"): boolean;
/**
* Returns