CODEWITHSUNDEEP
extjscolorscharts
Mark Twain
Mark Twain

Reputation: 836

ExtJS line chart, dynamically change color of a marker

How to conditionally change a color of a marker for an ExtJS line chart base on an y-axis value?

Upvotes: 0

Views: 4079

Answers (2)

Mark Twain
Mark Twain

Reputation: 836

So, I should to overide the drawSeries method.
I define a new chart line component:

Ext.define('RogovIndex.Chart.Line', {
    extend: 'Ext.chart.series.Line',
    alias: 'series.multycolorline',
    drawSeries: function () {
    //a lot of code
}});

And then I fire custom event ("beforemarkerrender") at this part of code:

if (showMarkers) {
                count = 0;
                for (i = 0; i < ln; i++) {
                    if (me.items[i]) {
                        item = markerGroup.getAt(count++);
                        if (item) {
                            me.addEvents('beforemarkerrender');
                            me.fireEvent('beforemarkerrender', item, endMarkerStyle, store, i);
                            rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
                            item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true);
                            if (!item.attr.hidden) {
                                item.show(true);
                            }
                        }
                    }
                }
                for (; count < markerCount; count++) {
                    item = markerGroup.getAt(count);
                    item.hide(true);
                }
            }

So, all I left to do is change the type of seria and subscribe on this event (check type and listeners parts):

series: [
                {
                    type: 'multycolorline',
                    axis: 'left',
                    xField: 'ValueDateString',
                    yField: 'Value',
                    style: {
                        stroke: '#aaa'
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 6,
                        radius: 6,
                        'stroke-width': 0,
                        fill: 'url(#v-2)'
                    },
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    tips: {
                        trackMouse: true,
                        minWidth: 170,
                        renderer: function (storeItem, item) {
                            this.update('Value 2: ' + storeItem.get('Value'));
                        }
                    },
                    listeners: {
                        'beforemarkerrender': function (marker, markerStyle, store, index) {
                            var item = store.getAt(index);
                            if (item.get('Equal')) {
                                markerStyle.fill = 'url(#v-1)';
                            } else {
                                markerStyle.fill = 'url(#v-2)';
                            }
                        }
                    }
                }
            ]

Upvotes: 1

mfruizs
mfruizs

Reputation: 770

You need to change the "fill" parameter on markerConfig

Maybe, this solution work for you: Change Color plot Points

When do you want the colour change?, on any specify event or action?

Upvotes: 1

Related Questions