Documentation Omits Required Element Height #4

JeffPaine opened this Issue Dec 6, 2012 · 2 comments

4 participants


My apologies in advance if this is not the proper place to raise this issue.

In step 4 of the documentation, users are instructed to

4) Add an element to your page to display your chart:

    <figure id="myChart"></figure>

However, the chart will fail to appear unless a height is set on that element (or a containing element).

Steps to Reproduce

  1. load the following html into a browser
<!doctype html>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">

  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
    <figure id="example1"></figure>
    (function () {

        var data = {
          "xScale": "ordinal",
          "yScale": "linear",
          "main": [
              "className": ".pizza",
              "data": [
                  "x": "Pepperoni",
                  "y": 4
                  "x": "Cheese",
                  "y": 8
        var myChart = new xChart('bar', data, '#example1');


Expected Behavior

You will see a chart.

Actual Behavior

You do not see a chart (it's there, but with a height of 0px).

In order to see the chart, change the <figure> element to (for example)

<figure style="height: 300px;" id="example1"></figure>

Perhaps this should be obvious to most users, but I know it tripped me up for a second. In the interest of making this library easy to use, perhaps it's worth mentioning in the documentation. Humbly submitted.




nice find, i was wondering why it wasn't working!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment