"default": "null",
"labels": ["Legend"],
"type": "{}",
- "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
+ "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'fontWeight': 'bold' } will make the labels bold. In general, it is better to use CSS to style the .dygraph-legend class than to use this property."
},
"drawPoints": {
"default": "false",
"labels": ["Data Line display"],
"type": "boolean",
- "description": "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."
+ "description": "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 <a href='#drawPointCallback'>drawPointCallback</a>."
+ },
+ "drawGapPoints": {
+ "default": "false",
+ "labels": ["Data Line display"],
+ "type": "boolean",
+ "description": "Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities."
+ },
+ "drawPointCallback": {
+ "default": "null",
+ "labels": ["Data Line display"],
+ "type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
+ "parameters": [
+ [ "g" , "the reference graph" ],
+ [ "seriesName" , "the name of the series" ],
+ [ "canvasContext" , "the canvas to draw on" ],
+ [ "cx" , "center x coordinate" ],
+ [ "cy" , "center y coordinate" ],
+ [ "color" , "series color" ],
+ [ "pointSize" , "the radius of the image." ]
+ ],
+ "description": "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 <a href='#drawHighlightPointCallback'>drawHighlightPointCallback</a>"
},
"height": {
"default": "320",
"highlightCallback": {
"default": "null",
"labels": ["Callbacks"],
- "type": "function(event, x, points, row)",
+ "type": "function(event, x, points, row, seriesName)",
"description": "When set, this callback gets called every time a new point is highlighted.",
"parameters": [
["event", "the JavaScript mousemove event"],
["x", "the x-coordinate of the highlighted points"],
["points", "an array of highlighted points: <code>[ {name: 'series', yval: y-value}, … ]</code>"],
- ["row", "???"]
+ ["row", "integer index of the highlighted row in the data table, starting from 0"],
+ ["seriesName", "name of the highlighted series, only present if highlightSeriesOpts is set."]
]
},
+ "drawHighlightPointCallback": {
+ "default": "null",
+ "labels": ["Data Line display"],
+ "type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
+ "parameters": [
+ [ "g" , "the reference graph" ],
+ [ "seriesName" , "the name of the series" ],
+ [ "canvasContext" , "the canvas to draw on" ],
+ [ "cx" , "center x coordinate" ],
+ [ "cy" , "center y coordinate" ],
+ [ "color" , "series color" ],
+ [ "pointSize" , "the radius of the image." ]
+ ],
+ "description": "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 <a href='#drawPointCallback'>drawPointCallback</a>"
+ },
+ "highlightSeriesOpts": {
+ "default": "null",
+ "labels": ["Interactive Elements"],
+ "type": "Object",
+ "description": "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 }."
+ },
+ "highlightSeriesBackgroundAlpha": {
+ "default": "0.5",
+ "labels": ["Interactive Elements"],
+ "type": "float",
+ "description": "Fade the background while highlighting series. 1=fully visible background (disable fading), 0=hiddden background (show highlighted series only)."
+ },
"includeZero": {
"default": "false",
"labels": ["Axis display"],
"strokeWidth": {
"default": "1.0",
"labels": ["Data Line display"],
- "type": "integer",
+ "type": "float",
"example": "0.5, 2.0",
"description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
},
"labels": ["Data Line display"],
"type": "array<integer>",
"example": "[10, 2, 5, 2]",
- "description": "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."
+ "description": "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."
+ },
+ "strokeBorderWidth": {
+ "default": "null",
+ "labels": ["Data Line display"],
+ "type": "float",
+ "example": "1.0",
+ "description": "Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines."
+ },
+ "strokeBorderColor": {
+ "default": "white",
+ "labels": ["Data Line display"],
+ "type": "string",
+ "example": "red, #ccffdd",
+ "description": "Color for the line border used if strokeBorderWidth is set."
},
"wilsonInterval": {
"default": "true",