Extjs Charting Series with dashed line

Question

I am using Extjs 4 to create a line chart. Now I want to create a chart series with a dashed line. Currently my code looks the following way:

series: [{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data1',
style: {
    fill: '#18428E',
    stroke: '#18428E',
    'stroke-width': 3
},
markerConfig: {
    type: 'circle',
    size: 4,
    radius: 4,
    'stroke-width': 0,
    fill: '#18428E',
    stroke: '#18428E'
}
}, ...    

I tried setting the 'border-style' to 'dashed' but this neither works. Is this possible in ExtJs Charting?

Answer 1

You just missed one property to get the dashed lines working. You need to add stroke-dasharray property as well. Here is the updated code:

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'
},

You will have to play with the value (10 in my case) to get your desired dash length. Note that this will not work with IE (since its using VML to render the graph). Other browsers should render it properly.

Answer 2

In ExtJS 5.x or 6.x when using sencha-charts (not ext-charts package), stroke-dasharray won't work. After lot of effort, discovered the lineDashed property of Ext.draw.sprite.Sprite works like a charm. So, if you are using sencha-chart package the style config should look like :

style: {            
    fill: '#18428E',
    stroke: '#18428E',
    'stroke-width': 3,
    lineDash: [10,10]  // Draws dashed lines
}

Hope this will be useful for anyone having problem with sencha-charts.