Sencha chart marker being cut by axis line

Question

I am trying to do a line chart in Sencha charts 1.0, and it works well. However - the marker circle is being cut by the axis line. You can see it also in the Sencha charts official example (that uses images as markers...): http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Line/.

I found another example that uses Ext js 4 that the line chart markers are not being cut: http://dev.sencha.com/deploy/ChartsDemo/examples/chart/Line.html.

I tried multiple things: tried to play with CSS, tried even swithcing the code of Ext.chart.series.Line to the one from Ext JS 4 but with no success. Does anyone know of an easy way of doing it? even a reference to a clue of how doing it?

thanks

Assaf Assaf · Accepted Answer · 2012-06-17T12:22:42

It seems like someone else already experienced it before me. Apparently, Ext.js 4 implements charts using SVG while Sencha Charts 1.0 does it using drawing on Canvas. If the source code was more readable - I could have understood where it uses layers and where should I ask the Chart Canvas to have less z-Index. However, it isn't, and a comfortable workaround is to define 5 px (depends on the radius of your marker points) gutter for each series:

getGutters:function(){
                    return[0,5];
                },

Found the solution in this thread: http://www.sencha.com/forum/showthread.php?202886-add-space-on-x-axis-in-graph

Sencha chart marker being cut by axis line

1 Answers