Ni-webcharts-legends NPM

Webcharts Legends

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>
<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>