var data = { labels : ["", 20, "", 40, ""], datasets : [ { fillColor : "rgba(0,180,255,0.1)", strokeColor : "#66ccff", pointColor : "#66ccff", pointStrokeColor : "#fff", data : [65,59,81,56,55,40] } ] } var ctx = document.getElementById("myChart").getContext("2d"); new Chart(ctx).Line(data,{ scaleOverlay : false, scaleOverride : true, scaleSteps : 3, scaleStepWidth : 50, scaleStartValue : null, scaleLineColor : "#ccc", scaleLineWidth : 1, scaleShowLabels : true, scaleLabel : "<%=value%>", scaleFontFamily : "'Arial'", scaleFontSize : 11, scaleFontStyle : "normal", scaleFontColor : "#ccc", scaleShowGridLines : false, scaleGridLineColor : "#ccc", scaleGridLineWidth : 1, bezierCurve : false, pointDot : true, pointDotRadius : 6, pointDotStrokeWidth : 0, datasetStroke : true, datasetStrokeWidth : 3, datasetFill : true, animation : true, animationSteps : 60, animationEasing : "easeOutQuart", onAnimationComplete : null });
<div id="chart"> <canvas id="myChart" width="400" height="200"></canvas> <div class="count"> <em>240,021</em><br> <span class="caption">USERS</span> </div> </div>
body { background: #fff; padding-top: 30px; } #chart { position: relative; width: 400px; } #chart .count { position: absolute; top: 0; left:0 ; width: 100%; text-align: right; } #chart em, #chart span { font-family: Arial; width: 100%; text-align: center; } /* "240,021" */ #chart em { font-size: 40px; font-weight: bold; font-style: normal; color: #66ccff; } /* "USERS" */ #chart .caption { color: #ccc; font-size: 12px; }