View Full Version : Creating a project pipeline using "chart"

16 Jul 2015, 1:31 AM
Hello everyone. I am new to sencha extjs. I have to create panel with a graph inside similar to the one in the picture. I have used the chart class and created a line with markers(hid the axes)

My problem is how can i create multiple labels holding a data loaded from db ( and position them on the both sides of the line) like shown in the picture.

16 Jul 2015, 1:13 PM
You can add custom text to your chart like so:

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,

items: [{
type : 'text',
text : 'Custom Text',
font : '24px Arial',
width : 100,
height: 30,
x : 100,
y : 100

17 Jul 2015, 1:26 AM
Thanks Scott. The thing with the custom text is great but i am trying to bind this text to the markers on the line. Thant is why i am using the label property see some sample code:

Ext.apply(me, {
axes: [
type: 'Numeric',
minimum: 0,
maximum: 1.2,
position: 'left',
fields: ['dataValue'],
hidden: true,
minorTickSteps: 1
type: 'Category',
position: 'top',
hidden: true,
fields: ['fromXaxis'],
title: 'Location'

series: [{
type: 'line',

axis: 'left',
xField: 'fromXaxis',
yField: 'dataValue',
style: {
fill: '#38B8BF',
'stroke-width': 2
highlight: {
size: 11,
radius: 11
markerConfig: {
type: 'circle',
size: 9,
radius: 9,
'stroke-width': 2,
stroke: '#38B8BF',
fill: '#FFF',
cursor: 'pointer'

label: {
display: 'under',
'text-anchor': 'middle',
field: 'fromXaxis',
renderer: function (v, label, storeItem, item, i, display, animate, index){
var tpl = '{0} \n' +
'startPhaseDate:{1}\n' +

return Ext.String.format(
orientation: 'vertical',
color: '#333'
listeners: {
scope: me,
itemclick: me.handleSeriesClick

So my idea is instead of doing that. to apply two separate labels to the marker and situate one on top and the other under it. Is that possible ?

Thanks in advance