**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 --> <!--[if IE]> <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-family : Times; } .jQchart-labelData-canvasMyID1{ font-size : 20px; } .jQchart-title{ font-size : 12px; } </style> <script type="text/javascript"> var data = [ [435,500,600,700,888,777,925], [60,435,456,352,567,678,1260], [200,123,312,200,402,300,512] ]; </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 : "line"</b> and Set CSS of labelData', type : 'line', use : 'gradient:#canvasMyID1' }, data : data }; jQuery(function($){ $('#canvasMyID1').jQchart(chartSetting1); }) </script>