frappe / charts

Simple, responsive, modern SVG Charts with zero dependencies
https://frappe.io/charts
MIT License
14.94k stars 718 forks source link

[Feature Request] yMarkers text left-aligned #140

Closed ucffool closed 6 years ago

ucffool commented 6 years ago

Expected Behaviour

yMarkers: [
  {
    label: "Average",
    value: 20,
    type: 'dashed',
    pos: 'left'
  }
]

Actual Behaviour

no effect

Code Effect

It looks like inside draw.js the x position is determined by x: width - getStringWidth(label, 5) - LABEL_MARGIN. I'm possibly not looking at the right place, but it seems this is fixing it to right alignment no matter what.

As a side note, ChartCompenents.js there is this:

yMarker(marker.position, marker.label, this.constants.width,
{pos:'right', mode: 'span', lineType: 'dashed'})

Which is what led me to believe there was a way to change the position by passing a value.

Frappé Charts version: 1.0.0

pratu16x7 commented 6 years ago

You can as of v1.1.0 add a options: { labelPos: 'left' } to a yMarker property:

yMarkers: [{ label: "Marker", value: 70, options: { labelPos: 'left' }}]

Cheers!