# Webcharts Legends
[![Build Status](https://travis-ci.com/ni-kismet/webcharts-legends.svg?token=MpaGws1pj7G9qToNQ6dS&branch=master)](https://travis-ci.com/ni-kismet/webcharts-legends) [![Coverage Status](https://coveralls.io/repos/github/ni-kismet/webcharts-legends/badge.svg?branch=master&t=biSQ0h)](https://coveralls.io/github/ni-kismet/webcharts-legends?branch=master)

Legends and tools for ```ni-webcharts```.

Usage example:

Import ni-webcharts and ni-webcharts-legends

```
npm install ni-webcharts
npm install ni-webcharts-legends
```

Add a graph and legends to a webpage:

```html
<html>
<head>
    <link rel="stylesheet" href="node_modules/ni-webcharts/styles/webchartsLight.css" />
    <link rel="stylesheet" href="node_modules/@ni-kismet/jqx-elements/source/styles/jqx.default.css" />
    <link rel="stylesheet" href="node_modules/ni-webcharts-legends/styles/webcharts-legends.css" />
    <link rel="stylesheet" href="node_modules/ni-webcharts-legends/styles/webcharts-legends.icons.css" />
    <!-- webcharts scripts -->
    <!-- webcharts legends scripts -->
    <script type="text/javascript" src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
</head>

<body>
    <ni-cartesian-graph graph-ref="graph1" value="[[0, 10, 200, 3, 40, 500, 6, 70, 800]]">
      <ni-cartesian-axis show label="Time" show-label axis-position="bottom"></ni-cartesian-axis>
      <ni-cartesian-axis show label="Amplitude" show-label axis-position="left"></ni-cartesian-axis>
      <ni-cartesian-plot show label="Plot">
        <ni-cartesian-plot-renderer line-width="1"></ni-cartesian-plot-renderer>
      </ni-cartesian-plot>
    </ni-cartesian-graph>

    <ni-scale-legend graph-ref="graph1"></ni-scale-legend>
    <ni-plot-legend graph-ref="graph1"></ni-plot-legend>
    <ni-cursor-legend graph-ref="graph1"></ni-cursor-legend>
    <ni-graph-tools graph-ref="graph1"></ni-graph-tools>
</body>
</html>
```

# Webcharts Legends documentation

[API Documentation](docs/API.md)
