X-gridlines

Component that creates grid lines extending the ticks of the x-axis.

<script>
  import { Graphic, XAxis, XGridLines } from '@snlab/florence'
</script>

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

  <XAxis />
  <XGridLines />

</Graphic>

Properties

Prop	Required	Type(s)	Default	Unit(s)
count	`false`	`Number`	`10`	-
extra	`false`	`Boolean`	`false`	-
values	`false`	`Array`	`undefined`	Local coordinate
width	`false`	`Number`	`0.25`	Pixel
color	`false`	`String`	`'black'`	Named, hex, rgb or hsl color
opacity	`false`	`Number`	`1`	Number between 0 and 1

These properties mirror the ‘ticks’ properties of the XAxis.