Answers.Body: <p>Craft charts are taking the <code>width</code> and <code>height</code> of the container's <code>&lt;div&gt;</code> as a basis for drawing the chart. So your JS is probably working but you need to define a <code>width</code> and <code>height</code> for the chart's div to make it work.</p>
  
  <p>A basic implementation of the Area chart would look like this:</p>
  
  <pre><code>{% extends "_layouts/cp" %}
  {% set title = "Area Chart"|t %}
  
  {% includecss %}
      #chart {
          width: 400px;
          height: 300px;
      }
  {% endincludecss %}
  
  {% includejs %}
  
      var $chart = $('#area'),
          chart = new Craft.charts.Area($chart);
  
      var dataTable = new Craft.charts.DataTable({
          columns: [
              { label: "Date", type: 'date' },
              { label: "New Users", type: 'number' },
          ],
          rows: [
              ['2016-01-23', 5],
              ['2016-01-24', 15],
              ['2016-01-25', 10],
              ['2016-01-26', 13],
          ]
      });
  
      chart.draw(dataTable);
  
  {% endincludejs %}
  
  {% block content %}
  
      &lt;div id="area"&gt;&lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-28T01:54:44.403Z
Answers.Text: Adding `height` to the `.chart` div solved the issue.  To note, for a dashboard widget it appears to me that it may be best to only add a `height`, and not add a `width`, as that seems to let the widget handle the width as it needs to.  Additionally, I found being a bit more specific in my css styles, and targeting `.myspecificwidget .chart` helped avoid affecting other charts which also used the `.chart` class.
Answers.UserDisplayName: Ben Parizek
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-28T16:16:29.570Z
Answers.Text: Thanks Ben, I've just updated the example to avoid the conflict with Craft's styles. You're right, if your chart container is a div (which implicitly defines `display: block;`), you can just set the `height`.
Answers.UserDisplayName: Benjamin David
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-27T22:36:46.863Z
Answers.LastActivityDate: 2016-03-28T16:01:09.353Z
Answers.LastEditDate: 2016-03-28T16:01:09.353Z
Answers.UserDisplayName: Benjamin David
Body: <p>I'm trying to create a dashboard widget using the new Craft charting library.  I'm more or less copying the New Users widget however I'm running into an issue where my container does not seem to be behaving in the same way as the New User widget - it appears the container is getting a different width and no height.</p>
  
  <p>Similar to <code>NewUsersWidget.js</code> I am using these three lines of code to set the container:</p>
  
  <pre><code>this.$widget = $('#widget'+widgetId);
  this.$body = this.$widget.find('.body:first');
  this.$chartContainer = $('&lt;div class="chart hidden"&gt;&lt;/div&gt;').appendTo(this.$body);
  </code></pre>
  
  <p>However, when I inspect <code>this.$chartContainer</code> in the <code>NewUsersWidget.js</code> it has a width and height whereas when I inspect <code>this.$chartContainer</code> in my own widget, the width is different and the height is not present. I don't see these values set explicitly in the New Users widget. It appears they may be set dynamically in <code>craft.js</code>, but I'm not sure. Both javascript objects extend <code>Garnish.Base</code>.</p>
  
  <p>Understandably, someone helping troubleshoot this may need more context. I'm really not sure what more I should be sharing, so let me know if I can provide additional details to help narrow down what may be happening.</p>
  
  <p>A more general question may be, how does width and height get set when creating a variable (<code>this.$chartContainer</code>) in an object that extends <code>Garnish.Base</code>? Why would two different widgets creating the same variable both end up with a different height and width?</p>
  
Tags: <garnish><dashboard-widgets><charts>
Title: Error: Invalid negative value for <rect> attribute
ThreadText: # Error: Invalid negative value for <rect> attribute
  
  (Asked by: username_0 on 2016-03-26)
  
  I'm trying to create a dashboard widget using the new Craft charting library. I'm more or less copying the New Users widget however I'm running into an issue where my container does not seem to be behaving in the same way as the New User widget - it appears the container is getting a different width and no height.
  
  Similar to `NewUsersWidget.js` I am using these three lines of code to set the container:
  
  ```
  this.$widget = $('#widget'+widgetId);
  this.$body = this.$widget.find('.body:first');
  this.$chartContainer = $('<div class="chart hidden"></div>').appendTo(this.$body);
  
  ```
  
  However, when I inspect `this.$chartContainer` in the `NewUsersWidget.js` it has a width and height whereas when I inspect `this.$chartContainer` in my own widget, the width is different and the height is not present. I don't see these values set explicitly in the New Users widget. It appears they may be set dynamically in `craft.js`, but I'm not sure. Both javascript objects extend `Garnish.Base`.
  
  Understandably, someone helping troubleshoot this may need more context. I'm really not sure what more I should be sharing, so let me know if I can provide additional details to help narrow down what may be happening.
  
  A more general question may be, how does width and height get set when creating a variable (`this.$chartContainer`) in an object that extends `Garnish.Base`? Why would two different widgets creating the same variable both end up with a different height and width?
  
  **Tags:** garnish, dashboard-widgets, charts
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-03-27. Score: 3 | Accepted answer
  
  Craft charts are taking the `width` and `height` of the container's `<div>` as a basis for drawing the chart. So your JS is probably working but you need to define a `width` and `height` for the chart's div to make it work.
  
  A basic implementation of the Area chart would look like this:
  
  ```
  {% extends "_layouts/cp" %}
  {% set title = "Area Chart"|t %}
  
  {% includecss %}
      #chart {
          width: 400px;
          height: 300px;
      }
  {% endincludecss %}
  
  {% includejs %}
  
      var $chart = $('#area'),
          chart = new Craft.charts.Area($chart);
  
      var dataTable = new Craft.charts.DataTable({
          columns: [
              { label: "Date", type: 'date' },
              { label: "New Users", type: 'number' },
          ],
          rows: [
              ['2016-01-23', 5],
              ['2016-01-24', 15],
              ['2016-01-25', 10],
              ['2016-01-26', 13],
          ]
      });
  
      chart.draw(dataTable);
  
  {% endincludejs %}
  
  {% block content %}
  
      <div id="area"></div>
  
  {% endblock %}
  
  ```
  
  > **Comments:**
  > **username_0**: Adding `height` to the `.chart` div solved the issue.  To note, for a dashboard widget it appears to me that it may be best to only add a `height`, and not add a `width`, as that seems to let the widget handle the width as it needs to.  Additionally, I found being a bit more specific in my css styles, and targeting `.myspecificwidget .chart` helped avoid affecting other charts which also used the `.chart` class.  
  > **username_1**: Thanks Ben, I've just updated the example to avoid the conflict with Craft's styles. You're right, if your chart container is a div (which implicitly defines `display: block;`), you can just set the `height`.  
  
  ---
  
  