Sample ExtJs Line Chart

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

JavaScript

Ext.require([
    'Ext.chart.Chart'
]);

Ext.define('CricketScore', {
    extend: 'Ext.data.Model',
    fields: ['over', 'score']
});

var store = Ext.create('Ext.data.Store', {
    model: 'CricketScore',
    data: [
        { over: 5, score: 35 },
        { over: 10, score: 75 },
        { over: 15, score: 110 },
        { over: 20, score: 135 },
        { over: 25, score: 171 },
        { over: 30, score: 200 },
        { over: 35, score: 225 },
        { over: 40, score: 240 },
        { over: 45, score: 285 },
        { over: 50, score: 345 },
    ]
});

Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
    theme: 'Red',
   store: store,
    animate: true,
    legend: {
				position: 'bottom'
			},
    axes: [
        {
            title: 'Over',
            type: 'Numeric',
            position: 'left',
            fields: ['over'],
            minimum: 1,
            maximum: 50
        },
        {
            title: 'Score',
            type: 'Numeric',
            position: 'bottom',
            fields: ['score']
        }
    ],
    
      series: [
        {
            type: 'line',
            xField: 'score',
            yField: 'over',
            style:{
            	cursor:'pointer',
              opacity: 0.5
            }
        }
    ]
});