Edit in JSFiddle

var data = {
    labels : ["","8:00","","12:00","","22:00",""],
	datasets: [
		{
			fillColor: "#fff",
			strokeColor: "#fff",
			data : [10,20,28,32,25,20,10]
		}
	]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Bar(data,{
	scaleOverlay : false,
	scaleOverride : true,
	scaleSteps : 2,
	scaleStepWidth : 20,
	scaleStartValue : 0,
	scaleLineColor : "rgba(0,0,0,.1)",
	scaleLineWidth : 1,
	scaleShowLabels : true,
	scaleLabel : "<%=value%>",
	scaleFontFamily : "'Arial'",
	scaleFontSize : 12,
	scaleFontStyle : "normal",
	scaleFontColor : "#fff",	
	scaleShowGridLines : false,
	scaleGridLineColor : "#00CE9B",
	scaleGridLineWidth : 1,	
	barShowStroke : true,
	barStrokeWidth : 1,
	barValueSpacing : 2,
	barDatasetSpacing : 0,
	animation : true,
	animationSteps : 60,
	animationEasing : "easeOutQuart",
	onAnimationComplete : null
	
});

<div id="chart">
    <canvas id="myChart" width="400" height="200"></canvas>
    <div class="count">
        <em>
           32
           <span class="o">o</span><span class="c">C</span>
        </em><br>
       <span class="caption">TOKYO</span>
    </div>
</div>

body {
    background: #00CE9B;
    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;

}
#chart .o {
    font-size: 7px;
   vertical-align: top; 
}
#chart .c {
    vertical-align: top;
    font-size: 30px;
}
/* "240,021" */
#chart em {
    font-size: 50px;
    line-height: 30px;
    font-weight: bold;
    font-style: normal;
    color: #fff;
}
/* "USERS" */
#chart .caption {
    color: #eee;
    font-size: 12px;
}