EXTJS 4.2.2 Line Chart with value displayed at the datapoints

Question

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

Answer 1

Looks like you are just missing items, and change setTitle to setText.

tips: {
        trackMouse: true,
        layout: 'fit',
        items: [{
            xtype: 'label'
        }],
        renderer: function (storeItem, item) {
            this.down('label').setText(storeItem.get('temperature') + Ext.util.Format.date(storeItem.get('date'), 'm/d/Y') + ' views');
        }
    },

Edit: Adding example of HighCharts:

Here's an example where I took yahoo.com historical stock prices and made a stock chart out of them.

var chart = Ext.create('Chart.ux.Highcharts', {
itemId: 'stockChartH',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Close'],

label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Price',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['Date'],
title: 'Date',
label: {
    renderer: function (value, label, storeItem, item, i, display, animate, index) {
        return Ext.util.Format.date(value, 'm/d');
    }
}

}],

series:[{
    dataIndex: 'Close',
    name: 'Stock Price',
    tips: {
        trackMouse: true,
        layout: 'fit',
        items: [{
            xtype: 'label'
        }],
        renderer: function (storeItem, item) {
            this.down('label').setText(Ext.util.Format.date(storeItem.get('Date'),      'm/d/Y') + ': ' + storeItem.get('Close') + ' Closing Price');
        }
    }
}],
xField: 'Date',
store: 'yahoo.yahooHistorical_s',
chartConfig: {
    chart: {
        type: 'spline',

    },
      title: {
        text: ' '
    },

    xAxis: {
        type: "date",
        labels: {
            formatter: function (value, label, storeItem, item, i, display, animate, index) {
                return Ext.util.Format.date(value, 'm/d');
                        }                    
                    },
        plotLines: [{
            color: '#FF0000',
            width: 5,
            title: 'test',
            value: 'mar',

        }]
    },
            yAxis: {
        title: {
            text: 'Price'
        }
    }
}
});