Line

The Line mark plots a line element by taking two or more x/y coordinate pairs. Use cases include line charts and network visualizations.

<script>
  import { Graphic, Line, LineLayer, XAxis, YAxis } from '@snlab/florence'
</script>

<Graphic width={200} height={200} scaleX={[0, 10]} scaleY={[0, 10]} padding={20}>

  <Line
    x={[0, 2.5, 2.5]}
    y={[0, 2.5, 0]}
    stroke={'red'}
  />

  <LineLayer 
    x={[[6, 4], [10, 7.5, 7.5]]} 
    y={[[4, 6], [10, 7.5, 10]]}
    stroke={['blue', 'green']}
  />

  <XAxis />
  <YAxis />

</Graphic>
012345678910 012345678910

To render the Line mark, you will need to provide the x and y or the geometry props. The two uses are mutually exclusive.

Properties

Positioning

Prop Required Type(s) Default Unit(s)(s)
x if (geometry === undefined) `any[] Function` undefined
y if (geometry === undefined) `any[] Function` undefined
geometry if (x === undefined && y === undefined) GeoJSON LineString or MultiLineString feature undefined Local coordinate
curve false D3ShapeCurve undefined A d3-shape curve

x and y can be arrays of any type, depending on the scale used in the parent Graphic, Section or Glyph. geometry accepts GeoJSON LineString and MultiLineString features only. Coordinates inside the GeoJSON geometry will be treated as local coordinates, and not as WGS84. Alternatively, for x and y, Functions can be passed that must return Arrays of default coordinates– see the local coordinates documentation. When using the LineLayer, the x and y props will be supplied as Arrays of Arrays, or Functions that return Arrays of Arrays of default coordinates. Furthermore, the LineLayer accepts an Array of GeoJSON features instead of a single feature. See the marks versus layers documentation for more information.

Aesthetics

Prop Required Type(s) Default Unit(s)
stroke false string '#000000' Named, hex, rgb or hsl color
strokeWidth false number 3 Pixel
opacity false number 1 Number between 0 and 1
lineCap false `‘butt’ ‘round’ ‘square’`
lineJoin false `‘bevel’ ‘round’ ‘miter’`
miterLimit false number 10 Pixel
dashArray false string undefined A string of numbers seperated by spaces. See here
dashOffset false number undefined Pixel

These aesthetic props are similar to attributes of the SVG line element. The analogous line attributes are shown below in brackets:

  • stroke refers to the color of the line
  • strokeWidth refers to the width of the line
  • strokeOpacity refers to the transparency of the line, 0 being fully transparent
  • lineCap controls the endings of the line (stroke-linecap)
  • lineJoin controls the shape to be used at the corners of the line (stroke-linejoin)
  • miterLimit, if lineJoin is 'miter', sets a limit on how long the miter can be (stroke-miterlimit)
  • dashArray can be used to make dashed lines (stroke-dasharray)
  • dashOffset shifts the pattern defined in dashArray by a number of pixels (stroke-dashoffset)

Interactions

Mouse events

Prop Required Type(s) Default Unit(s)
onClick false Function undefined -
onMousedown false Function undefined -
onMouseup false Function undefined -
onMouseover false Function undefined -
onMouseout false Function undefined -
onMousedrag false Function undefined -

Touch events

Prop Required Type(s) Default Unit(s)
onTouchdown false Function undefined -
onTouchup false Function undefined -
onTouchover false Function undefined -
onTouchout false Function undefined -
onTouchdrag false Function undefined -

Select events

Prop Required Type(s) Default Unit(s)
onSelect false Function undefined -
onDeselect false Function undefined -

See the interactivity documentation for more information.

Other

Prop Required Type(s) Default Unit(s)
outputSettings false OutputSettings undefined -
clip false `‘padding’ ‘outer’ undefined`
  • outputSettings: see the advanced rendering documentation for more information.
  • clip: if defined, overrides the clip mode of the parent Graphic, Section or Glyph.

In addition, the LineLayer has the following props:

Prop Required Type(s) Default Unit(s)
keys false string[] undefined Array of unique keys
asOnePath false Boolean false -

See the marks versus layers documentation for more information on how keys and asOnePath work.

Examples

The Line and LineLayer can be seen in action in the following examples: