Chartist-js: Line chart Y-axis label positioning

Created on 4 May 2015  路  4Comments  路  Source: gionkunz/chartist-js

Is there a way to move the Y-axis labels on a line chart from the left side to the right side?

Using this Plunker as an example (http://plnkr.co/edit/XKOmwcSMZKLbYNxA3kMb?p=preview), I'd like to move the 0, 1.25. 2.5, 3.75, etc to the right side of the chart.

It looks hackable in the ct-labels class to change the 'x' attribute in the foreignObject from -5 to something close to the right edge.

<foreignObject x="400" width="40" height="36" y="186.36363636363637" style="overflow: visible;">
<span xmlns="http://www.w3.org/1999/xhtml" class="ct-label ct-vertical">6.25</span>
</foreignObject>

What is a better way of going about this?

Most helpful comment

Using the draw event you could do something like this easily: http://plnkr.co/edit/b5fouXXCWUesYrNufaoz?p=preview

All 4 comments

Currently this is not supported. You could use events to achieve this but I think we should open a ticket to make the label position configurable. I've opened #302 for this feature. Let's track any further discussion there.

Using the draw event you could do something like this easily: http://plnkr.co/edit/b5fouXXCWUesYrNufaoz?p=preview

That's a great suggestion, and should work for us. Thanks so much for the quick response!

Thanks @gionkunz for that plnkr. :relieved:
Just in case that someone is looking for a way to have the x axis on top of the graph, one can put this in the draw event

if(context.type === 'label' && context.axis.units.pos === 'x'){
    context.element.attr({
      y: 0
    })
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

LandonSchropp picture LandonSchropp  路  3Comments

alexcarpenter picture alexcarpenter  路  3Comments

andreasba picture andreasba  路  3Comments

unhinged picture unhinged  路  3Comments

ShlomoRosenheimer picture ShlomoRosenheimer  路  3Comments