Results 1 to 2 of 2

Thread: Category axis tick mark placement in column chart

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2010

    Default Category axis tick mark placement in column chart

    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?

    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)

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Trois-Rivires, QC

    Default Centering chart columns between tick marks

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts