gridviz 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/gridviz.min.js +1 -1
- package/package.json +1 -1
- package/readme.md +125 -92
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -10,28 +10,30 @@ A JavaScript library for visualizing large amounts of gridded data using three.j
|
|
|
10
10
|
<div>
|
|
11
11
|
<!-- <img src="https://raw.githubusercontent.com/eurostat/gridviz/master/assets/images/previews/preview.gif" alt="preview" width="98%" height="10%"/> -->
|
|
12
12
|
<a href="https://eurostat.github.io/gridviz/examples/europe/2km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/2km.png" alt="preview" width="200px" height="200px"/></a>
|
|
13
|
-
<a href="https://eurostat.github.io/gridviz/examples/europe/2km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/berlin.png" alt="preview" width="200px" height="200px"
|
|
14
|
-
<a href="https://eurostat.github.io/gridviz/examples/netherlands/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/nl.png" alt="preview" width="200px" height="200px"
|
|
15
|
-
<a href="https://eurostat.github.io/gridviz/examples/europe/1km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/paris.png" alt="preview" width="200px" height="200px"
|
|
13
|
+
<a href="https://eurostat.github.io/gridviz/examples/europe/2km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/berlin.png" alt="preview" width="200px" height="200px"/></a>
|
|
14
|
+
<a href="https://eurostat.github.io/gridviz/examples/netherlands/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/nl.png" alt="preview" width="200px" height="200px"/></a>
|
|
15
|
+
<a href="https://eurostat.github.io/gridviz/examples/europe/1km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/paris.png" alt="preview" width="200px" height="200px"/></a>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
## Examples
|
|
19
19
|
|
|
20
|
-
| Link to example
|
|
21
|
-
|
|
|
22
|
-
| [Europe -
|
|
23
|
-
| [Europe -
|
|
24
|
-
| [Europe -
|
|
25
|
-
| [Netherlands -
|
|
26
|
-
| [France -
|
|
27
|
-
| [France -
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
20
|
+
| Link to example | Data source | Link to code |
|
|
21
|
+
| :---------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
22
|
+
| [Europe - 5x5km Population Grid](https://eurostat.github.io/gridviz/examples/europe/5km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/5km/index.html) |
|
|
23
|
+
| [Europe - 2x2km Population Grid](https://eurostat.github.io/gridviz/examples/europe/2km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/2km/index.html) |
|
|
24
|
+
| [Europe - 1x1km Population Grid](https://eurostat.github.io/gridviz/examples/europe/1km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/1km/index.html) |
|
|
25
|
+
| [Netherlands - 100x100m Census data](https://eurostat.github.io/gridviz/examples/netherlands/index.html) | [data source](https://www.cbs.nl/nl-nl/dossier/nederland-regionaal/geografische-data/kaart-van-100-meter-bij-100-meter-met-statistieken) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/netherlands/index.html) |
|
|
26
|
+
| [France - 1x1km Population Grid](https://eurostat.github.io/gridviz/examples/france/index.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/1km/index.html) |
|
|
27
|
+
| [SE France - Building area by type per km²](https://eurostat.github.io/gridviz/examples/france/building_area/index.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/building_area/index.html) |
|
|
28
|
+
| [France - Inhabitants over 80 years of age per 1km²](https://eurostat.github.io/gridviz/examples/france/population-over-80.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/population-over-80.html) |
|
|
29
|
+
| [Portugal census data](https://eurostat.github.io/gridviz/examples/portugal/index.html) | [data source](https://www.efgs.info/data/national/) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/portugal/index.html) |
|
|
30
|
+
| [Average internet speed 2020 (ookla open data, 400x400m grid)](https://eurostat.github.io/gridviz/examples/europe/ookla/index.html) | [data source](https://github.com/teamookla/ookla-open-data) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/ookla/index.html) |
|
|
31
|
+
|
|
30
32
|
## Description
|
|
31
33
|
|
|
32
|
-
Gridviz is a JavaScript library which allows you to visualize large gridded datasets (or any csv file with x/y data) in the browser. Unlike traditional raster-based GIS approaches, this tool utilizes WebGL through three.js in order to render eveything client-side.
|
|
34
|
+
Gridviz is a JavaScript library which allows you to visualize large gridded datasets (or any csv file with x/y data) in the browser. Unlike traditional raster-based GIS approaches, this tool utilizes WebGL through three.js in order to render eveything client-side.
|
|
33
35
|
|
|
34
|
-
From a CSV file with x and y columns, gridviz will build a viewer capable of visualizing millions of grid cells on the fly.
|
|
36
|
+
From a CSV file with x and y columns, gridviz will build a viewer capable of visualizing millions of grid cells on the fly.
|
|
35
37
|
|
|
36
38
|
For data-driven colouring and sizing, you can use [d3-scale](https://github.com/d3/d3-scale) and [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), or simply set your own colours and thresholds.
|
|
37
39
|
|
|
@@ -65,60 +67,85 @@ Here's a barebones example that loads a CSV containing population data for a 5 k
|
|
|
65
67
|
```javascript
|
|
66
68
|
let viz = gridviz.viewer()
|
|
67
69
|
.container(containerDiv)
|
|
68
|
-
.gridData(
|
|
70
|
+
.gridData(
|
|
69
71
|
{
|
|
70
72
|
url: "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/5km/3035/pop_5km_zeros_removed.csv",
|
|
71
73
|
cellSize: 5
|
|
72
74
|
}
|
|
73
|
-
|
|
74
|
-
.
|
|
75
|
-
.title("5km² Population Grid of Europe")
|
|
76
|
-
.colorField("value") // csv column that will determine cell colour
|
|
77
|
-
.legend({
|
|
78
|
-
title: "Total population per 5 km² (2011)",
|
|
79
|
-
ticks: 6
|
|
80
|
-
})
|
|
75
|
+
)
|
|
76
|
+
.colorField("population") // The csv column that will determine cell colour
|
|
81
77
|
.build()
|
|
82
78
|
```
|
|
83
79
|
|
|
80
|
+
## Preparing your csv data
|
|
81
|
+
|
|
82
|
+
If you have exported your grid data as points to a csv file, then it is likely that you can reduce the file size significantly by removing redundant data. We have prepared a small node.js package exactly for this, which you will find in the [csv-prep folder](https://github.com/eurostat/gridviz/tree/master/csv-prep) of this repository.
|
|
83
|
+
|
|
84
|
+
Here is an example of removing unnecessary information:
|
|
85
|
+
|
|
86
|
+
Turning each row from this...
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
OBJECTID;ID;Cnt_ID;Ave_Total_Trav
|
|
90
|
+
1;CRS3035RES1000mN1000000E1967000;3;49,121209420200000
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
into this...
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
x,y,time
|
|
97
|
+
1967,1000,49
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Gridviz documentation
|
|
101
|
+
|
|
102
|
+
Here you will find information on how to use the functions available for configuring a gridviz viewer. Like D3, gridviz uses a method chaining syntax (as shown in the barebones example above).
|
|
103
|
+
|
|
104
|
+
First create a viewer with ``let viewer = gridviz.viewer() ``.
|
|
84
105
|
|
|
85
|
-
|
|
106
|
+
Then configure it using the methods in the table below. The methods follow the pattern: ``viewer.method([value])``.
|
|
86
107
|
|
|
108
|
+
Once you have configured the viewer, you can build it using `` viewer.build() ``.
|
|
87
109
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
110
|
+
### Styling
|
|
111
|
+
|
|
112
|
+
These are the methods available for styling the viewer.
|
|
113
|
+
|
|
114
|
+
| Method | Type | Default | Description |
|
|
115
|
+
| ------------------------------------- | ----------- | ------------------ | ------------------------------------------------------------------------------------------------ |
|
|
116
|
+
| *viewer*.**container**([value]) | HTMLElement | document.body | The DOM element passed to the THREE.js renderer. |
|
|
117
|
+
| *viewer*.**height**([value]) | int | window.innerHeight | The height value used for the threejs scene, camera, zoom, labels. |
|
|
118
|
+
| *viewer*.**width**([value]) | int | window.innerWidth | The width value used for the threejs scene, camera, zoom, labels. |
|
|
119
|
+
| *viewer*.**backgroundColor**([value]) | String | "#b7b7b7" | Viewer background colour |
|
|
120
|
+
| *viewer*.**lineColor**([value]) | String | "#ffffff" | Colour used for line geometries |
|
|
121
|
+
| *viewer*.**highlightColor**([value]) | String | "#37f2d6" | Colour used when highlighting a cell |
|
|
122
|
+
| *viewer*.**loadingIcon**([value]) | String | "ring" | CSS animation used for the loading icon, other options are: ripple \| ring \| ellipsis \|roller. |
|
|
123
|
+
| *viewer*.**title**([value]) | String | null | The viewer's title |
|
|
124
|
+
| *viewer*.**subtitle**([value]) | String | null | The viewer's subtitle |
|
|
125
|
+
| *viewer*.**cellCount**([value]) | Boolean | false | Shows a count below the title of the total number of cells displayed in the viewer. |
|
|
126
|
+
| *viewer*.**sourceHTML**([value]) | HTML | null | Defines the innerHTML of the link to the data source shown in the bottom-right corner |
|
|
101
127
|
|
|
102
128
|
</br>
|
|
103
129
|
|
|
104
130
|
|
|
105
|
-
###
|
|
131
|
+
### Defining the viewer's data
|
|
106
132
|
|
|
133
|
+
These methods allow you to define the data that is added to the viewer and how it is presented.
|
|
107
134
|
|
|
108
|
-
| Method
|
|
109
|
-
|
|
|
110
|
-
| gridData([value]) | Object {url:string, cellSize: int} | null
|
|
111
|
-
| center([value]) | Array | null
|
|
112
|
-
| zoom([value])
|
|
113
|
-
| addGeoJson([value]) | String | null
|
|
114
|
-
| nuts([value]) | Boolean | false
|
|
115
|
-
| EPSG([value]) | int | 3035
|
|
116
|
-
| nutsLevel([value]) | int | 0
|
|
117
|
-
| nutsSimplification([value]) | String | "20M"
|
|
118
|
-
| nutsCountry([value]) | String | null
|
|
119
|
-
| showPlacenames([value]) | Boolean | false
|
|
120
|
-
| placenamesCountry([value]) | String | null
|
|
121
|
-
| placenamesThresholds([value]) | Object | null
|
|
135
|
+
| Method | Type | Default | Description |
|
|
136
|
+
| ------------------------------------------ | ---------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
137
|
+
| *viewer*.**gridData**([value]) | Object {url:string, cellSize: int} | null | Object containing the URL of the grid's CSV file and its cellSize (this will determine the point size in three.js). A 1 km² grid in EPSG:3035 will have a cellSize of 1000. |
|
|
138
|
+
| *viewer*.**center**([value]) | Array | null | [x,y] coordinates with which the viewer will center the camera. |
|
|
139
|
+
| *viewer*.**zoom**([value]) | Number | (cellSize * 50000) / 2 | The initial Z position of the camera. |
|
|
140
|
+
| *viewer*.**addGeoJson**([value]) | String | null | Loads a geojson file from the specified URL and adds it's geometries to the viewer. Currently only accepts "polygon" or "multipolygon" geometries |
|
|
141
|
+
| *viewer*.**nuts**([value]) | Boolean | false | Show NUTS boundaries using [nuts2json](https://github.com/eurostat/nuts2json) |
|
|
142
|
+
| *viewer*.**EPSG**([value]) | int | 3035 | EPSG code of the projection to use for the geometries, placename labels and NUTS boundaries. (NUTS and Placenames only available in 3035, 3857, 4258 or 4326) |
|
|
143
|
+
| *viewer*.**nutsLevel**([value]) | int | 0 | Nuts2json NUTS level |
|
|
144
|
+
| *viewer*.**nutsSimplification**([value]) | String | "20M" | The level of generalisation applied to the Nuts2json geometries |
|
|
145
|
+
| *viewer*.**nutsCountry**([value]) | String | null | Filters nuts2json geometries by country code. Used in order to only load boundaries for a single country. | |
|
|
146
|
+
| *viewer*.**showPlacenames**([value]) | Boolean | false | Adds placenames to the viewer. Placename-scale thresholds currently defined by the user. |
|
|
147
|
+
| *viewer*.**placenamesCountry**([value]) | String | null | Filters placenames by country code |
|
|
148
|
+
| *viewer*.**placenamesThresholds**([value]) | Object | null | Defines population query parameter at certain scale thresholds e.g. {"100000":500} will show placenames with populations of over 5000 at scales up to 100 000 |
|
|
122
149
|
|
|
123
150
|
|
|
124
151
|
|
|
@@ -126,28 +153,32 @@ Here's a barebones example that loads a CSV containing population data for a 5 k
|
|
|
126
153
|
|
|
127
154
|
### Colouring & sizing
|
|
128
155
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
156
|
+
The methods that can be used to determine the colour and size of the grid cells.
|
|
157
|
+
|
|
158
|
+
| Method | Type | Default | Description |
|
|
159
|
+
| ----------------------------------------- | -------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
160
|
+
| *viewer*.**colorField**([value]) | String | null | CSV field used to determine cell colour |
|
|
161
|
+
| *viewer*.**sizeField**([value]) | String | null | CSV field used to determine cell size |
|
|
162
|
+
| *viewer*.**colorScaleName**([value]) | String | "scaleSequential" | The name of d3.scale function name to use for scaling cell colours. If you would like to define your own scale you can use colorScaleFunction() |
|
|
163
|
+
| *viewer*.**sizeScaleName**([value]) | String | "scaleSqrt | Name of d3.scale function name to use for scaling cell sizes |
|
|
164
|
+
| *viewer*.**colors**([value]) | Array | null | Array of hex strings to be used in combination with viewer.thresholds for colouring. |
|
|
165
|
+
| *viewer*.**thresholds**([value]) | Array | null | Array of threshold values that are applied to the colour scaling function. |
|
|
166
|
+
| *viewer*.**colorSchemeName**([value]) | String | "interpolateTurbo" | Name of d3.scaleChromatic function to use for scaling cell colours |
|
|
167
|
+
| *viewer*.**colorScaleMidpoint**([value]) | Number | 0 | The midpoint value when using a diverging scale (when viewer.colorScaleName is set to 'scaleDiverging') |
|
|
168
|
+
| *viewer*.**reverseColorScheme**([value]) | Boolean | false | Flips the current color scheme. Applies .reverse() method to the 'domain' array of the scale. |
|
|
169
|
+
| *viewer*.**colorScaleFunction**([value]) | Function | d3.[viewer.colorScaleName] | Define a scale function to be used for color scaling. If unspecified it will build a d3 scale using viewer.colorScaleName and the d3.extent() of the values loaded from viewer.colorField. |
|
|
170
|
+
| *viewer*.**sizeScaleFunction**([value]) | Function | d3.[viewer.sizeScaleName] | Define a scale function to be used for scaling cell sizes. If unspecified it will build a d3 scale using viewer.colorScaleName, the d3.extent() of the values loaded from viewer.sizeField and a range of [viewer *viewer*.**resolution / 3, viewer.resolution / 1.5] |
|
|
171
|
+
| *viewer*.**colorFieldSelector**([value]) | boolean | false | Generates a simple HTML select input showing the available fields in the csv file that can be used to drive cell colour. |
|
|
172
|
+
| *viewer*.**colorSchemeSelector**([value]) | boolean | false | Generates an HTML Select element for the different D3 Scale-Chromatic functions |
|
|
173
|
+
| *viewer*.**sizeFieldSelector**([value]) | boolean | false | Generates a simple HTML select input showing the available fields in the csv file that can be used to drive cell size. |
|
|
145
174
|
|
|
146
175
|
|
|
147
176
|
<br>
|
|
148
177
|
|
|
149
178
|
### Legend
|
|
150
179
|
|
|
180
|
+
The possible configurations for the legend of the grid data.
|
|
181
|
+
|
|
151
182
|
Default:
|
|
152
183
|
```javascript
|
|
153
184
|
{
|
|
@@ -163,24 +194,26 @@ Default:
|
|
|
163
194
|
}
|
|
164
195
|
```
|
|
165
196
|
|
|
166
|
-
| Method / Object
|
|
167
|
-
|
|
|
168
|
-
| showLegend([value])
|
|
169
|
-
| legend([
|
|
170
|
-
| **legendConfig**.type
|
|
171
|
-
| **legendConfig**.width
|
|
172
|
-
| **legendConfig**.height
|
|
173
|
-
| **legendConfig**.orientation
|
|
174
|
-
| **legendConfig**.title
|
|
175
|
-
| **legendConfig**.titleWidth
|
|
176
|
-
| **legendConfig**.format
|
|
177
|
-
| **legendConfig**.cells
|
|
178
|
-
| **legendConfig**.shapeWidth
|
|
197
|
+
| Method / Object | Type | Default | Description |
|
|
198
|
+
| ------------------------------------- | ------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
199
|
+
| showLegend([value]) | boolean | true | Build d3 colour legend. |
|
|
200
|
+
| *viewer*.**legend**([*legendConfig*]) | Object | See legendConfig default values below. |
|
|
201
|
+
| **legendConfig**.type | String | "continuous" | Type of legend to build. Accepted values are "cells" or "continuous". Cells uses [d3-svg-legend](https://d3-legend.susielu.com/) and continuous uses an implementation of Mike Bostock's [color legend](https://observablehq.com/@d3/color-legend) |
|
|
202
|
+
| **legendConfig**.width | int | 140 | width of the legend in pixels |
|
|
203
|
+
| **legendConfig**.height | int | 320 for "cells" and 50 for "continuous" | height of the legend in pixels |
|
|
204
|
+
| **legendConfig**.orientation | int | For cells legends only | "vertical" or "horizontal" |
|
|
205
|
+
| **legendConfig**.title | String | "Legend" | Title text of the legend. |
|
|
206
|
+
| **legendConfig**.titleWidth | int | 50 | Width of the title text of the legend. |
|
|
207
|
+
| **legendConfig**.format | string | ".0s" | d3.format string used to format the legend values |
|
|
208
|
+
| **legendConfig**.cells | int | 5 | Number of cells (for cell legends only) |
|
|
209
|
+
| **legendConfig**.shapeWidth | int | 30 | width in pixels of legend cell (for cell legends only) |
|
|
179
210
|
|
|
180
211
|
<br>
|
|
181
212
|
|
|
182
213
|
### Tooltip
|
|
183
214
|
|
|
215
|
+
The possible configurations for the viewer's tooltip.
|
|
216
|
+
|
|
184
217
|
Default:
|
|
185
218
|
```javascript
|
|
186
219
|
{
|
|
@@ -195,16 +228,16 @@ Default:
|
|
|
195
228
|
```
|
|
196
229
|
|
|
197
230
|
|
|
198
|
-
| Method / Object
|
|
199
|
-
|
|
|
200
|
-
| tooltip([
|
|
201
|
-
| **tooltipConfig**.eventType
|
|
202
|
-
| **tooltipConfig**.showLAU
|
|
203
|
-
| **tooltipConfig**.showNUTS
|
|
204
|
-
| **tooltipConfig**.showCoordinates
|
|
205
|
-
| **tooltipConfig**.showEPSG
|
|
206
|
-
| **tooltipConfig**.xOffset
|
|
207
|
-
| **legendConfig**.yOffset
|
|
231
|
+
| Method / Object | Type | Default | Description |
|
|
232
|
+
| --------------------------------------- | ------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
233
|
+
| *viewer*.**tooltip**([*tooltipConfig*]) | Object | See tooltipConfig default values below. |
|
|
234
|
+
| **tooltipConfig**.eventType | String | "click" | The mouse event that will trigger the tooltip ("click" or "mousemove" being the most common, depending on the dataset). You might want to set showLAU and showNUTS to false when using mousemove. |
|
|
235
|
+
| **tooltipConfig**.showLAU | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
236
|
+
| **tooltipConfig**.showNUTS | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
237
|
+
| **tooltipConfig**.showCoordinates | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
238
|
+
| **tooltipConfig**.showEPSG | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
239
|
+
| **tooltipConfig**.xOffset | int | 15 | X offset in pixels from the mouse position |
|
|
240
|
+
| **legendConfig**.yOffset | int | 15 | Y offset in pixels from the mouse position |
|
|
208
241
|
|
|
209
242
|
<br>
|
|
210
243
|
|