Line Chart with multi colored segments

Question

I am using Ext 5 and would like to color segments in a line chart based on the values. Show line in green color if value greater than the target otherwise red.

Is there any way to change the color of a line segment in Ext line chart based on its value?

I could find that there is no built-in way of doing this in sencha from this link

I have also tried add a line sprite dynamically over the line to make an impact of varying colors. It worked. But I was unable to find the exact x, y coordinates to draw this custom line dynamically.

This is the code I have tried so far.

Ext.onReady(function () {    
    var data = [{
        'date': '1',
        'data2': 4
    }, {
        'date': '2',
        'data2': 8
    }, {
        'date': '3',
        'data2': 12
    }, {
        'date': '4',        
        'data2': 6
    }, {
        'date': '5',
        'data2': 36
    }];

    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        store: {
            fields: ['name', 'data2'],
            data: data
        },
        listeners: {
            redraw: function(){
                var chart = this;
                var series = chart.series[0];
                var dataRange = series.dataRange;
                var large = dataRange.find(function(v){ return v>14 });
                if(large){
                    var line = series.getSurface().add({
                        type: 'line',
                        fromX: 354,
                        fromY: 75,
                        toX: 465,
                        toY: 257,
                        zIndex: 2000,
                        stroke: 'green',
                        'stroke-width': 2,
                    }).show(true);
                }                           
            }
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            fields: ['data2'],
            title: {
                text: 'Stores Visited',
                fontSize: 15
            },
            grid: true,
            minimum: 0
        }, {
            type: 'category',
            position: 'bottom',
            fields: ['date'],
            title: {
                text: 'Date',
                fontSize: 15
            }
        }],
        series: [{
            type: 'line',
            style: {
                stroke: 'red',
                lineWidth: 2
            },
            xField: 'date',
            yField: 'data2'
        }]
    });
});

Semih Gokceoglu Semih Gokceoglu · Accepted Answer · 2015-10-06T21:44:39

Actually, changing color of whole line, (which is between per metric) is not hard. The problem is how to change color of portion line. To fix this issue, I created data boundaries(pushed boundary items to store). I am not sure It will be useful for you. Unfortunately, I don't have any idea except this. Anyway, please check this fiddle: https://fiddle.sencha.com/#fiddle/v0d

var data = [{
            'name': 'metric one',
            'data2': 4
        }, {
            'name': 'metric two',
            'data2': 8
        }, {
            'name': 'metric three',
            'data2': 20
        }, {
            'name': 'metric four',
            'data2': 12
        }, {
            'name': 'metric five',
            'data2': 18
        }, {
            'name': 'metric six',
            'data2': 24
        }, {
            'name': 'metric seven',
            'data2': 36
        }];
        var newData = [];
        Ext.each(data, function(dt, index) {

            newData.push(dt);
            if((index != data.length-1) && dt.data2 < 14 && 14 < data[index+1].data2) {
               newData.push({'data2': 14, name: index});
            }     
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            store: {
            fields: ['name', 'data2'],
                data: newData
            },
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data2'],
                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',
                style: {
                    lineWidth: 2,
                    maxBarWidth: 30,
                    stroke: 'red'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var store = rendererData.store,
                    storeItems = store.getData().items,
                    record = storeItems[index],
                    prev = storeItems.length - 2,
                    last = storeItems.length - 1,
                    changes = {};
                    if (!record) {
                        return;
                    }
                    if (record.get('data2') > 14) {
                        changes.strokeStyle = 'green';
                    } else {
                        changes.strokeStyle = 'red';
                    }
                    return changes;
                },
                xField: 'name',
                yField: 'data2'
            }]
        });

Line Chart with multi colored segments

1 Answers