PDA

View Full Version : EXTJS 4.2.2 Line Chart with value displayed at the datapoints



amitdutta
12 Jun 2014, 11:22 AM
I am using extjs 4.2.2 Chart. My requirement is to display a line chart also want to display the values in the node. In some of the posts I saw that can be done using Series label. Somehow it is not displaying the values in the node or the datapoints. Following is the chart code.


items : [ { xtype : 'chart', // renderTo : Ext.getBody(), width : 1600, animate : true, height : 400, shadow : true, // theme: 'Category2', store : 'SWeatherPoint', axes : [ { title : 'Temperature', type : 'Numeric', position : 'left', fields : [ 'temperature' ], minimum : 0, maximum : 100, minorTickSteps : 1, // grid: true grid : { odd : { opacity : 1, fill : '#ddd', stroke : '#bbb', 'stroke-width' : 0.5 } } }, { title : 'Day of the Month', type : 'Time', position : 'bottom', fields : [ 'date' ], dateFormat : 'M d', constrain : true, fromDate : new Date('1/1/07'), toDate : new Date('1/30/07'), grid : true } ], series : [ { type : 'line', xField : 'date', yField : 'temperature', highlight : { size : 7, radius : 7 }, axis : 'left', smooth : true, fill : true, label : {// display : 'under', // or 'rotate' field : 'temperature', renderer : function(label, storeItem, item, i, display, animate, index) { console.log(this); console.log(item.get('temperature')+''+item+'' + i+''+display+ ''+index); return String(item.get('temperature')); } }, tips : { trackMouse : true, width : 200, height : 28, renderer : function(storeItem, item) { this.setTitle(storeItem.get('temperature') + ': ' + storeItem.get('date') + ' views'); } }, style : { fill : '#18428E', stroke : '#18428E', 'stroke-width' : 3, 'stroke-dasharray' : 10 // You need to add this! }, markerConfig : { type : 'circle', size : 4, radius : 4, 'stroke-width' : 0, fill : '#18428E', stroke : '#18428E' } } ]
It will be helpful if someone could point the issue.
Thanks, Amit

Gary Schlosberg
13 Jun 2014, 10:49 AM
Looks like this is a known bug and has already been resolved in 4.2.3.