Repository with sample code of graphs usage in CSS-transformed layout of Dash app.
In current version of Dash, interactive Plotly-based charts do not render properly on page layout that is transformed with CSS. While click/drag events seem to work correctly, the rendering of hover information is offset. Right now, solving this bug requires a $10-$15k sponsorship.
This repository aims to show a workaround for this problem - with changing main charting library rather than paying developers a small fortune ;).
Workaround requires switching from Plotly charting library (natively used with dcc.Graph) to mpld3 (source code output used with html.Iframe). This framework translates Matplotlib charts to interactive web applications with usage of D3.js.
As our solution solves the initial problem, unfortunately its' success depends highly on your use case:
- it is still a library change - which you can't afford if you are strictly bound to Plotly framework in your Dash app project,
- not all features work in mpld3 - there is a list of missing ones,
- some chart elements quite hard to change (e.g. grid lines color, axes custom font). But don't be worried - with a smart/hacky approach to raw mpld3 code itself, as well as Dash app, they can be fixed ;).
Simply run python3 app.py while being in the repository folder.