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?
Yes please I'm also struggling with this, the title doesn't appear aswell
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.
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 inmplexporter/mplexporter/utils.py
and added to the D3 graph insrc/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! :)