CODEWITHSUNDEEP
extjsextjs4
ollifant
ollifant

Reputation: 8616

Extjs Charting Series with dashed line

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?

Upvotes: 5

Views: 6350

Answers (2)

Shantanu
Shantanu

Reputation: 31

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.

Upvotes: 3

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

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.

Upvotes: 6

Related Questions