Comments (5)
After some more testing turns out it is not related to the height property and is in fact always occurring in Firefox. It is just more noticeable when height is set.
from chartist-plugin-legend.
The demo also has this bug.
from chartist-plugin-legend.
Did some more digging and it turns out it's an issue with Firefox's SVG rendering which Chartist does account for. Firefox is unable to properly determine the height of the SVG element so Chartist in it's height()
function has a fall back to set the height equal to it's container element.
The problem arises because the legend is being injecting that container which in turn alters the height. So if for example the height of the container was 100px the height of the chart would be set to 100px because of this fallback, but when legend gets injected the height changes, and the chart gets set to this new changed height. So you have a container that is now larger (e.g. 118px), but contains both the legend and a chart that is also set to 118px. So the bottom of the SVG gets cut off.
I ended up getting around this using CSS by setting position: relative;
on the legend and placing a negative bottom margin magin-bottom: -18px;
equal to the height of the legend. Then I added a margin top margin-top: 18px;
to the container equal to the legend height as well. The net effect being that the height of the container stays the same so the chart renders correctly.
Since this is a browser issue there's not much that can be done with the plugin, however might be worth while to make users aware of it and have sample CSS as a workaround.
from chartist-plugin-legend.
Thanks for debugging this issue! Using a negative bottom margin is a nice workaround, but not a nice solution.
Maybe this plugin should also use SVG to insert the legend items? I'm not sure since it would be somewhat more difficult to style it exactly like you want.
from chartist-plugin-legend.
Interesting, after upgrading to chartist 0.9.7 it seems to be fixed. It probably was this issue: gionkunz/chartist-js/issues/592
from chartist-plugin-legend.
Related Issues (20)
- Not able to add data whilst series are hidden from the legend HOT 4
- Internet Explorer has stopped working HOT 5
- Hiding a line is not persistent with data changes HOT 6
- Site doesn't work on firefox HOT 3
- Fix ESLint errors HOT 1
- Breaks Chartist's labelInterpolationFnc() option HOT 1
- Hide legend key for emptyValues if ignoreEmptyValues is true?
- chart and legend colors don't match after clicking on label HOT 1
- Not an Issue(Misleading): Styling HOT 1
- Variable series revert to their old values on hiding a line
- Plugin output js
- Select/Deselect legend items through options
- This plugin is not compatible in charts with aspectRatio
- this plugin does not render inside the SVG chart
- Legends with axis offset
- Add left and right as positions
- Dynamically Changing Legend Color
- Cannot assign the color to the legend
- Can't figure out where to plug this when using moment to generate chart HOT 1
- How to change Text Color?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartist-plugin-legend.