Error: Invalid negative value for  attribute 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 = $('&lt;div class="chart hidden"&gt;&lt;/div&gt;').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?
Craft charts are taking the width and height of the container's &lt;div&gt; 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 %}

    &lt;div id="area"&gt;&lt;/div&gt;

{% endblock %}