nightingale-linegraph-track


Nightingale line graph track component is used to display multiple line graphs (either linear or d3 curves).

Usage

- Include the componet in your HTML:

``html
id="track"
width="600"
length="5"
>
`

- Set the data in the component:

`javascript
await customElements.whenDefined("nightingale-linegraph-track");
const track = document.getElementById("track");
if (track) {
(track as any).data = tinyData;
}
`

API Reference

$3

#### data: Array

The data expects the following structure.

`javascript
{
name: String,
range:[min, max],
color?: Line color,
(color will be assigned if not provided. Use "none" for no line color)
fill?: Create area plot using given fill color (default "none"),
lineCurve?: 'curveLinear'(default)|'curveBasis'|'curveCardinal'|'curveStep'|'curveNatural',
(More curves - https://github.com/d3/d3-shape/blob/v2.0.0/README.md#curves)
values: [
{
position: Number,
value: Number
}
]
}
`

$3

This component inherits from NightingaleElement.

The component implements the following mixins: withManager, withZoom, withResizable, withMargin, withPosition, withDimensions, withHighlight`