ni-webcharts-legends
Version:
legends for webcharts
49 lines (38 loc) • 2 kB
Markdown
# Webcharts Legends
[](https://travis-ci.com/ni-kismet/webcharts-legends) [](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)