Stacked bar charts break if the first series contains 0-vals

(note: using the dhmlxchart_debug from chart-3.0 code for line numbers and code descriptions)

When creating a stacked bar chart, if the first series contains values of 0 and a following series contains a non-zero value for the same bar, browsers will blow up when trying to display the first series with a non-zero value for the field which was 0-valued in the original series:

  • Safari will raise NOT_SUPPORTED_ERR: DOM Exception 9: The implementation did not support the requested type of object or operation. on line 4727
  • Chrome will raise the similar Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 on the same line
  • Firefox 4 will raise An invalid or illegal string was specified" code: "12 on line 1693

Using the Webkit dev tools, I tracked down the issue to dhtmlx.chart.stackedBar.pvt_render_stackedBar and its usage of $startY:

In the loop over row data (line 1609), the first action is to skip everything on a falsy value. This means .$startX will not be set (at all) if the first series contains an empty value, since .$startX is set at the end of the (skipped) iteration.

During the iteration over the second series, y0 will be set to [i]data.$startY (line 1625), which will be undefined. The method will then call _setStakedBarPoints providing a y0 value of undefined making Firefox 4 blow up on the first ctx.moveTo(x0, undefined).

Webkit browsers apparently don’t mind (or at least don’t error out on) moveTo(x, undefined) but if a gradient is defined we’ll get a call to _setBarGradient(ctx, x1, undefined, …) followed by calls to ctx.createLinearGradient(x1, undefined, x2, undefined). The Webkit browsers blow up on that call (line 4727 in case of a 3D gradient, which is what we were using).

This issue can be trivially reproduced via the 06.05 sample (Bar Chart > Stacked Chart) provided with dhtmlxGraph by applying the following patch:

[code]=== modified file ‘dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html’
— dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html 2011-04-08 08:50:05 +0000
+++ dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html 2011-06-20 12:36:16 +0000
@@ -21,7 +21,7 @@

var data = [
{ sales:“3.0”,sales1:“3.4”,sales2:“1.2”,sales3:“6.9”, year:“2000” },

  •   { sales:"5.0",sales1:"5.0",sales2:"5.0",sales3:"5.0", year:"2001" },
  •   { sales:"0",sales1:"5.0",sales2:"5.0",sales3:"5.0", year:"2001" },
      { sales:"3.4",sales1:"4.7",sales2:"1.9",sales3:"5.5", year:"2002" }
    function init(){
    (I am simply setting the second “sales” value to “0”, “sales” being the first series in the demo chart).

I am expecting the same issue to exist (for $startX) for horizontal bar charts.

I believe this can be fixed by adding “|| y0” at the end of line 1625 (so that y0 defaults to point1.y if [i]data.$startY is undefined and we’re at a series further along than #1). However, I am not certain this is the right fix.

A similar fix can be performed for [i]data.$startX in pvt_render_stackedBarH, line 1490 (also note: lines 1460-1461 and 1463-1464 are duplicates).


please try to use libabries that are attached here:



i followed your instruction as i had a same problem. unfortunately, it doesn’t work for me. please show a sample code if it works in your side.

Thank you in advance.


apologize for the misleading information. We have reproduced the problem. The sample with fixed library is attached (50.7 KB)

Thank you very much. Finally, the modified js file you provided above(chart.js) works.