dianping/cat · error · Error

Invalid dimensions for plot, width = {width}, height = {heig

Error message

Invalid dimensions for plot, width = {width}, height = {height}

What it means

Flot's Canvas.resize refuses zero/negative dimensions: a plot needs a measurable placeholder. resize() is called on setup and on window resize with the placeholder's computed width/height; if the placeholder (or its parent) is hidden (display:none) or unstyled to 0 size, width/height evaluate to 0 and flot throws with the actual numbers, which is why the message is diagnostic.

Source

Thrown at cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js:135

		this.textContainer = null;
		this.text = {};

		// Cache of text fragments and metrics, so we can avoid expensively
		// re-calculating them when the plot is re-rendered in a loop.

		this._textCache = {};
	}

	// Resizes the canvas to the given dimensions.
	//
	// @param {number} width New width of the canvas, in pixels.
	// @param {number} width New height of the canvas, in pixels.

	Canvas.prototype.resize = function(width, height) {

		if (width <= 0 || height <= 0) {
			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
		}

		var element = this.element,
			context = this.context,
			pixelRatio = this.pixelRatio;

		// Resize the canvas, increasing its density based on the display's
		// pixel ratio; basically giving it more pixels without increasing the
		// size of its element, to take advantage of the fact that retina
		// displays have that many more pixels in the same advertised space.

		// Resizing should reset the state (excanvas seems to be buggy though)

		if (this.width != width) {
			element.width = width * pixelRatio;
			element.style.width = width + "px";
			this.width = width;
		}

View on GitHub (pinned to e815e74d4c)

Solutions

1. Initialize the plot when the container becomes visible (tab 'activate'/'shown.bs.tab', modal 'shown.bs.modal') instead of on page load.
2. Give the placeholder explicit dimensions: CSS (#chart{width:100%;height:300px;}) or options {width:600, height:300} (setCanvasDimensions), or set the placeholder's CSS width/height.
3. If display:none is required, temporarily show/measure/hide, or defer plotting; on window resize, skip redraw while dimensions are 0.

Example fix

// before
$.plot($('#chart-in-hidden-tab'), data, opts); // width=0, height=0 -> throws

// after
$('a[href="#tab2"]').on('shown.bs.tab', function () {
  if ($('#chart').width() > 0 && !chartPlotted) {
    plot = $.plot('#chart', data, opts);
    chartPlotted = true;
  }
});

function plotWhenVisible($placeholder, data, opts) {
  var w = $placeholder.width(), h = $placeholder.height();
  if (w > 0 && h > 0) return $.plot($placeholder, data, opts);
  return null; // caller retries on tab/modal show
}
$('a[href="#tab2"]').on('shown.bs.tab', function () {
  if (!plotInstance) plotInstance = plotWhenVisible($('#chart'), data, opts);
});

function hasPlotDimensions(el) {
  var $el = $(el);
  return $el.is(':visible') && $el.width() > 0 && $el.height() > 0;
}

When it happens

Trigger: Calling $.plot(...) on a div inside a hidden tab/accordion/collapsed panel (display:none); placeholder with no CSS width/height and no explicit {width, height} options; plotting before the container is laid out (element detached from DOM); parent styles height:0 with overflow hidden.

Common situations: Charts on inactive jQuery UI / Bootstrap tabs — the classic flot issue; charts in modals initialized before the modal opens; responsive layouts that momentarily collapse the container on resize events.

Related errors

• Time mode requires the flot.time plugin.
• Canvas is not available. If you're using IE with a fall-back
• Bootstrap's JavaScript requires jQuery
• Popover requires tooltip.js
• Invalid date format.

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/65460fd6a2ca99d2. Report an issue: GitHub.