**Attention** I cancel the work that I used "use:gradient" for at one time. After jquery.jqchart-0.02-beta-3.0.js, "use:gradient" is not usable. After v0.02-beta-3.0.js, I try the gradation in canvas. 0.02-beta-2.1.js.gradient(development).end() :) <!-- libs --> <script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script> <![endif]--> <script type="text/javascript" src="./lib/jquery-1.2.3.min.js"></script> <script type="text/javascript" src="./jquery.jqchart-0.02-beta-2.1.js" charset="utf-8"></script> <script type="text/javascript" src="./lib/jquery.dimensions.js"></script> <script type="text/javascript" src="./jquery.gradient-forjqchart.js"></script> </head><body> <style> body { margin: 20px; font-family: "Myriad Web","Trebuchet MS","Tahoma","Helvetica","Arial","sans-serif"; } #myBgBox{ background-color:#3f464c; padding:30px; padding-top:5px; text-align:center; color:white; } #myBgBox h5{ margin :15px; font-size : 18px; } .jQchart{ font-size : 12px; } .jQchart-bg{ margin-left : auto ; margin-right : auto ; } .jQchart-labelData{ font-size : 9px; } .jQchart-title{ font-size : 12px; } </style> <script type="text/javascript"> var data = [ [234,555,234], [300,700,600], [789,666,887], [456,890,226], [336,666,776], [458,788,888], [123,333,567], [786,221,777], [666,567,789], [895,654,888], [333,222,444], [456,123,789], [543,235,999], [444,666,227], [123,234,222] ]; </script> <div id="myBgBox"> <h5>jQchart + use:gradient</h5> <canvas id="canvasMyID1" width="500" height="220"></canvas> </div> <script type="text/javascript"> var chartSetting1={ config:{ title : '<b>type : "bar"</b>,setting.config.colorSet : $.jQchart.colorSets.rikyu', type : 'bar', use : 'gradient:#canvasMyID1', gradient : { direction : 'vertical', from : '000000', to : 'aabb00' }, colorSet : $.jQchart.colorSets.rikyu }, data : data }; jQuery(function($){ $('#canvasMyID1').jQchart(chartSetting1); }) </script>