Line series colors fill border even when no fill is set (2.1 RC2 charts)

[jep]

In ST 2.1 RC2:

Using a slightly modified version of the example in the docs:

var store = new Ext.data.JsonStore({
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    ]
});

var lineChart = new Ext.chart.CartesianChart({
    animate: true,
    store: store,
    axes: [{
        type: 'numeric',
        position: 'left',
        fields: ['data1'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        },
        grid: true,
        minimum: 0
    }, {
        type: 'category',
        position: 'bottom',
        fields: ['name'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        }
    }],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        style: {
            stroke: 'red',
            lineWidth: 4
        },
        fill: false,
        xField: 'name',
        yField: 'data1',
        marker: {
            type: 'path',
            path: ['M', -2, 0, 0, 2, 2, 0, 0, -2, 'Z'],
            stroke: 'blue',
            lineWidth: 0
        }    
    }]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(lineChart);

Results in:
chartSpillover.png

Notice the red lines on the left, bottom and right. These shouldn't be there if you have fill turned off. I've found no way to disable them.

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[jep]

A little more info: I notice this only happens with lineWidth > 2.

[jep]

Strike that. It will happen even with lineWidths smaller, as long as the min/max of the axis aren't right up against the datapoints. Here's an example of that:

var store = new Ext.data.JsonStore({
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    ]
});

var chart = new Ext.chart.CartesianChart({
            store:Ext.create('Ext.data.JsonStore', {
                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                data: [
                    {'name':1, 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                    {'name':2, 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                    {'name':3, 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                    {'name':4, 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                    {'name':5, 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                ]
            }),
            axes:[
                {
                    type:'numeric',
                    position:'left',
                    fields:['data1'],
                    minimum:-2
                },
                {
                    type:'numeric',
                    position:'bottom',
                    minimum:0,
                    maximum:6,
                    fields:['name']
                }
            ],
            series:[
                {
                    type:'line',
                    style:{
                        stroke:'red',
                        lineWidth:1
                    },
                    xField:'name',
                    yField:'data1',
                }
            ]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);

chartSpillover2.png

[zhangbei]

Please use `preciseStroke: true` in this case. Put it in the style of the line series.

[jep]

I appreciate the reply and the fix but I have to wonder, "that's it?" Is this something you really expect people to somehow figure out? To say it's poorly documented is an overstatement. Once I knew the property, I know can find the sum total of the documentation for it:

preciseStroke : Boolean
'true' if the line uses precise stroke.
Defaults to: false

I really don't get this. First off, this kind of behavior is just flat out wrong for the default. Second, this should be thoroughly documented.

This was marked as CLOSED rather than FIXED, so I assume you're saying "working as intended." If so, I can't help but think this is a terribly bad idea.

[zhangbei]

Firstly, I'm really sorry for the documentation. We are continuing working on the documentation as hard as we can.

Secondly, this default behavior is not "wrong". The default behavior is to create an single path with both fill and stroke so we can save about 50% memory and time. Normally if we set the minimum and maximum inside the range of the data, the extra strokes will be trimmed automatically by the boundary of the surface, but if you set minimum and maximum outside the datarange, then you need to set `preciseStroke` to `true` to hide the extra strokes. The down side is if you have both fill and stroke, we will have to create two different paths.

So, thank you very much for your feedback. We will add documents on the on minimum and maximum too.

[jep]

I see the performance implications. It's a thorny problem. Look back at my graph in the first post. There the sides and bottom "bleed through" because the stroke width is greater than the normal graph border width. Would you still be able to get the performance improvements if you forced those side/bottom strokes to be width 1 so they can always be covered up even if the stroke of the actual data line is greater than 1?