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?


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


{% endincludejs %}

{% block content %}

    <div id="area"></div>

{% endblock %}
  • 1
    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. Mar 28 '16 at 1:54
  • 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. Mar 28 '16 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.