PDA

View Full Version : Category axis tick mark placement in column chart



donnhann
10 Oct 2011, 2:13 PM
I would like to change the tick marks to be between the columns instead of under them, as is typical for histogram charts. See the chart below. I would like the first x-axis label "1" to be before the navy blue bar, the next label "13" to be between the dark and light blue bars, etc. Any ideas on settings for this?


28604



seriesConfig = {
series: [{
title: chartConfig.chartTitle,
type: 'column',
column: true,
xField: "xData",
yField: "yData",
gutter: 0,
xPadding: 25,
yPadding: 1,
highlight: true,
highlightCfg: {
fill: highlightFillColor
},
renderer: function(sprite, storeItem, barAttr, i, store){
barAttr.fill = colorPalette[i % colorPalette.length];
return barAttr;
}
}]
};

axes: [{
type: 'Numeric',
minimum: 0,
position: numericPosition,
fields: [numericField],
title: numericTitle,
grid: numericGrid,
labelTitle: {
font: axisLabelTitleFont
},
label: {
font: axisLabelFont,
renderer: Ext.util.Format.numberRenderer(numberFormat)
}
}, {
type: 'Category',
position: categoryPosition,
fields: [categoryField],
grid: categoryGrid,
title: categoryTitle,
labelTitle: {
font: axisLabelTitleFont
},
label: {
font: axisLabelFont,
rotate: {
degrees: rotateLabelDegrees
},
renderer: function(v){
return v.substring(0, axisLabelMaxLength)
}
}

MartinK7
25 Sep 2012, 12:17 PM
I had the same problem. In my case, I was trying to represent a count distribution over time using grouped columns. Having the count value bars lining up with the horizontal tick marks was counter-intuitive. I needed to have the bars centered between the tick marks.

I was able to achieve this by using a custom series renderer on my class (derived from Ext.chart.series.Column), like below.



// For a time axis, we want to display the columns BETWEEN the tick marks
renderer: function(sprite, record, attr, index, store) {


// Offset all sprites to middle of time interval
attr.x += me.bounds.groupBarWidth * (1 + (me.gutter / 100));


return attr;
}

This simple fix was inspired by looking at the following line of getPaths( ) in Bars.js.


x = (bbox.x + xPadding + (barWidth - shrunkBarWidth) * 0.5 + i * barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked))


Note that in 4.1.1 (at least), the gutter and groupGutter properties seem reversed when compared to the API doc. Also, the barWidth and groupBarWidth variables seem reversed too as groupBarWidth is always smaller than barWidth. I would've expected the opposite. Nonetheless, it doesn't prevent the code, or the fix, from working.