<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>

CC BY-SA 3.0
2016-03-28T01:54:44.403Z
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.
Ben Parizek
CC BY-SA 3.0
2016-03-28T16:16:29.570Z
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`.
Benjamin David
CC BY-SA 3.0
2016-03-27T22:36:46.863Z
2016-03-28T16:01:09.353Z
2016-03-28T16:01:09.353Z
Benjamin David
<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>

<garnish><dashboard-widgets><charts>
Error: Invalid negative value for <rect> attribute
# 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 = $('').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  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 %}

    

{% 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`.  

---

