search

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations
https://www.layerchart.com
MIT License
668 stars 12 forks source link

Align text with ruler #149

Closed JonathonRP closed 7 months ago

JonathonRP commented 7 months ago

Is there a way to align text or label ruler for average/ custom value?

techniq commented 7 months ago

This would be a good thing to add to the examples, but you could leverage Point to translate the data values to pixel coordinates, and then use the slot to render <Text> (or <text>).

<Point d={{ x: 0, y: 50 }} let:x let:y>
  <Text {x} {y} value="Avg." verticalAnchor="end">
</Point>

(untested, but hopefully get you going). I'll try to add an example soon

techniq commented 7 months ago

btw, these kind of questions might be easier on Discord, but here works too. Discord can be nice to chat back and forth.

techniq commented 7 months ago

@JonathonRP Something like this..

image

JonathonRP commented 7 months ago

@JonathonRP Something like this..

image

Yes, close enough, I wanted value and label on both sides but this is good enough

techniq commented 7 months ago

Discussed further on Discord, and updated vertical/horizontal examples. Instead of <Point>, just leveraged let:yScale and <Text y={yScale(avg)} />