PDA

View Full Version : Chart - how to style a specific grid line?



LesJ
16 Sep 2013, 11:16 AM
The Axis grid config allows styling of the entire grid or on an odd/even basis, but I don't see an easy way to style a specific grid line.

For example, I'd like to have the grid line that goes through the 0 value a little bolder and red.

How could I do this?

http://docs-origin.sencha.com/extjs/4.2.1/extjs-build/examples/charts/Column.html

LesJ
18 Sep 2013, 8:13 AM
Let me bump it just once.

zokeefe
18 Sep 2013, 2:35 PM
I would also like to know how to do this

LesJ
27 Sep 2013, 12:18 PM
zokeefe, feel free to use this custom code. Line width and color can be customized.

Ext.define('MyApp.view.chart.MeasureAxis', {
extend: 'Ext.chart.axis.Numeric',
type: 'Measure',
alias: 'axis.measure',
isMeasureAxis: true,
lineWidth: 2,
lineColor: '#00008B', // dark blue
drawGrid: function () {
this.callParent();
this.addZeroLine();
},
addZeroLine: function () {
var me = this,
line = me.zeroLine,
width = me.width - 2,
index = Ext.Array.indexOf(me.labels, 0),
point = me.inflections[index],
path = ["M", point[0] + 0.5, point[1] + 0.5, "l", width, 0];
if (line) {
line.destroy();
}
me.zeroLine = me.chart.surface.add({
type: 'path',
path: path,
zIndex: 100,
'stroke-width': me.lineWidth,
stroke: me.lineColor
}).show(true);
}
});