In the documentation: Cannot set height as a string–doesn't render about chartist HOT 11 CLOSED

Hi there,

Thanks for reporting this issue. I think this was more of an edge case for me till now, as I'm really suggesting to use a container for chartist and don't set a width / height in the configuration. But as this is possible we should invest some time to make this more robust.

Cheers
Gion

from chartist.

Have the same issue.
@gionkunz btw, what ist the "proper" way to have the chart taking 100% width and 100% height of parent container? In my code it seems that only width is responsive. Do I need preserveAspectRatio on the svg?

from chartist.

@SekibOmazic Chartist creates an SVG object inside of a container element. The container can be of any type but should be a block / inline-block with position relative. By default if you initialize Chartist without width / height parameters, it will use 100% for both. The Chartist CSS is providing some container classes that will help you creating responsive / scalable container elements. You should read this chapter: https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get

preserveAspectRatio is not really needed as Chartist is re-drawing the chart to fit your container and does not scale it's content.

It's recommended to always use an aspect ratio container as described in the getting started documentation rather than using the width and height parameters of the chart. They are only there if you'd like to use absolute height and width and currently only pixel are supported and need to be passed as numbers (This is what we should change with a enhancement).

from chartist.

Also I'm using a special form of a responsive / aspect ratio container that is making use of pseudo elements to expand the container. Usually what you see is that a padding-bottom with percentage is used on the container directly. The problem with that is that padding-bottom / padding-top are relying on the parents width to calculate the values. And with the standard approach you'll need to use an other wrapper if you'd like to set a width on your container. Otherwise the padding with percentage doesn't work correctly. Chartist uses a child pseudo element in the container to make it scale that has no width and height but padding and also floats. That way you can specify any width on your container and it still works as expected. You can check out this code pen: http://codepen.io/gionkunz/pen/iJItx

from chartist.

@gionkunz Thanks for your answer(s). I'll have to analyze you code pen and maybe "borrow" some css. It seems that I have an issue with my styles.

from chartist.

Hi Guys this is fixed in the latest version 0.2.1. It's now possible to pass any CSS length (px, em, rem, cm, vw ....) and Chartist will render the SVG correctly. If a number is passed then pixel is assumed. This is effecting also situations where you draw a Chartist Chart inside of SVG DOM (which is whats happening on the Chartist documentation landing page) where there only pixels are supported.

from chartist.

@gionkunz Sorry if this is not a proper place to ask a question, but I still have a problem with creating "responsive" line charts. What I want to achieve is a line chart that occupies whole parent div like this (made with D3): http://plnkr.co/edit/jw9WXGn76gjDPoQTLq9m?p=preview (try resizing window)

What I got so far: http://plnkr.co/edit/zJuFLVDvA0WYuFit3lGd?p=preview

It's obvious that an aspect ratio container is not a way to take, so I tried with the options (setting width and height) but it won't work for some reason.

from chartist.

Are you sure this example should work? You're including from raw.github which is no longer supported as they send it as plain text on purpose. You can use jsDelivr CDN for the latest Chartist version.

Why do you think an aspect ratio container is not a way to take? This is the recommended way to make block content responsive.

Here is your code that works with the golden section aspect ratio container:
http://plnkr.co/edit/FtHxLlgCJxu6bhrZk29k?p=preview

Here is a variation that does not use a aspect ratio container but fixed dimensions:
http://plnkr.co/edit/oOvVYI6d483IxZgPrCcw?p=preview

Just set the width to 100% and height to anything you want. You could also specify 100% width and 100% height to fill the whole parent.

from chartist.

@gionkunz OMG - it works ( http://plnkr.co/edit/V7PyHOWtavhIA4QO9N5f?p=preview ).
Thanks a lot. The trick was to explicitly tell container to take 100% height.

There is one small issue: it seems that chartist "adds" 5px to the height. Maybe it is a plunker issue - need to investigate.

Now I can get rid of D3 und use chartist in our product (teamgeist.io) as soon as we get stacked bar chart ;-)

from chartist.

@gionkunz Would you mind if I send you a question via Email? It's about SVG and github is not the right platform for that. No problem if you don't have time for this ;-)

from chartist.

Sure drop me a mail! It's [email protected]

from chartist.