1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
This is intended to be a catch-all for legend formatting needs. This
[comes](https://stackoverflow.com/a/25090552/2171120)
[up](https://stackoverflow.com/a/24175648/2171120)
[often](https://stackoverflow.com/a/18211338/2171120) in Stack Overflow
[questions](https://stackoverflow.com/a/23354308/2171120) which can’t be
easily answered with `valueFormatter`. Nowadays I wave my hands and say
"write your own legend, either as a plugin or using `highlightCallback`
and `unhighlightCallback`." This is a simpler option.
The `legendFormatter` is repeatedly called with a `data` object
describing the selection or lack of selection. It contains all the
information you need to generate a standard legend (e.g. formatted
values), but there’s nothing preventing you from doing something crazier
on your own.
For example, here’s what a simple `legendFormatter` might look like:
```js
function legendFormatter(data) {
if (data.x == null) return ''; // no selection
return data.xHTML + data.series.map(v => v.labelHTML + ': ' + v.yHTML).join(' ');
}
```
Here’s what the `data` object looks like when nothing is selected:
```json
{
"dygraph": "(dygraph)",
"series": [
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
"label": "Y1",
"labelHTML": "Y1",
"visible": true,
"color": "rgb(0,128,0)"
},
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
"label": "Y2",
"labelHTML": "Y2",
"visible": true,
"color": "rgb(0,0,128)"
}
]
}
```
The `dashHTML` properties help you render lines which match each series’
line on the chart. When `strokePattern` is set, they become dotted or
dashed lines as needed.
Each value has a corresponding `HTML` variant, which is properly
formatted and escaped according to all the relevant options which have
been set for the chart.
Here’s what it looks like when a row is selected:
```json
{
"dygraph": "(dygraph)",
"x": 93,
"xHTML": 93,
"series": [
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
"label": "Y1",
"labelHTML": "Y1",
"visible": true,
"color": "rgb(0,128,0)",
"y": 93,
"yHTML": "93"
},
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
"label": "Y2",
"labelHTML": "Y2",
"visible": true,
"color": "rgb(0,0,128)",
"y": 26.04,
"yHTML": "26.04"
}
]
}
```
Here’s what it looks like when a single series is selected (e.g. with
`highlightSeriesOpts`):
```json
{
"dygraph": "(dygraph)",
"x": 94,
"xHTML": 94,
"series": [
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
"label": "Y1",
"labelHTML": "Y1",
"visible": true,
"color": "rgb(0,128,0)",
"y": 94,
"yHTML": "94",
"isHighlighted": true
},
{
"dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
"label": "Y2",
"labelHTML": "Y2",
"visible": true,
"color": "rgb(0,0,128)",
"y": 22.56,
"yHTML": "22.56"
}
]
}
```
(Note the `isHighlighted` property set on `Y1`.)
|
