Git Product home page Git Product logo

Comments (5)

arvinsingla avatar arvinsingla commented on June 23, 2024

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.

SpaceK33z avatar SpaceK33z commented on June 23, 2024

The demo also has this bug.

from chartist-plugin-legend.

arvinsingla avatar arvinsingla commented on June 23, 2024

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.

SpaceK33z avatar SpaceK33z commented on June 23, 2024

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.

SpaceK33z avatar SpaceK33z commented on June 23, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.