Mpld3: xticks rotation being is ignored

Created on 16 Mar 2018  路  6Comments  路  Source: mpld3/mpld3

I am trying to rotate the labels on the x axis by using plt.xticks(positions, labels, rotation=90). While it is working fine using plt.show(), mpld3.show() is completely ignoring the rotation parameter and displaying text horizontally (0 rotation) instead.

Can someone suggest a workaround please?

bug

Most helpful comment

I've looked at this in more detail, and have reached the conclusion that tick rotation seems to be a feature that was never implemented, and probably needs to be implemented in both mplexporter and mpld3.js, as I don't think the rotation information is currently passed from MPL to D3. The rotation information should be extracted in mplexporter/mplexporter/utils.py and added to the D3 graph in src/core/axis.js. I'll do my best to make time to implement this, which should go more quickly now that I've identified the issue, but right now tick rotation is not something that mpld3 supports. I'll try to add it soon! :)

All 6 comments

Yes please I'm also struggling with this, the title doesn't appear aswell
Capture

Good question @azayz @pranet -- we'll take a look!

I'm working on this and I'll update you as soon as it's fixed! Sorry for the delay, trying to make time. :)

~@azayz I'm currently testing this, is there any chance you could share your code, so I can confirm I'm actually fixing it for your use case? Somehow I'm experiencing even more bugs than you did.~

Also, related issues: #369 #22 #221 #360 #364

Edit 1: Additional matplotlib==3.3.0 bug being tracked in #471.

I've looked at this in more detail, and have reached the conclusion that tick rotation seems to be a feature that was never implemented, and probably needs to be implemented in both mplexporter and mpld3.js, as I don't think the rotation information is currently passed from MPL to D3. The rotation information should be extracted in mplexporter/mplexporter/utils.py and added to the D3 graph in src/core/axis.js. I'll do my best to make time to implement this, which should go more quickly now that I've identified the issue, but right now tick rotation is not something that mpld3 supports. I'll try to add it soon! :)

As per me, a simple and easy solution to rotate xAxis is CSS.

css = """ .mpld3-xaxis text{ transform: translate(18px, 30px) rotate(45deg); } """

Apply this CSS to plugins connect
mpld3.plugins.connect(fig, mpld3.plugins.PointHTMLTooltip(lines[0],labels=labels,voffset=10, hoffset=10,css=css))

It works for me like charm.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dmiller7115 picture dmiller7115  路  5Comments

dansteingart picture dansteingart  路  31Comments

sheldonpark picture sheldonpark  路  7Comments

jakevdp picture jakevdp  路  4Comments

ledmonster picture ledmonster  路  4Comments