ni-webcharts-legends/docs/ni-graph-tools.md

legends for webcharts

## ni-graph-tools

> A custom element that provides a graph tools "legend".

Use it to add navigation controls to a graph, chart or intensity graph element.
It provides buttons to switch between pan mode, box zoom mode or to lock navigation.

It also provides a resetOffset button which resets the axes to the range of the data.

Example:
```html
<ni-cartesian-graph graph-ref="g1" value="[[2, 3, 5, 7, 11, 13, 17, 19],
                          [0, 1, 1, 2, 3, 5, 8, 13]]">
  <ni-cartesian-axis show label="Index" axis-position="bottom"></ni-cartesian-axis>
  <ni-cartesian-axis show label="Value" axis-position="left"></ni-cartesian-axis>
</ni-cartesian-graph>

<ni-graph-tools graph-ref="g1" mode="pan"></ni-graph-tools>
```


### ni-graph-tools properties

**graph-ref** - the graph id to connect to. Default: ''

**is-in-edit-mode** - makes the legend non-interactive


**mode** (string) - the mode of the graph tools. Default: 'pan'.
               Accepted values: 'locked', 'pan', 'zoom'

### ni-graph-tools methods

**asyncProcessAllImagesForComposition** - gathers all the required
       layers of a graph, chart etc (i.e. plot, axes, cursors, legend),
       adds a background color to them and creates a snapshot (as canvas).
       If no background color is specified, it uses the plot background color.
       It returns a promise, which can be used to get the generated snapshot
       image. Using *downloadSnapshot* function, this image can be downloaded
       to disk (see *downloadSnapshot* function below).
       asyncProcessAllImagesForComposition is available, to allow users to
       write their own custom download functions.

   Example:
   ```js
   var asyncSnapshot = function() {
       asyncProcessAllImagesForComposition().then(triggerDownload(), failureCallback);
       _parentGraph.graph.getEventHolder().removeEventListener('onDrawingDone', asyncSnapshot);
   };
   _parentGraph.graph.getEventHolder().addEventListener('onDrawingDone', asyncSnapshot);
   _parentGraph.updateGraphConfig();
   ```
       

**downloadSnapshot** - is a wrapper over *asyncProcessAllImagesForComposition*
       function, used to generate a filename and trigger the actual download of
       a graph snaphot. It also updates the plot dimensions to the page zoom,
       before calling *asyncProcessAllImagesForComposition*. This allows creating
       a high resolution snapshot, simply by zooming the page in.
       Updating the plot dimensions as the page is zoomed in/out, is a requirement,
       to make sure all layers of a snapshot are scaled accordingly.
       As a limitation, it may not be possible to create and download snapshots
       at every refresh of a plot.

   Example:
   ```js
   function takeGraphSnapshotOnClick() {
       downloadSnapshot();
   }
   ```