@nightingale-elements/nightingale-linegraph-track

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:

<nightingale-linegraph-track
  id="track"
  width="600"
  length="5"
></nightingale-linegraph-track>

Set the data in the component:

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

API Reference

Properties

`data: Array`

The data expects the following structure.

{
    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
        }
    ]
}

Other attributes and parameters

This component inherits from NightingaleElement.

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