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.